Array常用方法总结

摘要：从学习来，一直觉得数组方法真是多，总是疑惑哪个会更好。索性将全部关于数组相关的方法整理出来。整理之前以为就是简单的汇总，然而慢慢整理的过程发现很多新奇的数组以及腻害的用法。这些数组方法看起来简单，实际用处确是很大。

从学习javascript来，一直觉得数组方法真是多，总是疑惑哪个会更好。索性将全部关于数组相关的方法整理出来。整理之前以为就是简单的汇总，然而慢慢整理的过程发现很多新奇的数组以及腻害的用法。这些数组方法看起来简单，实际用处确是很大。

改变原数组的方法
1.1 push

 功能：向数组的末尾添加一个或多个元素，并返回新的数组长度 
 语法：array.push(item1,item2, ..., itemN)
 例子：
     ```
        var arr = [1];
        arr.push(2,3);//arr的值[1,2,3] 返回数组长度3
        var arr2 = [3,4,5];
        arr.push(...arr2);//arr的值[1,2,3,3,4,5]  返回数组长度6 这里是利用ES6的扩展运算符
     ```
     

1.2 pop

 功能：删除数组的最后一个元素并返回删除的元素
 语法：array.pop()
 例子：
     ```
        var arr = [1,2,3,4];
        arr.pop();//arr的值[1,2,3] 返回删除的元素4
     ```
     
     

1.3 unshift()

 功能：向数组开头添加一个或多个元素，并返回新的数组长度
 语法：array.unshift(item1,item2, ..., itemN)
 例子：
     ```
        var arr1 = [3]; 
        // arr的值[1,2,3]
        /    / 注意:在unshift后面连续加两个添加项，不会一个一个加，而是整体加开头
        arr1.unshift(1,2);
   
        // 注意：只有一个个元素的用unShift插入，才会每次从开头开始插入
        var arr2 = [3];
        arr2.unshift(1);//arr2的值[1,3]
        arr2.unshift(2);//arr2的值[2,1,3]
     ```

1.4 shift()

 功能：删除数组开头的第一个元素，并返回该元素
 语法：array.shift()
 例子：
     ```
        var arr = [1,2,3,4];
        arr.shift();//arr的值变为[2,3,4] 返回1
     ```
     

1.5 splice()

 功能：添加或删除数组的元素,返回被删除的项目(数组)
 语法 array.splice(start[,len[,item1[,itemx]]])
 参数解释：
     start 删除/添加 元素开始的位置
     len 要删除的元素的数量
     item1,itemx 要添加的元素的值，从start位置开始添加
 例子：
     ```
        var arr = [1,8,4,5,6,7];
        // 返回被删除的项目[8]这个数组，arr的值变为[1,2,3,4,5,6,7]
        arr.splice(1,1,2,3);
             
     ```

不改变原数组的方法
2.1 concat

 功能：连接两个或多个数组，返回一个新的数组，不改变原数组
 语法：array.concat(value1[, ... [, valueX])
 参数解释：value1 可以是数组或非数组。**非数组时作为元素项被一次添加到新数组中**
 例子：
     ```
        var arr1 = [1,2];
        var arr2 = [3,4];
        var arr3 = [5,6];
        var arr4 = arr1.concat(arr2,arr3);//arr4的值[1,2,3,4,5,6] arr1,arr2,arr3不变
        //用ES6
        var arr5 =[...arr1, ...arr2, ...arr3];//结果与arr4一样
     ```
 面试题：传递两个参数m，n，返回长度为m，所有元素都为n的数组。必须用递归和cancat
     fn(m,n){
         return m?fn(m-1).concat(n):[];
     }
     

2.2 join

 功能：将数组的每一个元素，通过某个字符串拼接。并返回新的拼接完成的字符串
 语法：array.join(separator)
 例子：
     ```
        var arr = [1,2,3,4];
        arr.join();//返回值 1,2,3,4
        arr.join("-");//返回值 1-2-3-4
     ```

2.3 slice

 功能：提取数组中某一部分的元素，返回被提取出的部分数组
 语法：array.slice(start[,end])
 参数解释：
      start 提取的开始位置
      end 提取的结束位置(不包含)
 例子：
     ```
        var arr = [1,2,3,4];
        var subArr = arr.slice(1,3);// subArr的值[2,3]
     ```

2.4 indexOf

 功能：返回数组中某个指定元素下标的位置,如果没找到返回-1
 语法：array.indexOf(item[,start])
 参数解释：
      item 要查找的元素
      start 开始查找的位置，省略则从头开始查找
 例子：
 
     ```
        var arr = ["black","orange","apple"];
        arr.indexOf("orange");//返回 orange的下标 1 
     ```
 面试题：数组去重
 
     ```
        var arr1 = [1,2,3,4,4,5,5,7,1];
        var arr = [];
        arr1.forEach((item, index)=>{
            if(arr.indexOf(item)<0){
                arr.push(item);
            }
        })  
     ```

2.5 lastIndexOf

 功能：返回数组中最后一次出现该元素的位置,如果未找到返回-1。查找方向从⬅️
 语法：array.lastIndexOf(item[,start])
 参数解释：
      item 要查找的元素
      start 开始查找的位置，如省略则从最后开始向前查找。
 例子：
     ```
        var arr = [1,2,3,4,2,3];
        arr.lastIndexOf(2);//返回下标 4
        arr.lastIndexOf(2,3);//返回下标 1
     ```

2.6 includes

 功能：判断一个数组是否包含一个指定的值，如果包含返回true,否返回false
 语法：array.includes(searchItem[,formIndex])
 参数解释：
     searchItem 要查找的元素值
     formIndex 开始查找元素的位置 >=0有效,<0则从数组开头查找
 例子：
     ```
        var arr = [1,2,3,4];
        arr.includes(1);//true
        arr.includes(1,1);//false
        arr.includes(1,-1);//true 相当于 arr.includes(1)
     ```

2.7 find

 功能：返回数组中检测函数的条件的第一个元素的值，否则返回undefined
 语法：array.find(callback(currentValue[,index[,arr]])[,thisArg])
 参数解释：
      callback 数组中每个元素执行的函数，接受三个参数
        currentValue 数组中遍历的当前元素
        index 数组中遍历的当前元素的下标
        array 当前数组
      thisArg 执行回调时用作this的对象
 例子：
     ```
        var ages = [10,18,20,22];
        var obj = {"name":"cherry"};
        var result = arge.find(function(age){
            console.log(obj);  //{"name":"cherry"}
            return age>=18;
        },obj);    //result 的值为 18
     ```

2.8 findIndex

 功能：返回数组中检测函数的条件的第一个元素的下标，否则返回-1
 语法：array.findIndex(callback(currentValue[,index[,array]])[,thisArg])
 参数解释：
       callback 数组中每个元素执行的函数，接受三个参数
        currentValue 数组中遍历的当前元素
        index 数组中遍历的当前元素的下标
        array 当前数组
      thisArg 回调函数中可用作this的对象
 例子：
     ```
        function isOdd(currentValue){
           return currentValue%2;
        }
        var arr = [2,4,6,1,3];
        arr.findIndex(isOdd);//3  返回第一个奇数
        var arr1 = [2,4,6,8];
        arr1.findIndex(isOdd);//-1  没有奇数则返回-1
     ```

2.9 valueOf

 功能：还是返回原数组
 语法：array.valueOf()
 例子：
     ```
        var arr = [1,2,3,4];
        arr.valueOf();//[1,2,3,4]
     ```
   

2.10 toString

 功能：返回一个由数组中每个值组成的以逗号拼接的字符串
 语法：array.toString()
 描述：比如我们alert(arr)时，接受一个字符串则会隐式调用toString在控制台输出字符串
 例子：
     ```
        var arr = [1,2,3,4];
        arr.toString();// 原数组不变，但输入值为 1,2,3,4
     ```

2.11 copyWithin

 功能：浅复制数组的一部分到同一数组的另外一个位置，数组长度不变。返回改变后的数组
 语法：array.copyWithin(target[,start[,end]])
 参数解释：
    target：被复制的一部分数组放置的起始位置 
            0为基底的索引，如果是负数，将从末尾开始计算。
            **target>=array.length 不发生拷贝**
    start：拷贝起始的位置。如果是负数，则从末尾开始计算。如不填，默认从0开始
    end：拷贝结束的位置。如果是负数，则从末尾开始计算。如不填，默认为数组长度
 例子：
     ```
        var numbers = [1,2,3,4,5];
        numbers.copyWithin(-2);// 新返回的数组 [1,2,3,1,2];
        numbers.copyWithin(0,3,4);// 新返回的数组 [4,2,3,4,5];
        [].numbers.call({length:5,3:1},0,3); 
        //新返回的数组 [0:1,3:1,legnth:5]
        
         //这里解释一下 {length:5,3:1}等价于
         //{0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5}
         //所以用第4个元素开始copy，copy的数组放置在第0个位置。结果为
         //{0:1,1:undefined,2:undefined,3:1,4:undefined,length:5}
      ```

2.12 flat

   功能：按照指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并到一个数组中，
    返回一个新数组
   语法：array.flat(depth = 1)
   例子：
       ```
          var arr1 = [1,2,[3,4]];
          arr1.flat();// 返回新数组[1,2,3,4]
          var arr2 = [1,2,[3,4,[5,6]]];
          arr2.flat();// 返回新数组[1,2,3,4,[5,6]]
          arr2.flat(2);// 返回新数组 [1,2,3,4,5,6]
          arr2.flat(Infinity);// 返回新数组 [1,2,3,4,5,6] 
          var arr3 = [1,2,,4,5];
          arr3.flat();//返回新数组 [1,2,4,5] **可以去除空项**
       ```
   替代方案

       ```
           //使用reduce,concat 一层
           var arr = [1,2,[3,4]];
           arr.reduce((acc,value)=> acc.concat(value),[]);
           
           //或使用...
           var flatSingle = arr => [].concat(...arr);
       ```

       ```
           // 无线反嵌套
           var arr = [1,2,[3,4,[5,6]]];
           function flatDeep(arr){
               return arr.reduce((acc,value)=> Array.isArray(value)?acc. concat(flatDeep(value)):acc. concat(value)
               ,[])
           }
           flatDeep(arr);//返回新数组 [1,2,3,4,5,6]
       ```

用于迭代的数组
3.1 sort (改变原数组)

 功能：对数组元素进行排序，默认按升序排序，即小的在前，大的在后。返回排序后的数组
 语法：array.sort([compareFunction])
 参数含义：
     compareFunction 若无此函数，默认每项调用toString()转为字符串再根据各字符的unicode进行排序。
     如有 此函数有两个参数
     firstEl 第一个用于比较的元素
     secondEl 第二个用户比较的元素
     如果compareFunction(firstEl,secondEl)小于0，那么firstEl排在secondEl之前
     如果compareFunction(firstEl,secondEl)等于0，那么位置不变
     如果compareFunction(firstEl,secondEl)大于0，那么firstEl排在secondEL之后 
  例子：
       ```
           function compareFunction(a,b){
               return a - b;
           }
           var arr = [2,3,1,8,5,4];
           arr.sort(compareFunction)
           console.log(arr);// 按升序排列 [1,2,3,4,5,8]
           
           //也可以按照对象中某一个属性排序
           function compare(a,b){
               return a.age - b.age;
           }
           var list = [
               {"name":"cherry","age":18},
               {"name":"meimei","age":16},
               {"name":"apple","age":20},
           ];
           list.sort(compare);
           console.log(list);
           //[{"name":"meimei","age":16},{"name":"cherry","age":18},{"name":"apple","age":20}
       ```

3.2 reverse (改变原数组)

功能：将数组中元素的位置颠倒，并返回该数组
语法：array.reverse()
例子：
     ```
         var arr = [1,2,3,4,5];
         arr.reverse(); //  [5,4,3,2,1]
     ```

3.3 forEach (不一定)

功能：为数组每个元素执行函数
语法：array.forEach(callback[,thisArg])
参数解释：
    callback 数组中每个元素执行的函数，接受三个参数
        currentValue 数组中遍历的当前元素
        index 数组中遍历的当前元素的下标
        array 当前数组
    thisArg 执行回调是用作this的值(可选)
描述：forEach本身是不会改变数组的，但如果回调函数中改变原数组就会改变   
例子：
     ```
        var arr = [1,2,3,4,5];
        arr.forEach(function(currentValue,index){
            arr[index] = currentValue + 10;
        });
        console.log(arr);//[11,12,13,14,15]
     ```

3.4 map (不改变)

功能：对数组中每个元素执行回调函数，返回新数组
语法：array.map(callback(currentValue[,index[,array]])[,thisArg])
参数解释：
    callback 每一项都会调用的函数，有三个参数
        currentValue 数组遍历的当前元素
        index 数组遍历的当前元素的下标
        array 当前遍历的数组
    thisArg 回调函数使用的this对象
描述：该函数返回的是由每一项元素调用函数的返回值得结果
例子：
    ```
       // 例子1 平方根
       var arr = [1,4,9];
       var roots = arr.map(function(currentValue){
           return Math.sqrt(currentValue);
       }) // arr的值为 [1,4,9] roots的值为[1,2,3]
       // 例子2  string如何使用map
       var map = Array.prototype.map
       var charCodeList = map.call("hello cherry",function(x){
           return x.charCodeAt(0);
       })
       //charCodeList的值[99, 104, 101, 114, 114, 121]
   ```

3.5 filter (不改变)

功能：过滤。返回包含所有满足函数的元素的数组。不改变原数组
语法：array.filter(callback(currentValue[,index[,array]])[,thisArg])
参数解释：
     callback 自定义每个元素要执行的函数，有三个参数
         currentValue 当前遍历的元素
         index 当前遍历的元素的下标
         array 当前数组
     thisArg
         用于函数中的this对象
例子：
   ```
     var name = ["cherry", "qq", "qian", "apple"];
     var filterItems = (query) => {
             return name.filter((el)=>
                 el.toLowerCase().indexOf(query.toLowerCase()) > -1
         }
   ```
   

3.6 fill(改变原数组)

    功能：用一个固定值填充一个数组中从起始索引到终止索引的全部元素。不包括终止索引。
    语法：array.fill(value[,start[,end]])
    参数解释：
         value 要填充的值
         start 开始填充的索引值 默认值为0
         end 终止填充的索引值 默认值为this.length
    例子：
       ```
         var arr = [1,2,3,4];
         arr.fill(0,2,4); //arr的值为 [1,2,0,0]
       ```

3.7 reduce(不改变原数组)

   功能：对每个数组项执行callback函数，每次函数执行有一个结果，最后返回迭代的最终结果
   语法：array.reduce(callback(accumulator, currentValue[,index[,arr]])[,initValue])
   参数解释：
       callback 每个元素要执行的函数，有四个参数
           accumulator 累计值，上一个元素调用函返回的累计值
           currentValue 当前遍历的元素
           index 当前遍历的元素的下标
           arr 当前的数组
       initValue 给accumulator的初始值，如果未提供accumulate默认为数组的第一个值
   描述：如果一个数组有4个值。
        无initValue时函数会调用三次，有initValue时函数调用4次
   例子：
       ```
          var arr = [1,2,3,4];
          var total = arr.reduce((accumulator,currentValue) => {
              return accumulator + currentValue
          })
          //total的值为 1+2+3+4 = 10
       ```

3.8 reduceRight(不改变原数组)

   功能：对每个数组项执行callback函数，每次函数执行有一个结果，最后返回迭代的最终结果(从右到左)
   语法：array.reduceRight(callback(currentValue[,index[,array]])[,initValue])
   参数解释：
        callback 每个元素要执行的函数 有四个参数
            previousValue 上次调用的返回值
            currentValue 当前遍历的元素
            index 当前遍历的元素的下标
            array 当前遍历的数组
        initValue  若有：则是给 previousValue的初始值，
                   若无 previousValue的初始值就是数组的最后一个元素
   例子：
       ```
           var arr = [[1,2],[3,4],[5,6]];
           var newArr = arr.reduceRight(function(result,current,index){
               return result.concat(current);
           });
           //newArr的值 [5, 6, 3, 4, 1, 2] arr的值不变
       ```      

3.9 some(不改变原数组)

   功能：检测数组中至少有一个元素满足该函数则返回 true，否则返回false
   语法：array.some(callback(currentValue[,index[,array]])[,thisArg])
   参数解释：
        callback 用来检测数组的回调函数 接受三个参数
            currentValue 当前遍历到的元素
            index 当前遍历的元素的下标  
            array 当前遍历的数组    
        thisArg  在回调函数中this的值
   例子：
       ```
           var arr = [1,2,3,4,5];
           var result = arr.some(function(currentValue){
               return currentValue%2;
           });//result 为 true
       ```

3.10 every(不改变原数组)

   功能：检测数组中是否每个元素都满足函数条件，都满足返回true，否则返回false
   语法：array.every(callback(currentValue[,index[,array]])[,thisArg])
   参数解释：同上
   例子：
       ```
           var arr = [1,2,3,4,5];
           var result = arr.every(function(currentValue){
               return currentValue < 10;
           });
           // result 为 true
       ```

3.11 keys(不改变原数组)

   功能：返回一个新的数组迭代器，包含每个元素的索引
   语法：array.keys()
   例子：
       ```
           var arr = ["cherry","qq","zhang"];
           var iterator = arr.keys();
           for(let key of iterator){
               console.log(key);//打印出 0 1 2
           }
       ```

3.12 values(不改变原数组)

   功能：返回一个新的数组迭代器，包含每个元素的值
   语法：array.values()
   例子：
       ```
           var arr = ["cherry","qq","zhang"];
           var iterator = arr.values();
           for(let value of iterator){
               console.log(value);//打印出 cherry qq zhang
           }
       ```

3.13 flatMap(不改变原数组)

   功能：每个元素调用数组，然后将结果压缩成一个新数组。与map和flat(1)几乎相同。但是效率高一些
   语法：array.flatMap(callback(currentValue[,index[,array]])[,thisArg])
   参数解释：与3.10一样
   例子：
       ```
           var arr1 = [1,2,3,4];
           arr1.map(item=>[item * 2]);//返回新数组 [[2],[4],[6],[8]]
           arr1.flatMap(item=>[item * 2]);//返回新数组 [2,4,6,8]
           arr1.flatMap(item=>[[item * 2]]);//返回新数组 [[2],[4],[6],[8]] 只会将新数组解开一层
           var arr = ["hello","","world"];
           arr.map(item=>item.split(""));
           //返回新数组[["h","e","l","l","o"],[""],["w","o","r","l","d"]]
           
           arr.flatMap(item=>item.split(""));
           //["h","e","l","l","o","","w","o","r","l","d"]
       ```

   等价操作：
   
       ```
           // 与上面的第一个使用flatMap的例子等价
           var arr1 = [1,2,3,4];
           arr1.reduce((acc,current)=> acc.concat([current * 2 ]),[]);
           // 返回结果 [2,4,6,8]   
       ```

其他
4.1 isArray

  功能：用于检测一个参数是否为数组
  语法：Array.isArray(args)
  例子：

       ```
           Array.isArray([1,2,3,4]);//true
           Array.isArray(Array.prototype);//true 其实Array.prototype也是一个数组
           Array.isArray({});//flase
       ```

4.2 from

  功能：从一个**类似数组或可迭代对象**中创建一个新的，浅拷贝的数组实例。返回数组。
  语法：Array.from(arrayLike[,mapFn[,thisArg]])
  参数解释：
      arrayLike 类数组，可迭代的对象
      mapFn 数组中每个元素都会执行的函数
      thisArg 函数中的this对象
  描述：如果说有mapFn的情况下，其实就相当于Array.from(args).map(callback[,thisArg])
  例子：
       ```
           Array.from("foo");//["f","o","o"];//会把字符串变成数组
           Array.from(["foo",window]);//["foo",window]
           Array.from(new Map([[1,2],[3,4]]));//[[1,2],[3,4]]
           var obj = {"name":"cherry","sex":"女"};
           Array.from(obj);//[] 并不是可迭代的类数组，所以返回[]
           Array.from(false);//[]
           Array.from(true);//[]
       ```