JS 数组方法速查表
影响原数组的方法(原型方法)
| 方法名 | 引入版本 | 功能描述 | 使用示例 |
|---|---|---|---|
| pop | ES1 | 移除并返回最后一个元素 | [1, 2, 3].pop(); // 3, arr: [1, 2] |
| push | ES1 | 添加元素到末尾 | [1, 2].push(3); // [1, 2, 3] |
| reverse | ES1 | 反转数组顺序 | [1, 2, 3].reverse(); // [3, 2, 1] |
| shift | ES1 | 移除并返回第一个元素 | [1, 2, 3].shift(); // 1, arr: [2, 3] |
| sort | ES1 | 排序数组 | [3, 1, 2].sort(); // [1, 2, 3] |
| splice | ES1 | 添加/移除元素 | [1, 2, 3].splice(1, 1, 4); // [1, 4, 3] |
| unshift | ES1 | 添加元素到开头 | [2, 3].unshift(1); // [1, 2, 3] |
| copyWithin | ES6 | 复制数组部分到指定位置 | [1, 2, 3, 4].copyWithin(0, 2); // [3, 4, 3, 4] |
| fill | ES6 | 用值填充数组 | [1, 2, 3].fill(0); // [0, 0, 0] |
不影响原数组的方法(原型方法)
| 方法名 | 引入版本 | 功能描述 | 使用示例 |
|---|---|---|---|
| concat | ES1 | 合并数组 | [1, 2].concat([3, 4]); // [1, 2, 3, 4] |
| join | ES1 | 元素连接为字符串 | ['a', 'b'].join('-'); // 'a-b' |
| slice | ES1 | 返回数组部分 | [1, 2, 3].slice(1); // [2, 3] |
| toLocaleString | ES1 | 转换为本地化字符串 | [1, 2].toLocaleString(); // '1,2' |
| toString | ES1 | 转换为字符串 | [1, 2].toString(); // '1,2' |
| every | ES5 | 检查是否所有元素满足条件 | [1, 2, 3].every(x => x > 0); // true |
| filter | ES5 | 返回满足条件的元素 | [1, 2, 3].filter(x => x > 1); // [2, 3] |
| forEach | ES5 | 对每个元素执行回调 | [1, 2].forEach(x => console.log(x)); // 1, 2 |
| indexOf | ES5 | 返回元素首次出现的索引 | [1, 2, 3].indexOf(2); // 1 |
| lastIndexOf | ES5 | 返回元素最后出现的索引 | [1, 2, 1].lastIndexOf(1); // 2 |
| map | ES5 | 对每个元素应用函数 | [1, 2].map(x => x * 2); // [2, 4] |
| reduce | ES5 | 从左到右累积计算 | [1, 2, 3].reduce((a, b) => a + b, 0); // 6 |
| reduceRight | ES5 | 从右到左累积计算 | [1, 2, 3].reduceRight((a, b) => a + b, 0); // 6 |
| some | ES5 | 检查是否任一元素满足条件 | [1, 2, 3].some(x => x > 2); // true |
| entries | ES6 | 返回索引和值的迭代器 | [...[1, 2].entries()]; // [[0, 1], [1, 2]] |
| find | ES6 | 返回第一个满足条件的元素 | [1, 2, 3].find(x => x > 1); // 2 |
| findIndex | ES6 | 返回第一个满足条件的索引 | [1, 2, 3].findIndex(x => x > 1); // 1 |
| keys | ES6 | 返回索引的迭代器 | [...[1, 2, 3].keys()]; // [0, 1, 2] |
| values | ES6 | 返回值的迭代器 | [...[1, 2, 3].values()]; // [1, 2, 3] |
| includes | ES2016 | 检查是否包含元素 | [1, 2, 3].includes(2); // true |
| flat | ES2019 | 展平嵌套数组 | [1, [2, [3]]].flat(2); // [1, 2, 3] |
| flatMap | ES2019 | 映射并展平结果 | [1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4] |
| at | ES2022 | 返回指定索引的元素 | [1, 2, 3].at(-1); // 3 |
| findLast | ES2023 | 返回最后一个满足条件的元素 | [1, 2, 3].findLast(x => x > 1); // 3 |
| findLastIndex | ES2023 | 返回最后一个满足条件的索引 | [1, 2, 3].findLastIndex(x => x > 1); // 2 |
| toReversed | ES2023 | 返回反转后的新数组 | [1, 2, 3].toReversed(); // [3, 2, 1] |
| toSorted | ES2023 | 返回排序后的新数组 | [3, 1, 2].toSorted(); // [1, 2, 3] |
| toSpliced | ES2023 | 返回添加/移除元素后的新数组 | [1, 2, 3].toSpliced(1, 1); // [1, 3] |
| with | ES2023 | 返回替换指定索引元素后的新数组 | [1, 2, 3].with(1, 4); // [1, 4, 3] |
| group | ES2024 | 按条件分组为对象 | [1, 2, 3].group(x => x % 2); // 0: [2], 1: [1, 3] |
| groupToMap | ES2024 | 按条件分组为 Map | [...[1, 2, 3].groupToMap(x => x % 2)]; // [[0, [2]], [1, [1, 3]]] |
静态方法(不影响原数组)
| 方法名 | 引入版本 | 功能描述 | 使用示例 |
|---|---|---|---|
| Array.isArray | ES5 | 检查是否为数组 | Array.isArray([1, 2]); // true |
| Array.from | ES6 | 从可迭代对象创建数组 | Array.from('abc'); // ['a', 'b', 'c'] |
| Array.of | ES6 | 从参数创建数组 | Array.of(1, 2, 3); // [1, 2, 3] |
| Array.fromAsync | ES2024 | 从异步可迭代对象创建数组 | await Array.fromAsync((async function*() { yield 1; yield 2; }())); // [1, 2] |
