最も実用的なJS配列関数の整理

11947 ワード

私たちは以前からJS配列に関する内容を整理してきましたが、今回は非常に実用的なJS配列の操作技術と書き方を整理して勉強してみましょう。
instance of

           ;(          ;)
//        typeof ;
A instanceof B // A   B    ;
 :
  var arr = [1,2,3];
  console.log(arr instanceof Array); //arr    Array  ;
Aray.isAray()

Array.isArray(  ); //          ,     ;
 :
  var arr = [1,2,3];
  var num = 123;
  console.log(Array.isArray(arr)); //true
  console.log(Array.isArray(num)); //false
toString()

  .toString(); //         ,   [],       ;
 :
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.toString());   //   aaa,bbb,ccc
valueOf()

  .valueOf(); //      ;  
 :
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.valueOf());   //       ["aaa","bbb","ccc"]
配列.jin(パラメータ)

  .join(  ); //                        ;
console.log(arr.join()); // toString()
console.log(arr.join("|")); //
console.log(arr.join("&")); //
console.log(arr.join(" ")); // ,
console.log(arr.join("")); //
配列要素の追加と削除
push()とpop()

1.   .push() //           ;
2.   .pop() //     ;           ;
 :
  var arr = [1,2,3];
  var aaa = arr.push("abc");//             ;
  console.log(arr);//      
  console.log(aaa);//         ;

  aaa = arr.pop();//     ;           ;
  console.log(arr);//      
  console.log(aaa);//       
unshift()とshift()

1.   .unshift() //             ;
2.   .shift() //     ;           ;
 :
  var arr = [1,2,3];
  aaa = arr.unshift("abc");//             ;
  console.log(arr);//      
  console.log(aaa);//         ;

  aaa = arr.shift();//     ;           ;
  console.log(arr);//      
  console.log(aaa);//       
配列要素の並べ替え
逆転()

reverse()  //    
 :
  var arr1 = [1,2,3,4,5];
  var aaa = arr1.reverse(); // [5,4,3,2,1]
sort()

sort() //        ;(  :    )
   //   :       Unicode    ;               ...
 :    
  var arr = [4,5,1,3,2,7,6];
  var aaa =arr.sort();
  console.log(aaa);     // [1, 2, 3, 4, 5, 6, 7]
  console.log(aaa === arr);// true        (    )
  //         ;
  var arr2 = ["c","e","d","a","b"];
  var bbb = arr2.sort();
  console.log(bbb);     // ["a", "b", "c", "d", "e"]
  console.log(bbb===arr2); // true        (    )

sort() //        ,        ;
 :
   var arr = [4,5,1,13,2,7,6];
   //            :  1-  2;  ;    2-  1;  ;
   arr.sort(function (a,b) {
    return a-b; //  
    //return b-a; //  
    //return b.value-a.value; //    value       ;
   });
   console.log(arr); // [1, 2, 4, 5, 6, 7, 13]
ソフト()の底の原理

  var aaa = bubbleSort([1,12,3], function (a,b) {
//    return a-b;//  :array[j]-array[j+1];
    return b-a;//  :array[j+1]-array[j];
  });
  console.log(aaa);

  function bubbleSort(array,fn){
    //       ,       ,      -1;
    for(var i=0;i<array.length-1;i++){
      for(var j=0;j<array.length-1-i;j++){//    ,     ,     ;
        //        ;
//        if(array[j]>array[j+1]){//      ;    ;
        //a-b>0   a>b     ;
        //b-a>0   a<b     ;
//        if(array[j]-array[j+1]>0){//    
//        if(array[j+1]-array[j]>0){//    
        //            ;
        if(fn(array[j],array[j+1])>0){
          var temp = array[j];
          array[j] = array[j+1];
          array[j+1] = temp;
        }
      }
    }
    //    
    return array;
  }
配列要素の操作
concat()

  1.concat(  2); //       ;
var arr1 = [1,2,3];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3)  //  [1, 2, 3, "a", "b", "c"]
slice()

  .slice(     ,     );   //    ;
  :
   var arr = [1, 2, 3, "a", "b", "c"];
   console.log(arr.slice(3));      //     3     ;["a", "b", "c"]
   console.log(arr.slice(0,3));      //     ;[1, 2, 3]
   console.log(arr.slice(-2));      //      ;["b", "c"]
   console.log(arr.slice(3,0));      //          ,    [];[]
   console.log(arr);             //       ;[1, 2, 3, "a", "b", "c"]
splice()

  .splice(     ,    ,    1,    2,...); //      ;
                           //     ;       /     
 :
  var arr = [1,2,3,4,5,6,"a", "b", "c"]
  arr.splice(5);    //     3     ;(  )
  console.log(arr);   // [1, 2, 3, 4, 5]
  arr.splice(1,2);  //(      )    1     2 
  console.log(arr);  //[1, 4, 5]

//  
  var arr = [1,2,3,4,5,6,"a", "b", "c"];
  console.log(arr.splice(3,3,"aaa","bbb","ccc"));  //(        )
  console.log(arr);   // [1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]
//    
  arr.splice(3,0,"aaa","bbb","ccc");//(      )
//
  console.log(arr);//         ;  [1, 2, 3, "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "a", "b", "c"]
indexOf/lastIndexOf

  .indexOf(  );   //    ,   (    )
  .lastIndexOf(  ); //    ,   (    )
 :
  var arr = ["a","b","c","d","c","b","b"];
  console.log(arr.indexOf("b"));    // 1         
  console.log(arr.lastIndexOf("b"));  // 6         
  console.log(arr.indexOf("xxx"));  // -1;       -1;
配列反復(巡回)
every()

             ,     true,every  true,
       false,      every  false;      false
       ,    !!!
 :
1.  var arr = [111,222,333,444,555];
  arr.every(function (a,b,c) {
    console.log(a);  //  
    console.log(b);  //   
    console.log(c);  //    ;
    console.log("-----");  //    ;
    //       :c[b] =  ;   a=       ;
    return true;
  });

2. //every    bool ,   true  true;    false,    false
  var bool = arr.every(function (element, index, array) {
    //  :           200;
    //if(element > 100){
    if(element > 200){
      return true;
    }else{
      return false;
    }
  })
  alert(bool); //false
 
filter()

//               ,        true        
//                  ,return ture  ;
 :
  var arr = [111,222,333,444,555];
  var newArr = arr.filter(function (element, index, array) {
    //     ,     ;(       )
    if(element%2 === 0){
      return true;
    }else{
      return false;
    }
  })

  console.log(newArr); // [222, 444]
forEach()

//  for    ;     ;
 :
  var arr = [111,222,333,444,555];
  var sum = 0;
  var aaa = arr.forEach(function (element,index,array) {
    console.log(element); //            
    console.log(index); //           
    console.log(array); //      [111, 222, 333, 444, 555]
    sum += element; //       ;
  });
  console.log(sum); //          
  console.log(aaa);//undefined;          undefined
map()

//              ,              
//  return          ;  return  undefined;        
 :
  var arr = [111,222,333,444,555];
  var newArr = arr.map(function (element, index, array) {
    if(index == 2){
      return element; //   return           333
    }
    return element*100; //          100   
  })
  console.log(newArr); // [11100, 22200, 333, 44400, 55500]
私()

//             ,           true, some  true;    ,     ,    !!!
 :
  var arr = [111,222,333,444,555];
  var bool = arr.some(function (ele,i,array) {
    //  :    3   
    if(ele%3 == 0){
      return true;
    }
    return false;
  })
  alert(bool); //true ;        true
配列が空です

  1. arr.length = 0; // (  ,       )
  2. arr.splice(0); //          ;
  3. arr = [];   //        ; (  !)

//    :        ,         ;          ;
 : // arguments
    fn(111,222,333);
    function fn(){
      arguments.length = 0; //         [1, 2, 3]
      arguments.splice(0); //     arguments.splice is not a function
      arguments = []; //     ,     [] 
      console.log(arguments);
    }

配列事例
1.文字列配列を|分割の形で出力します。例えば、「劉備𞓜張飛𞓜関羽」です。二つの方法で実現する。

    var arr = ["  ","  ","  "];
    var separator = "|";
    //  for    
    var str = arr[0];
    for(var i=1;i<arr.length;i++){
      str += separator+arr[i];
    }
    console.log(str); //   |  |  
    //join()               ;
    console.log(arr.join("|")); //   |  |  
2.文字列配列の要素の順番を反転します。[a","b","c",""d"-""d","c","b","a""。二つの方法で実現する。ヒント:i番目とlength-i-1個は交換します。

 //   .reverse()   
      var arr = ["a", "b", "c", "d"];
      console.log(arr.reverse()); // ["d", "c", "b", "a"]
    
    //   :1.    ,    ; 2.    ,    ;  3.         ;
      for(var i=0;i<arr.length/2;i++){
        var temp = arr[i];
        arr[i] = arr[arr.length-1-i];
        arr[arr.length-1-i] = temp;
      }
      console.log(arr);
3.給与の行列[1500,1200,2000,2100,1800]は、2000を超える給与を削除する。

  var arr = [1500, 1200, 2000, 2100, 1800];
  //  filter()      ;return true;     ;
  var newArr = arr.filter(function (ele, i, array) {
    //2000    false;
    if(ele<2000){
      return true;
    }else{
      return false;
    }
  });
  console.log(newArr); // [1500, 1200, 1800]
4.「c」、「a」、「z」、「a」、「x」、「a」の配列のそれぞれのaが現れる位置を見つけます。

  var arr = ["c", "a", "z", "a", "x", "a"];
  //    (for/while/do...while)  forEach();
  arr.forEach(function (ele, index, array) {
    //      “a”,        ;
    if("a" === ele){
      console.log(index);
    }
  });
5.一つの配列の重複要素を取り除く方法を編纂する(配列の重さを除く)

    var arr = ["  ","  ","  ","  ","  ","  "];
  //   1:   :       ,     ,  ,                  ,      ;
    var newArr = [];
    //     
    arr.forEach(function (ele,index,array) {
      //         ,             ,      ;
      if(newArr.indexOf(ele) === -1){//      ;(            ,   -1    )
        newArr.push(ele);
      }
    });
    console.log(newArr); // ["  ", "  ", "  "]