摘要：從學習來，一直覺得數組方法真是多，總是疑惑哪個會更好。索性將全部關于數組相關的方法整理出來。整理之前以為就是簡單的匯總，然而慢慢整理的過程發現很多新奇的數組以及膩害的用法。這些數組方法看起來簡單，實際用處確是很大。

從學習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);//[]
       ```