这么多数组方法，你掌握了么？-优快云博客

今天总结一下常用的JS数组方法，以免搞忘了或者记混了，大家觉得还有哪些数组方法在项目里用的特别多我没提到的可以补充。。

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. 方法测试数组中是不是至少有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 ：

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);

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：没有参数，负责删除数组的最后一个元素,改变原数组

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: 删除数组的第一个元素改变原数组

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);

fill : 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

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

先总结这些，后续会补充，还会总结一些对象常用的方法，只有不断总结，才能让自己对这些方法不陌生，才能在项目中能有多种解决方法，选择一种最优解。

原创作者: szk123456 转载于: https://blog.51cto.com/szk123456/11408714