JavaScript 常用数组方法总结

判断数组中是否存在某个元素

includes()

判断一个数组是否包含一个指定的值。 如果是返回 true，否则false

const arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出: true

some()

检测数组元素中是否含有指定条件的元素。

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

const arr = [1, 2, 3];
console.log(arr.some((element) => element > 2)) // 输出: true
// 数组里面是对象
const arr = [
  {
    age: 10,
  },
  {
    age: 20,
  },
]
console.log(arr.some(element => element.age > 10)) // 输出: true

查找数组中满足条件的元素

filter()

创建一个新数组，返回符合条件的元素。如果没有符合条件的元素则返回空数组。

const arr = [1, 2, 3, 4];
const newArr = arr.filter((element) => element > 2);
// 数组里面是对象
const arr = [
  {
    age: 10,
  },
  {
    age: 20,
  },
]
console.log(arr.filter(element => element.age > 10)) // 输出: [{ age: 20}]

find()

返回数组中满足条件的第一个元素的值。否则返回 undefined

const arr = [1, 2, 3];
console.log(arr.find((element) => element > 1)); // 输出: 2
// 数组里面是对象
const arr = [
  {
    age: 10,
  },
  {
    age: 20,
  },
    {
    age: 30,
  }
]
console.log(arr.find(element => element.age > 10)) // 输出: { age: 20}

every()

检测数组中所有元素是否都符合指定条件

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

const arr = [1, 2, 3];
console.log(arr.every((element) => element > 2)); // 输出: false  因为其中有一个不符合条件

查找元素的索引

indexOf()

查找元素首次出现的索引，若未找到则返回 -1

const arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 输出: 1

findIndex()

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

const arr = [1, 2, 3];
console.log(arr.findIndex((element) => element > 1)); // 输出: 1

数组的添加和删除

push()

在数组末尾添加一个或多个元素，返回新的数组长度
pop()

移除并返回数组的最后一个元素
unshift()

在数组开头添加一个或多个元素，返回新的数组长度
shift()

移除并返回数组的第一个元素
slice()

选取数组的一部分，并返回一个新数组。

• 包含从 start 到 end （不包括该元素）的元素
• 此方法属于浅拷贝
• 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 3);
console.log(newArr); // 输出: [2, 3]

数组万能方法 删除 替换 添加

splice()

可以删除、替换或添加元素到数组的指定位置

• splice第一个参数规定从何处添加/删除元素。当前添加的时候，是从当前索引的前面开始。
• splice第二个参数规定应该删除多少元素。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
• splice第三个参数规定要添加到数组的新元素

// 删除  会改变原数组
const fruits = ['apple', 'banana', 'cherry', 'date'];
const removed = fruits.splice(1, 2);
console.log(fruits); // 输出: ['apple', 'date']
console.log(removed); // 输出: ['banana', 'cherry']
// 添加 会改变原数组
const numbers = [1, 2, 3, 4]; 
numbers.splice(2, 0, 5, 6); 
console.log(numbers); // 输出: [1, 2, 5, 6, 3, 4]
// 替换
const colors = ['red', 'green', 'blue'];
const replaced = colors.splice(1, 1, 'yellow');
console.log(colors); // 输出: ['red', 'yellow', 'blue']
console.log(replaced); // 输出: ['green']

数组排序

sort()

对数组的元素进行排序，并返回数组

const arr = [3, 1, 2];
arr.sort((a, b) => a - b);
console.log(arr); // 输出: [1, 2, 3]

reverse()

反转数组中元素的顺序

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

数组转化和拼接

concat()

用于合并两个或多个数组，此方法不会更改现有数组，而是返回一个新数组

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
console.log(newArr); // 输出: [1, 2, 3, 4]

join()

将数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

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

数组遍历

forEach()

对数组的每个元素执行一次提供的函数

• 没有返回值，本质上等同于 for 循环。所以不能赋值使用。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (number) {
    console.log(number);
});

map()

创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
reduce()

对数组中的每个元素执行一个由您提供的 reducer 函数 (升序执行)，将其结果汇总为单个返回值
flat()

创建一个新数组，所有子数组元素递归地连接到该数组中，直到达到指定的深度

const arr = [1, [2, [3]]];
const newArr = arr.flat(2);
console.log(newArr); // 输出: [1, 2, 3]

flatMap()

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组

const arr = [1, 2, 3];
const newArr = arr.flatMap((element) => [element * 2]);
console.log(newArr); // 输出: [2, 4, 6]