Array数组方法
JavaScript 数组方法详解
JavaScript 数组提供了许多内置方法，用于处理数组的各种操作，如添加、删除、查找、排序、过滤等。以下是一些常用的数组方法及其作用和示例。
1. 添加和删除元素
-
push：在数组末尾添加一个或多个元素，并返回新的长度。
let arr = [1, 2, 3]; let newLength = arr.push(4, 5); console.log(arr); // 输出: [1, 2, 3, 4, 5] console.log(newLength); // 输出: 5 -
unshift：在数组开头添加一个或多个元素，并返回新的长度。
let arr = [2, 3, 4]; let newLength = arr.unshift(1, 0); console.log(arr); // 输出: [1, 0, 2, 3, 4] console.log(newLength); // 输出: 5 -
pop：删除数组的最后一个元素，并返回该元素。
let arr = [1, 2, 3, 4]; let lastElement = arr.pop(); console.log(arr); // 输出: [1, 2, 3] console.log(lastElement); // 输出: 4 -
shift：在数组的开头删除一个元素，并返回该元素。
let arr = [1, 2, 3, 4]; let firstElement = arr.shift(); console.log(arr); // 输出: [2, 3, 4] console.log(firstElement); // 输出: 1 -
splice：在任意位置添加或删除元素，返回被删除的元素组成的数组。
let arr = [1, 2, 3, 4, 5]; let removedElements = arr.splice(2, 1, 6, 7); // 从索引 2 开始删除 1 个元素，然后插入 6 和 7 console.log(arr); // 输出: [1, 2, 6, 7, 4, 5] console.log(removedElements); // 输出: [3]
2. 查找元素
-
indexOf：返回第一个匹配元素的索引，如果没有找到则返回 -1。
let arr = [1, 2, 3, 4, 5]; let index = arr.indexOf(3); console.log(index); // 输出: 2 -
lastIndexOf：从数组末尾向前搜索，返回第一个匹配元素的索引，如果没有找到则返回 -1。
let arr = [1, 2, 3, 2, 5]; let lastIndex = arr.lastIndexOf(2); console.log(lastIndex); // 输出: 3 -
find：返回第一个满足条件的元素，否则返回
undefined。let arr = [1, 2, 3, 4, 5]; let found = arr.find(element => element > 3); console.log(found); // 输出: 4 -
findIndex：返回第一个满足条件的元素的索引，否则返回 -1。
let arr = [1, 2, 3, 4, 5]; let foundIndex = arr.findIndex(element => element > 3); console.log(foundIndex); // 输出: 3 -
findLast：从最后一个元素开始查找数组项。
let arr = [1, 2, 3, 4, 5]; let found = arr.findLast(element => element > 3); console.log(found); // 输出: 5
3. 遍历和映射
-
forEach：遍历数组，对每个元素执行一个函数，没有返回值。
let arr = [1, 2, 3, 4, 5]; arr.forEach((element, index, array) => { console.log(`Element: ${element}, Index: ${index}, Array: ${array}`); }); -
map：创建一个新数组，其结果是该函数处理原数组每个元素的结果。
let arr = [1, 2, 3, 4, 5]; let squared = arr.map(element => element * element); console.log(squared); // 输出: [1, 4, 9, 16, 25] -
filter：创建一个新数组，包含通过测试的所有元素。
let arr = [1, 2, 3, 4, 5]; let even = arr.filter(element => element % 2 === 0); console.log(even); // 输出: [2, 4] -
reduce：将数组元素迭代地减少为单个值。
let arr = [1, 2, 3, 4, 5]; let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 输出: 15 -
reduceRight：从右到左迭代地应用一个函数并合并结果。
let arr = [1, 2, 3, 4, 5]; let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 输出: 15 -
some：测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回一个布尔值。
let arr = [1, 2, 3, 4, 5]; let hasEven = arr.some(element => element % 2 === 0); console.log(hasEven); // 输出: true -
every：测试所有元素是否都通过了某个测试。它返回一个布尔值。
let arr = [2, 4, 6, 8]; let allEven = arr.every(element => element % 2 === 0); console.log(allEven); // 输出: true
4. 排序和反转
-
sort：对数组的元素进行排序。
let arr = [3, 1, 4, 1, 5, 9]; arr.sort((a, b) => a - b); console.log(arr); // 输出: [1, 1, 3, 4, 5, 9] -
reverse：颠倒数组中元素的顺序。
let arr = [1, 2, 3, 4, 5]; arr.reverse(); console.log(arr); // 输出: [5, 4, 3, 2, 1] -
toSorted：ES2023 支持
sort()的不可变版本。let arr = [3, 1, 4, 1, 5, 9]; let sorted = arr.toSorted((a, b) => a - b); console.log(sorted); // 输出: [1, 1, 3, 4, 5, 9] console.log(arr); // 输出: [3, 1, 4, 1, 5, 9] （原数组不变） -
toReversed：ES2023 支持
reverse()的不可变版本。let arr = [1, 2, 3, 4, 5]; let reversed = arr.toReversed(); console.log(reversed); // 输出: [5, 4, 3, 2, 1] console.log(arr); // 输出: [1, 2, 3, 4, 5] （原数组不变）
5. 分割和合并
-
concat：用于连接两个或多个数组并返回一个新的数组，不改变原数组。
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let combined = arr1.concat(arr2); console.log(combined); // 输出: [1, 2, 3, 4, 5, 6] console.log(arr1); // 输出: [1, 2, 3] （原数组不变） -
join：将数组的所有元素连接成一个字符串，可以指定分隔符。
let arr = [1, 2, 3, 4, 5]; let str = arr.join(', '); console.log(str); // 输出: "1, 2, 3, 4, 5" -
slice：返回数组的一个片段，不改变原数组。
let arr = [1, 2, 3, 4, 5]; let subArr = arr.slice(1, 3); console.log(subArr); // 输出: [2, 3] console.log(arr); // 输出: [1, 2, 3, 4, 5] （原数组不变） -
toSpliced：ES2023 支持
splice()的不可变版本。let arr = [1, 2, 3, 4, 5]; let spliced = arr.toSpliced(2, 1, 6, 7); console.log(spliced); // 输出: [1, 2, 6, 7, 4, 5] console.log(arr); // 输出: [1, 2, 3, 4, 5] （原数组不变）
6. 其他方法
-
fill：用静态值填充一个数组的元素。
let arr = [1, 2, 3, 4, 5]; arr.fill(0, 2, 4); // 从索引 2 到 4（不包括 4）填充 0 console.log(arr); // 输出: [1, 2, 0, 0, 5] -
flat：将多维数组“拉平”为一维数组。
let arr = [1, [2, [3, 4]], 5]; let flattened = arr.flat(2); // 深度为 2 console.log(flattened); // 输出: [1, 2, 3, 4, 5] -
flatMap：先映射后拉平，即映射每个元素到新数组，然后将所有这些新数组拉平成一个新数组。
let arr = [1, 2, 3]; let mappedAndFlattened = arr.flatMap(x => [x, x * 2]); console.log(mappedAndFlattened); // 输出: [1, 2, 2, 4, 3, 6] -
copyWithin：将数组的一部分复制到同一数组中的另一个位置并返回它，不增加其长度。
let arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3, 5); // 将索引 3 到 5 的元素复制到索引 0 开始的位置 console.log(arr); // 输出: [4, 5, 3, 4, 5] -
at 和 with：用于单元素数组修改和访问的函数式和不可变版本，允许使用负索引获取和更改元素值。
let arr = [1, 2, 3, 4, 5]; console.log(arr.at(-1)); // 输出: 5 arr = arr.with(0, 0); // 使用 with 修改数组 console.log(arr); // 输出: [0, 2, 3, 4, 5]
总结
这些数组方法提供了丰富的功能，可以帮助开发者高效地处理数组数据。每种方法都有其特定的用途，了解和熟练使用这些方法可以使代码更加简洁和高效。希望这些分类和示例能帮助您更好地掌握和使用 JavaScript 数组方法。