在 JavaScript 开发中，数组是最常用的数据结构之一。
熟练掌握数组方法，不仅能让你更高效地处理数据，还能写出更简洁优雅的代码。
本文将系统介绍常用的数组方法及其使用示例与技巧。
push() —— 向数组末尾添加元素
用途：
向数组的末尾添加一个或多个元素，并返回新数组的长度。
示例：
let person = ['张三', '李四'];
console.log(person.push('王五')); // 输出：3，返回新数组的长度
console.log(person); // ['张三', '李四', '王五']
提示：
push() 会修改原数组。如果希望返回一个新数组，可以使用展开运算符：
const newArr = [...person, '赵六'];
console.log(person); // ['张三', '李四', '王五', '赵六']
pop() —— 移除数组末尾元素
用途：
删除数组最后一个元素，并返回该元素。
示例：
let person = ['张三', '李四', '王五'];
console.log(person.pop()); // 输出：王五
console.log(person); // ['张三', '李四']
注意：
pop() 操作同样会改变原数组。
shift() —— 移除数组开头元素
用途：
删除数组的第一个元素，并返回该元素。
示例：
let person = ['张三', '李四', '王五'];
console.log(person.shift()); // 输出：张三
console.log(person); // ['李四', '王五']
unshift() —— 向数组开头添加元素
用途：
在数组的开头添加一个或多个元素，并返回新数组的长度。
示例：
let person = ['张三', '李四', '王五'];
console.log(person.unshift('赵六')); // 输出：4
console.log(person); // ['赵六', '张三', '李四', '王五']
concat() —— 合并数组
用途：
连接两个或多个数组，返回一个新数组，不改变原数组。
示例：
let person1 = ['张三', '李四', '王五'];
let person2 = ['尼古拉斯', '威廉姆斯', '伊丽莎白'];
let result = person1.concat(person2);
console.log(result); // ['张三', '李四', '王五', '尼古拉斯', '威廉姆斯', '伊丽莎白']
提示：
ES6 中可以使用展开语法实现相同功能：
let result = [...person1, ...person2];
console.log(result); // ['张三', '李四', '王五', '尼古拉斯', '威廉姆斯', '伊丽莎白']
slice() —— 截取数组片段
用途：
从数组中选取部分元素并返回新数组，不影响原数组。
语法：
array.slice(start, end);
示例：
let person = ['张三', '李四', '王五', '尼古拉斯', '威廉姆斯', '伊丽莎白'];
console.log(person.slice(1, 4));
// ['李四', '王五', '尼古拉斯']
参数说明：
start：起始索引（包含）。end：结束索引（不包含）。- 如果参数为负数，则从数组末尾开始计算。
splice() —— 修改数组（增、删、改）
用途：
在指定位置添加、删除或替换元素，会直接修改原数组。
语法：
array.splice(index, howMany, item1, item2, ...);
示例：
let person = ['张三', '李四', '王五', '尼古拉斯', '威廉姆斯', '伊丽莎白'];
person.splice(3, 1, '建国', '兴邦');
console.log(person);
// ['张三', '李四', '王五', '建国', '兴邦', '威廉姆斯', '伊丽莎白']
参数说明：
index：开始修改的位置；howMany：删除的元素个数；itemX：要添加的新元素。
forEach() —— 遍历数组（无返回值）
用途：
对数组的每个元素执行指定函数，不返回新数组。
示例：
let person = ['张三', '李四', '王五'];
person.forEach((name, index) => {
console.log(`索引 ${index} 对应的人是 ${name}`);
});
提示：
forEach() 适合只执行操作（如打印、修改外部变量），不需要返回值的场景。
map() —— 遍历数组并生成新数组
用途：
对数组中的每个元素执行函数，并返回一个新数组。
示例：
let person = ['张三', '李四', '王五'];
let familyPerson = person.map(name => `葬爱家族·${name}`);
console.log(familyPerson);
// ['葬爱家族·张三', '葬爱家族·李四', '葬爱家族·王五']
注意：
forEach()不返回新数组；map()返回一个与原数组等长的新数组。
其他常用数组进阶方法推荐
| 方法 | 功能 | 是否返回新数组 |
|---|---|---|
filter() | 过滤符合条件的元素 | 是 |
find() | 查找第一个符合条件的元素 | 否（返回元素） |
reduce() | 累积计算数组值 | 否（返回结果） |
some() / every() | 判断是否存在/全部满足条件 | 否 |
includes() | 判断数组是否包含某个值 | 否 |
总结
本文介绍了 JavaScript 数组的常用方法，包括：
- 增删改查类：
push、pop、shift、unshift、splice - 复制与合并类：
concat、slice - 遍历与处理类：
forEach、map
熟练掌握这些方法，可以让你更灵活地操作数组，实现从简单列表到复杂数据处理的各种场景。
建议多动手实践，结合调试工具观察数组变化，加深理解。
