目录
前言
JavaScript 提供了多种数组方法，用于操作和处理数组数据。理解这些方法的用法、返回值以及它们是否会改变原数组，可以帮助开发者更高效地处理数据。本文将总结这些方法，并且介绍 ES2023 标准中新增的不可变方法。
数组常用方法汇总表
| 顺序 | 方法名 | 功能或作用 | 返回值 | 是否改变原数组 | 版本 |
|---|---|---|---|---|---|
| 1 | push() | 在数组末尾添加一个或多个元素 | 新的数组长度 | 是 | ES5 |
| 2 | pop() | 移除数组末尾的一个元素并返回该元素 | 移除的元素 | 是 | ES5 |
| 3 | unshift() | 在数组开头添加一个或多个元素 | 新的数组长度 | 是 | ES5 |
| 4 | shift() | 移除数组开头的一个元素并返回该元素 | 移除的元素 | 是 | ES5 |
| 5 | splice() | 添加或删除数组中的元素 | 被删除的元素组成的数组 | 是 | ES5 |
| 6 | reverse() | 反转数组中元素的顺序 | 反转后的数组 | 是 | ES5 |
| 7 | sort() | 对数组的元素进行排序 | 排序后的数组 | 是 | ES5 |
| 8 | concat() | 合并两个或多个数组 | 新数组 | 否 | ES5 |
| 9 | slice() | 返回数组的一个子数组 | 新数组 | 否 | ES5 |
| 10 | indexOf() | 返回指定元素在数组中的第一个索引 | 元素的索引或 -1 | 否 | ES5 |
| 11 | includes() | 判断数组中是否包含某个元素 | 布尔值 | 否 | ES6 |
| 12 | find() | 返回数组中满足条件的第一个元素 | 元素或 undefined | 否 | ES6 |
| 13 | findIndex() | 返回数组中满足条件的第一个元素的索引 | 元素的索引或 -1 | 否 | ES6 |
| 14 | join() | 将数组中的所有元素转换为字符串并连接 | 字符串 | 否 | ES5 |
| 15 | map() | 创建一个新数组，其结果是对原数组的每个元素调用一个提供的函数 | 新数组 | 否 | ES5 |
| 16 | filter() | 创建一个新数组，其包含通过所提供函数实现的测试的所有元素 | 新数组 | 否 | ES5 |
| 17 | reduce() | 对数组中的每个元素执行一个由您提供的 reducer 函数，并返回一个累计结果 | 累计处理的结果 | 否 | ES5 |
| 18 | every() | 测试数组的所有元素是否都通过了指定函数的测试 | 布尔值 | 否 | ES5 |
| 19 | some() | 测试数组中是否至少有一个元素通过了指定函数的测试 | 布尔值 | 否 | ES5 |
| 20 | forEach() | 对数组中的每个元素执行一次提供的函数 | undefined | 否 | ES5 |
| 21 | toSorted() | 返回一个经过排序的新数组 | 新数组 | 否 | ES2023 |
| 22 | toReversed() | 返回一个顺序反转的新数组 | 新数组 | 否 | ES2023 |
| 23 | toSpliced() | 返回一个新数组，其中包含删除或添加元素后的结果 | 新数组 | 否 | ES2023 |
一、会改变原数组的方法
这些方法在操作数组时会直接修改原数组的内容。
增
-
push()- 作用: 在数组末尾添加一个或多个元素。
- 语法:
array.push(element1, ..., elementN) - 示例:
let arr = [1, 2, 3]; arr.push(4, 5); // arr 变为 [1, 2, 3, 4, 5]
-
unshift()- 作用: 在数组开头添加一个或多个元素。
- 语法:
array.unshift(element1, ..., elementN) - 示例:
let arr = [1, 2, 3]; arr.unshift(0); // arr 变为 [0, 1, 2, 3]
删
-
pop()- 作用: 移除数组末尾的一个元素并返回该元素。
- 语法:
array.pop() - 示例:
let arr = [1, 2, 3]; let last = arr.pop(); // arr 变为 [1, 2], last 为 3
-
shift()- 作用: 移除数组开头的一个元素并返回该元素。
- 语法:
array.shift() - 示例:
let arr = [1, 2, 3]; let first = arr.shift(); // arr 变为 [2, 3], first 为 1
改
splice()-
作用: 添加或删除数组中的元素。
-
语法:
array.splice(start, deleteCount, item1, ..., itemN) -
示例:
let arr = [1, 2, 3, 4]; arr.splice(1, 2); // arr 变为 [1, 4] -
作为替换元素使用:
let arr = [1, 2, 3]; arr.splice(1, 1, 4); // arr 变为 [1, 4, 3]
-
排序
-
reverse()- 作用: 反转数组中元素的顺序。
- 语法:
array.reverse() - 示例:
let arr = [1, 2, 3]; arr.reverse(); // arr 变为 [3, 2, 1]
-
sort()- 作用: 对数组的元素进行排序。
- 语法:
array.sort([compareFunction]) - 示例:
let arr = [3, 1, 4, 1, 5]; arr.sort(); // arr 变为 [1, 1, 3, 4, 5]
二、不会改变原数组的方法
这些方法在操作数组时不会修改原数组，而是返回一个新的数组或值。
查找
-
indexOf()- 作用: 返回指定元素在数组中的第一个索引，如果不存在则返回 -1。
- 语法:
array.indexOf(searchElement, fromIndex) - 示例:
let arr = [1, 2, 3, 2]; let index = arr.indexOf(2); // index 为 1
-
includes()- 作用: 判断数组中是否包含某个元素，返回布尔值。
- 语法:
array.includes(searchElement, fromIndex) - 示例:
let arr = [1, 2, 3]; let hasTwo = arr.includes(2); // hasTwo 为 true
-
find()- 作用: 返回数组中满足条件的第一个元素。
- 语法:
array.find(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3, 4]; let found = arr.find(x => x > 2); // found 为 3
-
findIndex()- 作用: 返回数组中满足条件的第一个元素的索引。
- 语法:
array.findIndex(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3, 4]; let foundIndex = arr.findIndex(x => x > 2); // foundIndex 为 2
合并与切片
-
concat()- 作用: 合并两个或多个数组，返回一个新数组。
- 语法:
array.concat(value1, value2, ..., valueN) - 示例:
let arr1 = [1, 2]; let arr2 = [3, 4]; let newArr = arr1.concat(arr2); // newArr 为 [1, 2, 3, 4]
-
slice()- 作用: 返回数组的一个子数组。
- 语法:
array.slice([begin[, end]]) - 示例:
let arr = [1, 2, 3, 4]; let subArr = arr.slice(1, 3); // subArr 为 [2, 3]
映射与过滤
-
map()- 作用: 创建一个新数组，其结果是对原数组的每个元素调用一个提供的函数。
- 语法:
array.map(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3]; let mappedArr = arr.map(x => x * 2); // mappedArr 为 [2, 4, 6]
-
filter()- 作用: 创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
- 语法:
array.filter(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3, 4]; let filteredArr = arr.filter(x => x > 2); // filteredArr 为 [3, 4]
-
reduce()- 作用: 对数组中的每个元素执行一个由您提供的 reducer 函数，并返回一个累计结果。
- 语法:
array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) - 示例:
let arr = [1, 2, 3, 4]; let sum = arr.reduce((total, current) => total + current, 0); // sum 为 10
测试
-
every()- 作用: 测试数组的所有元素是否都通过了指定函数的测试，返回布尔值。
- 语法:
array.every(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3]; let allGreaterThanZero = arr.every(x => x > 0); // allGreaterThanZero 为 true
-
some()- 作用: 测试数组中是否至少有一个元素通过了指定函数的测试，返回布尔值。
- 语法:
array.some(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3]; let hasNegative = arr.some(x => x < 0); // hasNegative 为 false
连接
join()- 作用: 将数组中的所有元素转换为字符串并连接，返回字符串。
- 语法:
array.join([separator]) - 示例:
let arr = [1, 2, 3]; let str = arr.join('-'); // str 为 "1-2-3"
遍历
forEach()- 作用: 对数组中的每个元素执行一次提供的函数。
- 语法:
array.forEach(callback(element[, index[, array]])[, thisArg]) - 示例:
let arr = [1, 2, 3]; arr.forEach(x => console.log(x)); // 输出 1 2 3
三、不可变方法（ES2023 新增）
toSorted()
- 作用: 返回一个经过排序的数组，而不会修改原数组。
- 语法:
array.toSorted([compareFunction]) - 示例:
let arr = [3, 1, 4, 1, 5]; let sortedArr = arr.toSorted(); // sortedArr 为 [1, 1, 3, 4, 5], arr 未改变
toReversed()
- 作用: 返回一个元素顺序反转的新数组，而不会修改原数组。
- 语法:
array.toReversed() - 示例:
let arr = [1, 2, 3]; let reversedArr = arr.toReversed(); // reversedArr 为 [3, 2, 1], arr 未改变
toSpliced()
- 作用: 返回一个新数组，其中包含从原数组中删除或添加元素后的结果，而不会修改原数组。
- 语法:
array.toSpliced(start, deleteCount, item1, ..., itemN) - 示例:
let arr = [1, 2, 3, 4]; let splicedArr = arr.toSpliced(1, 2); // splicedArr 为 [1, 4], arr 未改变
通过了解和掌握这些数组方法，您可以更加灵活、高效地处理 JavaScript 中的数组数据。特别是新引入的不可变方法，为开发者提供了更多安全的选择，使得代码更具可维护性和可读性。
本文从数组操作的基本方法入手，涵盖了会改变原数组的方法、不会改变原数组的方法以及最新的不可变方法，为读者提供了全面的学习资料。如果您希望了解更多关于 JavaScript 的内容，欢迎继续关注我们的博客
扫一扫
1391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
