JavaScript 数组常用方法详解与实用指南

JavaScript 数组常用方法详解与实用指南

JavaScript 中的数组（Array）是前端开发中最常用的数据结构之一，它为我们提供了丰富的操作方法，从创建、添加、删除、查找到排序等各类功能应有尽有。本篇博文将全面介绍 JavaScript 数组的常用方法，并结合示例进行说明，帮助大家更加高效地操作数组。

一、创建与初始化数组的方法

1. Array.from()

Array.from() 用于将类数组对象或可迭代对象转换为数组，还可以通过映射函数处理每个元素。

const arr = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(arr); // [1, 2, 3, 4, 5]

2. Array.of()

创建包含所有传入参数的新数组。

const arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

3. Array().fill()

创建一个固定长度的数组，并用指定值填充。

const arr = Array(5).fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

二、数组元素的添加与删除

4. push() 和 pop()

• push()：在数组末尾添加一个或多个元素。
• pop()：删除数组末尾的元素。

const arr = [1, 2];
arr.push(3);
console.log(arr); // [1, 2, 3]
arr.pop();
console.log(arr); // [1, 2]

5. unshift() 和 shift()

• unshift()：在数组开头添加元素。
• shift()：删除数组开头的元素。

arr.unshift(0);
console.log(arr); // [0, 1, 2]
arr.shift();
console.log(arr); // [1, 2]

三、数组连接与分割

6. concat()

将两个或多个数组合并成一个新数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

7. join()

将数组元素转成字符串，并用指定分隔符连接。

const arr = [1, 2, 3];
console.log(arr.join('-')); // "1-2-3"

四、查找与筛选元素

8. indexOf() 和 lastIndexOf()

• indexOf()：返回元素首次出现的位置。
• lastIndexOf()：返回元素最后一次出现的位置。

const arr = [1, 2, 3, 1];
console.log(arr.indexOf(1)); // 0
console.log(arr.lastIndexOf(1)); // 3

9. includes()

检查数组是否包含指定的元素。

console.log(arr.includes(2)); // true

10. find() 和 findIndex()

• find()：返回第一个满足条件的元素。
• findIndex()：返回第一个满足条件的元素的索引。

const result = arr.find(x => x > 2);
console.log(result); // 3
console.log(arr.findIndex(x => x > 2)); // 2

11. filter()

返回所有符合条件的元素组成的新数组。

const filtered = arr.filter(x => x % 2 === 0);
console.log(filtered); // [2]

五、遍历数组的方法

12. forEach()

对每个元素执行回调函数，无返回值。

arr.forEach(x => console.log(x * 2)); // 输出 2 4 6

13. map()

创建一个新数组，包含对每个元素执行回调后的结果。

const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6]

14. reduce()

累加数组中的元素，返回一个最终的累计结果。

const sum = arr.reduce((acc, x) => acc + x, 0);
console.log(sum); // 6

六、数组排序与反转

15. sort()

对数组进行排序（默认按字符串顺序排序）。

const nums = [3, 1, 4, 2];
nums.sort((a, b) => a - b); // 按数值升序
console.log(nums); // [1, 2, 3, 4]

16. reverse()

反转数组顺序。

nums.reverse();
console.log(nums); // [4, 3, 2, 1]

七、数组分割与复制

17. slice()

返回数组的部分片段，不修改原数组。

const sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]

18. splice()

插入、删除或替换数组元素，修改原数组。

arr.splice(1, 1, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 3]

八、高级数组操作

19. flat()

将嵌套数组展平为一维数组。

const nested = [1, [2, [3, 4]], 5];
console.log(nested.flat(2)); // [1, 2, 3, 4, 5]

20. flatMap()

对数组每个元素执行映射，并将结果展平。

const mapped = [1, 2, 3].flatMap(x => [x * 2]);
console.log(mapped); // [2, 4, 6]

总结

通过掌握这些数组方法，你将能够轻松地完成数组的各种操作，在实际开发中大大提升效率！