JavaScript 中的数组（Array）是一种非常重要的数据结构，提供了丰富的原生方法用于操作数组元素。这些方法可以分为转换、增删、排序、查找、迭代、归并等多个类别，是前端开发中处理数据的核心工具。
✅ 一句话总结
JavaScript 数组原生方法丰富多样，包括转换、增删、排序、查找、迭代、归并等操作，熟练掌握这些方法可以显著提升开发效率和代码质量。
✅ 一、数组与字符串的转换方法
| 方法名 | 说明 |
|---|---|
toString() | 将数组转换为字符串，元素用逗号分隔 |
toLocaleString() | 将数组元素转换为本地字符串格式（考虑地区差异） |
join(separator) | 将数组元素用指定的分隔符连接成字符串 |
📌 示例：
const arr = [1, 2, 3];
console.log(arr.join('-')); // "1-2-3"
✅ 二、尾部操作方法（栈操作）
| 方法名 | 说明 |
|---|---|
push(...items) | 向数组末尾添加一个或多个元素，返回新长度 |
pop() | 删除并返回数组最后一个元素 |
📌 示例：
const arr = [1, 2];
arr.push(3, 4); // [1,2,3,4]
arr.pop(); // 4，arr => [1,2,3]
✅ 三、首部操作方法（队列操作）
| 方法名 | 说明 |
|---|---|
unshift(...items) | 向数组开头添加一个或多个元素，返回新长度 |
shift() | 删除并返回数组第一个元素 |
📌 示例：
const arr = [2, 3];
arr.unshift(0, 1); // [0,1,2,3]
arr.shift(); // 0，arr => [1,2,3]
✅ 四、排序方法
| 方法名 | 说明 |
|---|---|
reverse() | 反转数组元素顺序 |
sort(compareFn) | 对数组进行排序，默认按字符串顺序排序；可传入比较函数自定义排序逻辑 |
📌 示例：
const arr = [3, 1, 2];
arr.sort((a, b) => a - b); // [1,2,3]
arr.reverse(); // [3,2,1]
✅ 五、连接数组的方法
| 方法名 | 说明 |
|---|---|
concat(...arrays) | 合并多个数组，返回新数组，不修改原数组 |
📌 示例：
const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2); // [1,2,3,4]
✅ 六、截取数组的方法
| 方法名 | 说明 |
|---|---|
slice(start, end) | 返回从 start 到 end（不包括）的子数组，不修改原数组 |
📌 示例：
const arr = [1, 2, 3, 4];
const subArr = arr.slice(1, 3); // [2,3]
✅ 七、插入/删除/替换元素的方法
| 方法名 | 说明 |
|---|---|
splice(start, deleteCount, ...items) | 从 start 位置开始删除 deleteCount 个元素，并插入新元素，返回被删除的元素数组，会修改原数组 |
📌 示例：
const arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b'); // 删除 [2,3]，插入 ['a','b']
// arr => [1, 'a', 'b', 4]
✅ 八、查找元素索引的方法
| 方法名 | 说明 |
|---|---|
indexOf(item, fromIndex) | 查找 item 的第一个出现的索引，找不到返回 -1 |
lastIndexOf(item, fromIndex) | 从后往前查找 item 的索引 |
📌 示例：
const arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(2)); // 3
✅ 九、迭代方法（不会修改原数组）
| 方法名 | 说明 |
|---|---|
forEach(callback) | 遍历数组，无返回值 |
map(callback) | 遍历数组并返回新数组 |
filter(callback) | 返回符合条件的元素组成的新数组 |
some(callback) | 只要有一个元素满足条件就返回 true |
every(callback) | 所有元素都满足条件才返回 true |
📌 示例：
const arr = [1, 2, 3, 4];
const doubled = arr.map(x => x * 2); // [2,4,6,8]
const evens = arr.filter(x => x % 2 === 0); // [2,4]
const hasEven = arr.some(x => x % 2 === 0); // true
const allEven = arr.every(x => x % 2 === 0); // false
arr.forEach(x => console.log(x));
✅ 十、归并方法
| 方法名 | 说明 |
|---|---|
reduce(callback, initialValue) | 从左到右累积计算，返回最终值 |
reduceRight(callback, initialValue) | 从右到左累积计算 |
📌 示例：
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
const str = arr.reduce((acc, curr) => acc + curr, '');
console.log(str); // "1234"
✅ 十一、一句话总结
JavaScript 数组原生方法功能丰富，涵盖了数组的转换、增删、排序、查找、迭代、归并等操作，是处理数据的核心工具。掌握这些方法可以写出更简洁、高效、可维护的代码。
💡 进阶建议
- 使用
map、filter、reduce等函数式编程方法提升代码可读性； - 使用
slice、concat等方法避免直接修改原数组，实现不可变性； - 使用
reduce可以实现扁平化、统计、分组等复杂操作； - 注意
forEach没有返回值，不能链式调用； some和every可以用于条件判断，提前终止遍历；
