js中操作数组的方法总结

81 阅读4分钟

改变原数组的方法

  1. push(item):添加一个数据至数组的末尾,返回数组长度
const arr = [1, 2, 3, 4];
arr.push(5); //arr变为[1, 2, 3, 4, 5]
  1. pop():移除并返回数组最后一个元素
const arr = [1, 2, 3, 4];
arr.pop(); //arr变为[1, 2, 3]

注意:如果数组为空时,返回undefined 3. shift(): 移除并返回数组的第一个元素

const arr = [1, 2, 3, 4];
arr.shift(); //arr变为[2, 3, 4]

注意:如果数组为空时,返回undefined 4. unshift(item):将参数添加到数组的头部,并返回长度

const arr = [1, 2, 3, 4];
arr.unshift(5); //arr变为[5, 1, 2, 3, 4]
  1. sort():按升序排列数组项
const arr = [1, 22, 2, 11, 21];
arr.sort(); //arr变为[1, 11, 2, 21, 22]

注意:sort()默认情况下按照字符编码的顺序进行排序。11在2的前面是因为1的字符编码在2的前面。一般在使用的过程中,需要传入一个callback来自定义排序规则。举个例子

const arr = [1, 22, 2, 11, 21];
arr.sort((a, b) => a - b); //arr变为[1, 2, 11, 21, 22]
  1. reverse():反转原来数组的顺序
const arr = [1, 2, 3, 4];
arr.reverse(); //arr变为[4, 3, 2, 1]
  1. splice(start, deleteCount, item1, item2...): 通过删除或替换现有元素或者原地添加新的元素来修改数组,返回被删除的元素组成的数组。

参数说明:

  • start:下标从哪里开始
  • deleteCount:删除几个元素
  • item1, item2..., 从下标start添加到原数组中
const arr = [1, 2, 3, 4];
arr.splice(1, 0, 5);; //arr变为[1, 5, 2, 3, 4]
  1. fill(val, start, end):用一个固定值val填充start-end下标的元素
const arr = [1, 2, 3, 4, 5, 6];
arr.fill(0, 2, 4); //arr变为[ 1, 2, 0, 0, 5, 6 ]

不改变原数组,返回新数组的方法

  1. concat():用于合并多个数组,返回新数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const arr4 = arr1.concat(arr2, arr3) //[1, 2, 3, 4, 5, 6]
  1. filter(callback):返回符合callback条件的新数组
const arr = [1, 2, 3, 4, 5, 6];
const brr = arr.filter((item) => item > 2);
console.log(brr); //[ 3, 4, 5, 6 ]
  1. flat():将所有子数组元素拼接到新的数组中
const arr = [0, 1, 2, [3, 4]];
console.log(arr.flat()); //[ 0, 1, 2, 3, 4 ]
  1. map(callback):将数组中所有元素执行一次callback,结果存储在一个新的数组中
const arr = [1, 2];
const brr = arr.map((item) => item * item);
console.log(brr); //[ 1, 4]
  1. slice(start, end):返回截取从start到end的数组
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(0, 3)); //[ 1, 2, 3]

不改变原数组,返回值的方法

返回String类型

  1. join(val):将数组的元素组成一个字符串,将参数val分隔符进行分隔,默认以逗号分隔
const arr = [1, 2, 3];
console.log(arr.join('-')); //1-2-3
  1. toString()方法返回一个字符串,表示指定的数组及其元素
const arr = [1, 2, 3];
console.log(arr.toString()); //1,2,3

返回索引下标

  1. findIndex():返回数组中满足提供的测试函数的第一个元素的索引,没有找到对应元素则返回 -1。
const arr = [1, 2, 3];
console.log(arr.find(item => findIndex > 1)); //1
  1. findLastIndex():返回数组中满足提供的测试函数的最后一个元素的索引,没有找到对应元素则返回 -1。
const arr = [1, 2, 3];
console.log(arr.find(item => findIndex > 2)); //1
  1. indexOf():返回在数组中可以找到给定元素的第一个索引,不存在返回-1
const arr = [1, 2, 3, 2, 2];
console.log(arr.indexOf(2)); //1
  1. lastIndexOf():返回在数组中可以找到给定元素的最后一个索引,不存在返回-1
const arr = [1, 2, 3, 2, 2];
console.log(arr.indexOf(2)); //4

返回元素

  1. at(index):返回该索引index对应的元素,index可以为负数,从数组中的最后一个元素开始倒数。
const arr = [1, 2, 3];
console.log(arr.at(-2)); //2
  1. find(callback):返回数组中满足callback的第一个元素的值,都不满足返回undefined
const arr = [1, 2, 3];
console.log(arr.find(item => item > 1)); //2
  1. findLast(callback):返回数组中满足callback的最后一个元素的值,都不满足返回undefined
const arr = [1, 2, 3];
console.log(arr.findLast(item => item > 1)); //3

返回Boolean类型

  1. every(callback):测试一个数组内的所有元素是否都能通过callback的测试
const arr = [1, 2, 3];
console.log(arr.every(item => item > 0)); //true
  1. includes():判断一个数组是否包含一个指定的值
const arr = [1, 2, 3];
console.log(arr.includes(2)); //true
  1. some(callback):测试数组中是不是至少有 1 个元素通过了被提供的函数callback
const arr = [1, 2, 3];
console.log(arr.some(item => item > 2)); //true