一文读懂JS数组方法分类！

JS 数组方法大全：从基础到进阶

前言

JavaScript 数组是一种强大的数据结构，在前端开发中广泛使用。它们能够存储一组有序的值，并通过索引轻松访问每个值。掌握 JS 数组方法可以显著提升你的编码能力，让你轻松处理各种数据操作任务。

常用方法

• forEach()： 遍历数组中的每个元素，并对每个元素执行指定的操作。
• map()： 创建一个新数组，其元素是通过对原数组中的每个元素应用指定函数而产生的。
• filter()： 创建一个新数组，其元素是通过对原数组中的每个元素应用指定函数而产生的，该函数返回 true 则保留该元素，否则不保留。
• reduce()： 将数组中的所有元素减少为单个值，该值是通过对数组中的每个元素应用指定函数而产生的。
• find()： 查找数组中第一个满足指定条件的元素，如果找到则返回该元素，否则返回 undefined。
• findIndex()： 查找数组中第一个满足指定条件的元素的索引，如果找到则返回该索引，否则返回 -1。
• includes()： 判断数组中是否包含指定的元素，如果包含则返回 true，否则返回 false。
• indexOf()： 返回数组中指定元素的索引，如果找到则返回该索引，否则返回 -1。
• lastIndexOf()： 返回数组中指定元素的最后一个索引，如果找到则返回该索引，否则返回 -1。

代码示例：

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach() 遍历数组并打印每个元素
numbers.forEach((num) => console.log(num));

// 使用 map() 创建一个新数组，其中每个元素增加 1
const newNumbers = numbers.map((num) => num + 1);
console.log(newNumbers);

// 使用 filter() 创建一个新数组，其中只包含偶数
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers);

高级方法

• sort()： 对数组中的元素进行排序，可以按升序或降序排列。
• reverse()： 反转数组中的元素，将最后一个元素变成第一个元素，依此类推。
• concat()： 将两个或多个数组合并成一个新数组。
• slice()： 从数组中提取指定范围的元素，并返回一个新数组。
• splice()： 从数组中删除指定范围的元素，并可以插入新的元素。
• push()： 在数组的末尾添加一个或多个元素。
• pop()： 从数组的末尾删除最后一个元素，并返回该元素。
• unshift()： 在数组的开头添加一个或多个元素。
• shift()： 从数组的开头删除第一个元素，并返回该元素。

代码示例：

// 使用 sort() 对数组中的元素按升序排序
numbers.sort((a, b) => a - b);
console.log(numbers);

// 使用 reverse() 反转数组中的元素
numbers.reverse();
console.log(numbers);

// 使用 splice() 删除数组中的元素
numbers.splice(2, 2);
console.log(numbers);

结论

JS 数组方法是处理数据操作任务的强大工具。掌握这些方法可以让你高效地操作数组，轻松实现各种功能。从遍历元素到执行复杂操作，数组方法涵盖了广泛的应用场景。

常见问题解答

1. forEach() 和 map() 有什么区别？
   • forEach() 用于遍历数组，而 map() 用于创建新数组。
2. filter() 和 find() 有什么区别？
   • filter() 创建一个包含满足条件的所有元素的新数组，而 find() 仅返回第一个满足条件的元素。
3. sort() 如何按降序对数组排序？
   • 传递一个比较函数，该函数比较两个元素并返回 -1 以表示第一个元素小于第二个元素。
4. splice() 如何同时删除和插入元素？
   • 传递三个参数：起始索引、要删除的元素数、要插入的元素数组。
5. 如何从数组中查找指定元素的索引？
   • 使用 indexOf() 或 lastIndexOf() 方法。