JS中数组常用方法总结

最近整理了一些数组常用的方法，我把它们分为了十种类型，如下所示：

目录

1.类型一（增删数组元素）：

2.类型二（数组翻转、排序）：

3.类型三（数组索引）：

4.类型四（数组转换字符串）：

5.类型五（数组截取、删除）：

6.类型六（遍历、筛选、修改数组）：

7.类型七（求累计值（计时器））：

8.类型八（查找、检测数组）：

9.类型九（合并数组）：

10.类型十（伪数组转换真数组）：

​编辑总结

---

1.类型一（增删数组元素）：

（1）push()方法

push()方法用于在数组末尾添加一个或者多个元素，返回值为新生成数组的长度。

const arr = [1, 2, 3]
    arr.push(3)
    console.log(arr); //[1, 2, 3, 3]
    console.log(arr.push()); //4

（2）pop()方法

push()方法用于删除数组最后一个元素，返回值为删除的那个元素。

const arr = [1, 2, 3]
    arr.pop()
    console.log(arr); //[1, 2]

（3）unshift()方法

向数组的开头添加一个或多个元素，返回值为新生成数组的长度。

const arr = [1, 2, 3]
    arr.unshift(0)
    console.log(arr); //[0, 1, 2, 3]
    console.log(arr.unshift()); // 4

（4）shift()方法

删除数组的第一个元素，返回值为删除的那个元素。

const arr = [1, 2, 3]
    arr.shift()
    console.log(arr); //[2, 3]

2.类型二（数组翻转、排序）：

（1）reverse()翻转数组，返回新的数组。

 const arr = [1, 2, 3]
    arr1 = arr.reverse()
    console.log(arr1); // [3, 2, 1]

 （2）sort()数组排序，可达到冒泡排序的效果，返回值为一个新的数组。

const arr = [3, 1, 2]
    const arr1 = arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr1); //[1, 2, 3]

3.类型三（数组索引）：

（1）indexOf()方法用于查找数组中给定元素的第一个索引，如果存在即返回该元素的索引号，否则返回-1。

 const arr = ['red', 'green', 'blue']
    console.log(arr.indexOf('green')); // 1

 （2）lastIndexOf()方法用于查找数组中给定元素的最后一个索引，如果存在即返回该元素的索引号，否则返回-1。

const arr = ['red', 'green', 'blue']
    console.log(arr.lastIndexOf('red')); // 0

（3）findIndex()用于判断一个数组中是否存在某个元素符合条件，符合则返回数组中的该元素的索引，不符合则返回-1。

 const arr = [1, 2, 3]
    const s = arr.findIndex(function (i) {
      return i == 3
    })
    console.log(s); // 2

4.类型四（数组转换字符串）：

（1）toString()方法用于把数组转换成字符串，逗号分割每一项，返回值为一个字符串。

const arr = [1, 2, 3]
    console.log(arr.toString()); // 1,2,3

 （2）join(‘分隔符’)用于把数组的所有元素转换为一个字符串，join方法如果不传入参数，则默认按照‘，’拼接元素，返回值为一个字符串。

const arr = [1, 2, 3]
    console.log(arr.join('-')); // 1-2-3

5.类型五（数组截取、删除）：

（1）slice()方法用于数组截取，括号里的参数为开始截取位置的索引和截取结束位置的索引，返回被截取项目的新数组。

 const arr = [1, 2, 3, 4]
    console.log(arr.slice(1, 3)); // [2, 3]

 （2）splice()方法用于删除数组中的元素，返回被删项目的新数组。

const arr = [1, 2, 3, 4]
    arr1 = arr.splice(0, 2)
    console.log(arr1); // [1, 2]
    console.log(arr); // [3, 4]

6.类型六（遍历、筛选、修改数组）：

（1）forEach()方法用于遍历数组，forEach()方法无返回值，并且不会修改原数组，相当于for循环。

 

（2）filter()方法用于筛选数组。filter()筛选数组方法有返回值，返回一个新数组，包含所有符合条件的元素，如果没有符合条件的，返回空数组，因为返回新数组，所以不会影响原数组。

// 被遍历数组.filter(function(当前数组元素，当前数组元素索引（可省略）) {return 筛选条件})
    const arr = [1, 2, 3, 4, 5]
    arr1 = arr.filter(item => item >= 2)
    console.log(arr1); //[2, 3, 4, 5]

 （3）map()映射数组方法有返回值，把原数组的每一个元素修改后映射成一个新数组，并返回。有返回值，回调函数需要return一个修改之后的元素。

// 被遍历数组.filter(function(当前数组元素，当前数组元素索引（可省略）) {return 处理内容（例：item+10）})
    const arr = [1, 2, 3, 4, 5]
    arr1 = arr.map(item => item * 10)
    console.log(arr1); // [10, 20, 30, 40, 50]

7.类型七（求累计值（计时器））：

（1）reduce()方法返回函数累计处理的结果，初始值为0的话刚开始累计值也为0，不写初始值的话，最开始的累计值就为数组的第一个元素。此方法常用于求累计和，语法及案例如下所示：

 // arr.reduce(function(累计值, 当前元素){}, 起始值)
    const arr = [1, 2, 3, 4]
    const arr1 = arr.reduce((prev, item) => {
      return prev + item
    }, 0)
    console.log(arr1); //10

 8.类型八（查找、检测数组）：

 （1）find()方法用于查找元素，返回符合查找条件的第一个数组元素值，如果没有符合条件的则返回undefined。

 // arr.find(function (item) {return item === '查找条件'})
    const arr = [1, 2, 3, 4]
    const arr1 = arr.find(item => item > 3)
    console.log(arr1); // 4

（2）every()方法用于检测数组所有元素是否都符合指定条件，如果都符合返回 true ，否则返回false。

 // 数组.every(function (item) {return 指定条件(例：item >= 20)}) // true或false
    const arr = [1, 2, 3, 4]
    const arr1 = arr.every(item => item > 2)
    console.log(arr1); //false

（3）some()方法用于检测数组中的元素是否满足指定条件，只要有一个元素满足条件返回 true ，否则返回false。

// 数组.some(function (item) {return 指定条件(例：item >= 20)}) // true或false
    const arr = [1, 2, 3, 4]
    const arr1 = arr.some(item => item > 3)
    console.log(arr1); // true

9.类型九（合并数组）：

（1）concat()方法用于合并两个数组，返回生成新数组，利用展开运算符也可达到合并数组的效果。

 const arr = [1, 2, 3]
    const arr1 = [4, 5]
    console.log(arr.concat(arr1)); // [1, 2, 3, 4, 5]

 10.类型十（伪数组转换真数组）：

（1）Array.from()为静态方法，可用于把伪数组转换为真数组。

总结

这就是本次全部的总结内容了，感谢各位看官，如果觉得有帮助的话麻烦点点赞，博主以后会继续努力更新的。

各位也可关注此公众号，博主会不定期发布一些前端相关的文章、生活记录以及照片分享。