js数组方法总结（包含ES6）

日常使用中，请求回的数据大都是数组格式，需要进行处理，使用数组方法，主要的数组方法有以下几种：

案例演示的初始数组：

 var arr = [1,2,3,4]

1、前增:unshift('新增元素') 在数组开头添加一个元素，返回值为新数组的长度

 arr.unshift(5)
 console.log(arr)

2、后增：push('新增元素')在数组最后添加一个元素，返回新数组长度

  arr.push('后增')
    console.log(arr)

3、前删：shift()删除数组中的首个元素，返回被删除的元素

 var x = arr.shift()
    console.log(arr)
    console.log('删除：' + x)

4、后删：pop()删除数组的末尾元素，返回被删除的元素

   arr.pop()
    console.log(arr)
    console.log('删除：'+ arr.pop())

5、合并数组：concat()方法通过合并（连接）现有数组来创建一个新数组,不改变现有数组返回一个新数组

 var arr = [1, 2, 3, 4]
    var arr2 = ['一', '二', '三']
    console.log(arr.concat(arr2))

6、join()将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。原数组不变

 var arr = [1, 2, 3, 4]
    console.log(arr.join('/'))

7、reverse()，将数组倒序。原数组改变。

  var arr = [1, 2, 3, 4]
    var arr2 = arr.reverse()
    console.log('原数组' + arr)
    console.log('倒序' + arr2)

8、截取slice('参数1’，'参数2'),接收两个参数为数组的索引，第一个参数表示开始的位置，第二个参数表示结束的位置。截取出的数组包含参数1指向的元素，不包含结束位置。若不指定第二个参数则截取起始位置到末尾所有元素，参数可以为负数，为负数时从末尾向首位截取。返回一个新的数组，不改变原数组

  var arr = [1, 2, 3, 4]
    var arr2 = arr.slice(1)//从下标为1的元素截取至末尾元素
    var arr3 = arr.slice(0,2)//从下标为0的元素开始截取到下标为3的元素（不包含下标为3）
    var arr4 = arr.slice(-2)//从右向左截取
    console.log('原数组' + arr)
    console.log('一个参数' + arr2)
    console.log('二个参数' + arr3)
    console.log('参数为负数' + arr4)

9、forEch((参数1，参数2)=>{ })遍历数组，遍历数组的每一项。参数为一个回调函数

 var arr = [1, 2, 3, 4]
    var arr2 = []
    var arr3 = []
    arr.forEach((item, index) => {
        arr2.push(item)//回调参数一为数组的每一项元素
        arr3.push(index)//参数二为索引值
    })
    console.log(arr2)
    console.log(arr3)

10、map(()=>{})遍历数组

map方法用于对数组中的每个元素执行一个提供的函数，并返回一个新的数组，新数组的元素是回调函数的返回值。
map会遍历数组的每个元素，并将每个元素传递给回调函数进行处理，并将回调函数的返回值作为新数组的元素。
回调函数接受三个参数：当前遍历的元素、当前遍历的索引和原始数组本身。
map方法不会修改原始数组，而是返回一个新的数组，该数组包含了回调函数的返回值

const array = [1, 2, 3];
const newArray = array.map((element, index, array) => {
  return element * 2;
});
console.log(newArray); // 输出 [2, 4, 6]

11、filter(()=>{})，过滤数组中，符合条件的元素并返回一个新的数组。

12、every(function)，对数组中的每一项进行判断，若都符合则返回true，否则返回false。

13、some(function)，对数组中的每一项进行判断，若都不符合则返回false，否则返回true。

14、indexOf()检测当前值在数组中第一次出现的位置索引参数：array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置。返回值：第一次查到的索引，未找到返回-1。不改变原数组

15，includes()判断一个数组是否包含一个指定的值，参数：指定的内容返回值：布尔值是否改变原数组：不改变。

ES6部分方法

1、find(function)方法，用于找出第一个符合条件的数组成员。返回值：符合条件的数组元素，如果没有符合条件的成员，则返回undefined。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

2、findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

3、flat()扁平化数组，可以扁平化数组，接受一个整数参数，指定要拉平几层

[1, 2, [3, [4, 5]]].flat()//默认拉平一层
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)//拉平2层嵌套
// [1, 2, 3, 4, 5]

以上为个人总结归纳基础常用之方法，错误之处请大家批评指正，整理不易，内容满意麻烦点个赞！

js数组方法总结（包含ES6）

猜你喜欢