JavaScript 的数组提供了丰富的原生方法,可以分为几大类:增删改查、遍历、转换、搜索、排序等。以下是常用方法的分类总结:
一、添加/删除元素(改变原数组)
这些方法会直接修改(mutate)原数组。
方法 | 作用 | 示例 |
---|---|---|
push(...items) | 在数组末尾添加一个或多个元素,返回新长度 | arr.push(4, 5); // [1,2,3,4,5] |
pop() | 移除并返回数组最后一个元素 | arr.pop(); // 返回 3, arr=[1,2] |
unshift(...items) | 在数组开头添加一个或多个元素,返回新长度 | arr.unshift(0); // [0,1,2,3] |
shift() | 移除并返回数组第一个元素 | arr.shift(); // 返回 1, arr=[2,3] |
splice(start, deleteCount, ...items) | 从 start 位置开始,删除 deleteCount 个元素,并插入新元素 | arr.splice(1,1,'x'); // [1,'x',3] |
二、遍历与迭代(不改变原数组)
这些方法用于遍历数组元素,通常不修改原数组(除非回调函数内部修改)。
方法 | 作用 | 是否返回新值 |
---|---|---|
forEach(callback) | 对每个元素执行 callback 函数 | ❌ (返回 undefined ) |
map(callback) | 对每个元素执行 callback ,返回由结果组成的新数组 | ✅ |
filter(callback) | 返回 callback 返回 true 的元素组成的新数组 | ✅ |
some(callback) | 如果至少一个元素使 callback 返回 true ,则返回 true | ✅ |
every(callback) | 如果所有元素都使 callback 返回 true ,则返回 true | ✅ |
find(callback) | 返回第一个使 callback 返回 true 的元素 | ✅ |
findIndex(callback) | 返回第一个使 callback 返回 true 的元素的索引 | ✅ |
reduce(callback, initialValue) | 将数组“归约”为一个值 | ✅ |
reduceRight(callback, initialValue) | 从右到左归约 | ✅ |
示例:
const nums = [1, 2, 3, 4];
nums.forEach(n => console.log(n)); // 遍历打印
const doubled = nums.map(n => n * 2); // [2,4,6,8]
const evens = nums.filter(n => n % 2 === 0); // [2,4]
const hasBig = nums.some(n => n > 3); // true
const sum = nums.reduce((acc, n) => acc + n, 0); // 10
三、转换与连接
方法 | 作用 | 返回值 |
---|---|---|
join(separator) | 将所有元素用 separator 连接成字符串 | 字符串 |
concat(...arrays) | 合并数组,返回新数组 | 新数组 |
slice(start, end) | 返回从 start 到 end (不包含)的浅拷贝 | 新数组 |
toString() | 将数组转换为字符串(逗号分隔) | 字符串 |
flat(depth) | 将嵌套数组“拉平” | 新数组 |
flatMap(callback) | 先 map 再 flat(1) | 新数组 |
示例:
const arr = [1, 2, 3];
arr.join('-'); // "1-2-3"
arr.concat([4,5]); // [1,2,3,4,5] (原数组不变)
arr.slice(1,3); // [2,3]
[1, [2, [3]]].flat(2); // [1,2,3]
[1,2,3].flatMap(x => [x, x*2]); // [1,2,2,4,3,6]
四、搜索与包含
方法 | 作用 | 返回值 |
---|---|---|
indexOf(searchElement, fromIndex) | 返回 searchElement 第一次出现的索引,未找到返回 -1 | 数字 |
lastIndexOf(searchElement, fromIndex) | 返回 searchElement 最后一次出现的索引 | 数字 |
includes(searchElement, fromIndex) | 如果数组包含 searchElement ,返回 true | 布尔值 |
示例:
const fruits = ['apple', 'banana', 'orange'];
fruits.indexOf('banana'); // 1
fruits.includes('apple'); // true
五、排序与反转(改变原数组)
方法 | 作用 |
---|---|
sort(compareFunction) | 对数组元素进行排序(默认按字符串 Unicode 排序) |
reverse() | 反转数组中元素的顺序 |
注意:sort()
的默认行为可能不符合数值排序预期。
[10, 2, 1].sort(); // [1, 10, 2] (字符串排序)
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10] (数值升序)
六、其他有用方法
方法 | 作用 |
---|---|
Array.isArray(value) | 检查 value 是否为数组(静态方法) |
Array.from(arrayLike, mapFn) | 从类数组或可迭代对象创建新数组 |
Array.of(...elements) | 创建具有可变数量参数的新数组(静态方法) |
示例:
Array.isArray([1,2,3]); // true
Array.from('hello'); // ['h','e','l','l','o']
Array.of(1); // [1] (对比 new Array(1) 是 [empty])
重要提示
- 可变性:
push
,pop
,shift
,unshift
,splice
,sort
,reverse
会改变原数组。其他方法如map
,filter
,slice
,concat
返回新数组,不修改原数组。 - 现代替代:优先使用
...
(扩展运算符) 和Array.from()
来创建新数组,避免直接修改原数组(函数式编程思想)。
// 更好的方式(不修改原数组)
const newArr = [...oldArr, newItem];
const filtered = oldArr.filter(item => item > 0);
掌握这些原生方法是高效操作 JavaScript 数组的基础。
THE END