這麼多數組方法，你掌握了麼？

時間 2019-12-28

標籤數組方法掌握简体版

原文原文鏈接

今天總結一下經常使用的JS數組方法，以避免搞忘了或者記混了，你們以爲還有哪些數組方法在項目裏用的特別多我沒提到的能夠補充。。

1.map ：遍歷數組的每一項並對其進行操做。有返回值且不改變原數組。es6

 var arr = [1, 2, 3, 4, 5, 6];
      var res = arr.map(item => {
        return item * 2;
      });
      console.log(arr); //[1, 2, 3, 4, 5, 6]
      console.log(res); //[2, 4, 6, 8, 10, 12]

2. forEach ：遍歷數組每一項並可對其操做，可是結果無用功。由於forEach沒有返回值且不改變原數組能夠針對數組的長度對你想要改變的變量進行修改。數組

  var arr1 = [3, 4, 5, 6, 7];
      var nums = 0;
      arr1.forEach(item => {
        console.log(item);
        nums++;
      });
      console.log(arr1, nums);//[3,4,5,6,7],5

3. some：方法測試數組中是否是至少有1個元素經過了被提供的函數測試。它返回的是一個Boolean類型的值。每一項都會遍歷。promise

    const result = [];
      var arr2 = [
        { name: "lx", age: 35 },
        { name: "lxx", age: 20 },
        { name: "l1x", age: 5 },
        { name: "1lx", age: 15 },
        { name: "zlx", age: 25 },
        { name: "xlx", age: 22 }
      ];
      arr2.some(item => {
        //   console.log(item.age)
        console.log(item.age % 5 == 0); // 5true  false
        if (item.age % 5 == 0) {
          result.push({ age: item.age });
        } else {
          result.push({ unage: item.age });
        }
      });
      console.log(result);

4.every ：該方法測試一個數組內的全部元素是否都能經過某個指定函數的測試。它返回一個布爾值。當有一項與條件成立時後面的項中止遍歷。一樣返回值是一個Boolean類型。異步

  var arr3 = [3, 2, 3, 4, 5, 6, 7];
      function test(item) {
        return item > 1;
      }
      console.log(arr3.every(test)); //true

5.filter: 顧名思義過濾該數組方法就是可以作到拿到你想要獲得的那條數據的一個數組注意是數組！不會改變原數組函數

  var arr4 = [
        { name: "lx", age: 28 },
        { name: "l1x", age: 5 },
        { name: "1lx", age: 15 },
        { name: "zlx", age: 25 },
        { name: "xlx", age: 22 }
      ];
      let res4 = arr4.filter(item => {
        return item.age == 25;
      });
      console.log(res4); // [{…}]0: {name: "zlx", age: 25} length: 1__proto__: Array(0)

6. concat: 合併該方法是將兩個數組或多個數組合併成一個數組不會改變原數組能夠採用擴展運算符... 結果是同樣的測試

 var arr5 = [13, 5, 6, 7];
      var arr6 = [23, 5, 6, 7];
      let res6 = arr6.concat(arr5);
      let res7 = [...arr5, ...arr6];
      //求數組並集
      res7 = [...new Set([...arr5, ...arr6])];
      console.log(res7); // [13, 5, 6, 7, 23]
      // 求數組交集
      var bs = new Set(arr5);
      var sa = new Set(arr6); //{23,5,6,7}
      let res8 = arr5.filter(item => sa.has(item));
      console.log(res8);

7. reduce: 這個方法至關強大基本上全部操做均可以實現方法對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。參數callback，

//initialValue（不傳默認取數組的第一個元素）

// reducer 函數接收4個參數:

// Accumulator (acc) (累計器)

// Current Value (cur) (當前值)

// Current Index (idx) (當前索引)

// Source Array (src) (源數組)

//簡單的例子
      var arr7 = [1, 2, 3, 4, 5];
      var ress7 = arr7.reduce((acc, cur) => {
        return acc + cur;
      }, 0);
      console.log(ress7); //15

注意：下面分場景分別介紹一下reduce這個方法的強大之處this

//reduce場景1：累加對象數組中的值
      var arr8 = [
        { name: "lx", age: 28 },
        { name: "l1x", age: 5 },
        { name: "1lx", age: 15 },
        { name: "zlx", age: 25 },
        { name: "xlx", age: 22 }
      ];
      var initValue = 0;
      const ress8 = arr8.reduce((acc, cur) => {
        return acc + cur.age;
      }, 0);
      console.log(ress8); //95

 //場景2： 將二維數組降一維
      var arr9 = [[1, 2], 4, 8, 9];
      let res9 = arr9.reduce((acc, cur) => {
        return acc.concat(cur);
      }, []);
      console.log(res9); // [1, 2, 4, 8, 9]

 //場景3： 計算數組中每一個元素出現的個數
      var arr10 = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
      let res10 = arr10.reduce((acc, cur) => {
        if (cur in acc) {
          acc[cur]++;
        } else {
          acc[cur] = 1;
        }
        return acc;
      }, {});
      console.log(res10);

      // 場景4： 按屬性對Object分類
      var people = [
        { name: "Alice", age: 21 },
        { name: "Max", age: 20 },
        { name: "Jane", age: 20 }
      ];
      var resPeople = people.reduce((acc, obj) => {
        var key = obj["age"];
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
      }, {});
      console.log(resPeople);

// 場景5：數組去重
      var arr11 = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"];
      var res11 = arr11.reduce((acc, cur) => {
        if (acc.indexOf(cur) === -1) {
          acc.push(cur);
        }
        return acc;
      }, []);
      console.log(res11);

      //場景6： 按順序執行Promise
      function peomise1(a) {
        return new Promise((resolve, reject) => {
          //當異步代碼執行成功後纔會執行resolve
          setTimeout(() => {
            resolve(a * 5);
          }, 1000);
        });
      }
      function peomise2(a) {
        return new Promise((resolve, reject) => {
          //當異步代碼執行成功後纔會執行resolve
          setTimeout(() => {
            resolve(a * 2);
          }, 2000);
        });
      }
      function peomise3(a) {
        return new Promise((resolve, reject) => {
          //當異步代碼執行成功後纔會執行resolve
          setTimeout(() => {
            resolve(a * 6);
          }, 1000);
        });
      }
      console.log(Promise.resolve(3));
 //reduce 方式 順序執行並返回一個結果
      function runPromise(arr, input) {
        return arr.reduce((acc, cur) => acc.then(cur), Promise.resolve(input));
      }
      const promiseArr = [peomise1, peomise3, peomise2];
      runPromise(promiseArr, peomise1(3)).then(console.log);

8.slice：方法返回一個新的數組對象，這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。一樣不會對原數組改變spa

  let arr12 = [24, 3, 6, 8, 7, 9];
      //省略第二個參數end  會一直拷貝到數組結尾處的元素
      let res12 = arr12.slice(3);
      console.log(res12); // [8,7,9]

9. splice(start[, deleteCount[, item1[, item2[, ...]]]]): 這個方法以前一直和slice分不清楚，其實它們有個最大的不一樣點就是，這個方法是改變原數組的，不會從新開闢一個空間去改變數組長度。code

參數 start 指定修改的開始位置（從0計數）。若是超出了數組的長度，則從數組末尾開始添加內容；若是是負值，則表示從數組末位開始的第幾位（從-1計數，這意味着-n是倒數第n個元素而且等

價於array.length-n）；若是負數的絕對值大於數組的長度，則表示開始位置爲第0位。

deleteCount 可選整數，表示要移除的數組元素的個數。對象

item1, item2, ... 可選要添加進數組的元素,從start 位置開始。若是不指定，則 splice() 將只刪除數組元素。

  let arr13 = [1, 3, 5, 7, 9, 7, 2, 6, 57, 7];
      //增  第一個參數表明位置索引
      arr13.splice(1, 0, "2"); // [1, "2", 3, 5, 7, 9, 7, 2, 6, 57, 7]
      //刪  第二個參數表示刪除元素的個數，當省略時表示從索引處到數組結尾處全刪
      arr13.splice(2); //[1,"2"]
      //改
      arr13.splice(0, 1, "哈哈");
      console.log(arr13); // ["哈哈",  "2"]

//例題熟悉一下這兩個方法： 從第 2 位開始刪除 0 個元素，插入「drum」
      var myFish = ["angel", "clown", "mandarin", "sturgeon"];
      myFish.splice(1, 0, "drum");
      console.log(myFish); //["angel", "drum", "clown", "mandarin", "sturgeon"]
      //從第 3 位開始刪除 1 個元素
      var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
      myFish.splice(3, 1);
      console.log(myFish); // ["angel", "clown", "drum", "sturgeon"]

10. pop：沒有參數，負責刪除數組的最後一個元素,改變原數組

 var arr14 = [1, 4, 5, 9];
      arr14.pop(); //[1, 4, 5]
      console.log(arr14);

11. push: 像數組末尾添加一個元素或多個元素 arr.push(element1, ..., elementN)

 var arr14 = [1, 4, 5, 9];
      arr14.push("3"); //[1, 4, 5,9,"3"]
      arr14.push("3", 2);
      console.log(arr14);

12.shift: 刪除數組的第一個元素改變原數組

   var arr15 = [1, 4, 5, 9];
      arr15.shift(); //[4, 5, 9]
      console.log(arr15);

13.unshift: 在數組首位添加一個或多個元素

  var arr16 = [6, 1, 4, 5, 9, 8];
      arr16.unshift("5", 3); //["5", 3, 6, 1, 4, 5, 9, 8]
      console.log(arr16);

14. fill : 方法用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。

a rr.fill(value[, start[, end]])

參數：value 填充數組元素的值

start 起始索引默認0

end 終止索引默認this.length

  var arr17 = [2, 3, 4];
      arr17.fill(6); //[6,6,6]
      arr17.fill("7", 0, 2); //["7", "7", 6]
      console.log(arr17);

15. flat: 你們對這個方法必定不熟悉，我在一次作項目的時候用到了它，下面看看它的做用方法很強大扁平化數組可是有兼容性的影響

     // 參數表示扁平化的層級
      var arr18 = [2, 6, 8, [9, 10, 26]];
      let res18 = arr18.flat(1); //[2, 6, 8, 9, 10, 26]
      //Infinity 能夠扁平任意深度的數組
      // let res18 = arr18.flat(Infinity)  //[2, 6, 8, 9, 10, 26]
      console.log(res18);

16.join：方法將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。

 // 不改變原數組
      var arr19 = [2, 2, 6, 3, 4, 5, 6, "y"];
      var res19 = arr19.join(","); //2,2,6,3,4,5,6,y
      var res20 = arr19.join(""); //2263456y
      console.log(res20);

17. find ：方法返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。注意是第一個

 var arr21 = [
        { name: "lz", age: 21 },
        { name: "lx", age: 21 },
        { tine: "xx", ageL: 23 }
      ];
      let res21 = arr21.find(ele => ele.age === 21)
      console.log(res21) //{name: "lz", age: 21}  返回元素
      //想要全部符合條件的  就能夠用filter方法
      let res22 = arr21.filter(ele => ele.age === 21)
      console.log(res22) //返回數組  [{…}, {…}]

18.findIndex: 方法返回數組中知足提供的測試函數的第一個元素的索引。不然返回-1。注意是第一個

  var arr23 = [
        { name: "lz", age: 21 },
        { name: "lx", age: 21 },
        { tine: "xx", ageL: 23 }
      ];
      let res23 = arr23.findIndex(ele => ele.age === 21)
      console.log(res23) //0 返回索引

19.indexOf：方法返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。

   var arr24 = [1,
        { name: "lz", age: 21 },
        { name: "lx", age: 21 },
        { tine: "xx", ageL: 23 }
      ];
      let res24 = arr24.indexOf(1)
      console.log(res24) //0 返回索引

先總結這些，後續會補充，還會總結一些對象經常使用的方法，只有不斷總結，才能讓本身對這些方法不陌生，才能在項目中能有多種解決方法，選擇一種最優解。