JS數組方法

作爲前端最常使用的就是JS了，JS中有很多種對數組的處理方法，我做個小結以免今後遺忘或者搞混淆

 

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

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類型的值。每一項都會遍歷。

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這個方法的強大之處

//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）。同樣不會對原數組改變

  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分不清楚，其實它們有個最大的不同點就是，這個方法是改變原數組的，不會重新開闢一個空間去改變數組長度。

     參數 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 : 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

      arr.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 返回索引

轉載至https://www.cnblogs.com/xiao-yaolx/p/12107868.html