JavaScript 数组方法全解析：几十种方法详解一网打尽！！！

一、数组方法概览

JavaScript 数组提供了丰富的方法，用于操作和处理数组。这些方法可以分为两类：

• 不返回新数组：直接修改原数组。
• 返回新数组：不修改原数组，返回一个新数组。

二、不返回新数组的方法

2.1 push()

向数组末尾添加一个或多个元素，并返回新长度。

let arr = [1, 2, 3];
arr.push(4, 5); // arr 现在是 [1, 2, 3, 4, 5]

2.2 pop()

移除数组末尾的元素，并返回被移除的元素。

let arr = [1, 2, 3];
let lastElement = arr.pop(); // lastElement 是 3，arr 现在是 [1, 2]

2.3 shift()

移除数组开头的元素，并返回被移除的元素。

let arr = [1, 2, 3];
let firstElement = arr.shift(); // firstElement 是 1，arr 现在是 [2, 3]

2.4 unshift()

向数组开头添加一个或多个元素，并返回新长度。

let arr = [1, 2, 3];
arr.unshift(0, -1); // arr 现在是 [-1, 0, 1, 2, 3]

2.5 splice()

从数组中添加或删除元素。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b'); // arr 现在是 [1, 2, 'a', 'b', 4, 5]

2.6 reverse()

反转数组中的元素顺序。

let arr = [1, 2, 3];
arr.reverse(); // arr 现在是 [3, 2, 1]

2.7 sort()

对数组元素进行排序。

let arr = [3, 1, 2];
arr.sort(); // arr 现在是 [1, 2, 3]

2.8 fill()

用一个固定值填充数组的从起始索引到终止索引内的元素。

let arr = [1, 2, 3];
arr.fill(0, 1, 2); // arr 现在是 [1, 0, 0]

2.9 findLast()

从后向前查找第一个满足条件的元素。

const arr = [1, 2, 3, 4, 4];
const lastFour = arr.findLast(num => num === 4); // 4

2.10 findLastIndex()

从后向前查找第一个满足条件的元素的索引。

const arr = [1, 2, 3, 4, 4];
const lastFourIndex = arr.findLastIndex(num => num === 4); // 4

2.11 at()

返回指定位置的元素，支持负索引。

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

2.12 indexOf()

返回第一个满足条件的元素的索引。

const arr = [1, 2, 3, 4];
const index = arr.indexOf(3); // 2

2.13 lastIndexOf()

返回最后一个满足条件的元素的索引。

const arr = [1, 2, 3, 4, 3];
const lastIndex = arr.lastIndexOf(3); // 4

三、返回新数组的方法

3.1 slice()

返回数组的一个浅拷贝片段。

let arr = [1, 2, 3];
let newArr = arr.slice(1, 3); // newArr 是 [2, 3]，arr 保持不变

3.2 concat()

合并两个或多个数组，返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // newArr 是 [1, 2, 3, 4]，arr1 和 arr2 保持不变

3.3 map()

创建一个新数组，其元素是调用一次提供的函数后的返回值。

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2); // newArr 是 [2, 4, 6]，arr 保持不变

3.4 filter()

创建一个新数组，包含通过测试的所有元素。

let arr = [1, 2, 3, 4];
let newArr = arr.filter(x => x % 2 === 0); // newArr 是 [2, 4]，arr 保持不变

3.5 reduce()

对数组中的元素执行一个由左到右的归并操作。

let arr = [1, 2, 3];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // sum 是 6，arr 保持不变

3.6 reduceRight()

与 reduce() 类似，但归并操作是从右到左。

let arr = [1, 2, 3];
let sum = arr.reduceRight((acc, curr) => acc + curr, 0); // sum 是 6，arr 保持不变

3.7 every()

测试数组中的所有元素是否都通过了提供的函数测试。

let arr = [1, 2, 3];
let result = arr.every(x => x < 4); // result 是 true，arr 保持不变

3.8 some()

测试数组中的元素是否至少有一个通过了提供的函数测试。

let arr = [1, 2, 3];
let result = arr.some(x => x > 2); // result 是 true，arr 保持不变

3.9 find()

返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

let arr = [1, 2, 3];
let result = arr.find(x => x > 1); // result 是 2，arr 保持不变

3.10 findIndex()

返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。

let arr = [1, 2, 3];
let index = arr.findIndex(x => x > 1); // index 是 1，arr 保持不变

3.11 entries()

返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。

let arr = [1, 2, 3];
let entries = arr.entries();
console.log(entries.next().value); // 输出：[0, 1]，arr 保持不变

3.12 keys()

返回一个新的数组迭代器对象，该对象包含数组中每个索引的键。

let arr = [1, 2, 3];
let keys = arr.keys();
console.log(keys.next().value); // 输出：0，arr 保持不变

3.13 values()

返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。

let arr = [1, 2, 3];
let values = arr.values();
console.log(values.next().value); // 输出：1，arr 保持不变

3.14 flat()

将数组扁平化，返回一个新数组。

let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2); // newArr 是 [1, 2, 3, 4]，arr 保持不变

3.15 flatMap()

先对数组中的每个元素调用提供的函数，然后将结果扁平化。

let arr = [1, 2, 3];
let newArr = arr.flatMap(x => [x, x * 2]); // newArr 是 [1, 2, 2, 4, 3, 6]，arr 保持不变

3.16 copyWithin()

将数组的一部分复制到同一数组的不同位置，返回原数组。

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // arr 现在是 [4, 5, 3, 4, 5]

3.17 includes()

判断数组是否包含某个值，返回布尔值。

let arr = [1, 2, 3];
let result = arr.includes(2); // result 是 true，arr 保持不变

3.18 join()

将数组的所有元素连接成一个字符串。

let arr = [1, 2, 3];
let str = arr.join('-'); // str 是 '1-2-3'，arr 保持不变

3.19 toString()

将数组转换为字符串。

let arr = [1, 2, 3];
let str = arr.toString(); // str 是 '1,2,3'，arr 保持不变

3.20 toLocaleString()

将数组转换为本地化字符串。

let arr = [1, 2, 3];
let str = arr.toLocaleString(); // str 是 '1,2,3'，arr 保持不变

3.21 toSorted()

返回一个新数组，原数组排序。

const arr = [3, 1, 2];
const sortedArr = arr.toSorted(); // [1, 2, 3]

3.22 toReversed()

返回一个新数组，原数组反转。

const arr = [1, 2, 3];
const reversedArr = arr.toReversed(); // [3, 2, 1]

3.23 toSpliced()

返回一个新数组，原数组元素被替换。

const arr = [1, 2, 3];
const splicedArr = arr.toSpliced(1, 1, 'a'); // [1, 'a', 3]

3.24 with()

返回一个新数组，指定位置的元素被替换。

const arr = [1, 2, 3];
const newArr = arr.with(1, 'a'); // [1, 'a', 3]

四、数组属性

4.1 constructor

返回创建数组的构造函数。

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

4.2 length

返回数组的长度。

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

五、总结

JavaScript 数组提供了丰富的方法，用于操作和处理数组。ES6+ 为 JavaScript 数组引入了多种新方法和属性，增强了数组的处理能力。toSorted()、toReversed()、toSpliced() 和 with() 等方法提供了非破坏性的数组操作，而 at()、findLast() 和 findLastIndex() 等方法进一步扩展了数组的查找功能。constructor 和 length 等属性则提供了数组的基本信息。这些特性让数组操作更加灵活、高效，是现代 JavaScript 开发中不可或缺的部分。公众号（鱼樱AI实验室）