JavaScript 数组方法简明解释（附示例）

Source: Dev.to

请提供您希望翻译的具体文本内容，我会按照要求保留原始链接、格式和代码块，将其翻译成简体中文。

介绍

数组用于在一个变量中存储多个值。

const fruits = ["Apple", "Banana", "Mango"];

但是我们该如何在数组中添加、删除或修改元素呢？
JavaScript 提供了一套数组方法，使这些操作变得简单。
让我们一步一步学习最重要的几种方法。

1. 添加与删除元素

push() – 在末尾添加

向数组的末尾添加一个新元素（会修改原数组）。

const fruits = ["Apple", "Banana"];
fruits.push("Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

pop() – 从末尾删除

删除数组的最后一个元素（会修改原数组）。

const fruits = ["Apple", "Banana", "Mango"];
fruits.pop();

console.log(fruits);
// ["Apple", "Banana"]

unshift() – 在开头添加

在数组的开头添加一个新元素（会修改原数组）。

const fruits = ["Banana", "Mango"];
fruits.unshift("Apple");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

shift() – 从开头删除

删除数组的第一个元素（会修改原数组）。

const fruits = ["Apple", "Banana", "Mango"];
fruits.shift();

console.log(fruits);
// ["Banana", "Mango"]

2. 复制与修改数组

slice() – 复制数组的一部分

返回一个 新 数组，包含所选元素，且不修改原数组。

Syntax

array.slice(startIndex, endIndex);

• startIndex → 开始位置（包含）
• endIndex → 结束位置（不包含）

示例 1 – 截取一段

const numbers = [10, 20, 30, 40];
const result = numbers.slice(1, 3);

console.log(result);
// [20, 30]

为什么？ 从索引 1（值 20）开始，在索引 3（值 40）之前停止。

示例 2 – 复制整个数组

const numbers = [1, 2, 3];
const copy = numbers.slice();

console.log(copy);
// [1, 2, 3]

这会创建原数组的 浅拷贝。

splice() – 任意位置添加或删除

用于在任意位置添加、删除或替换元素（会修改原数组）。

Syntax

array.splice(startIndex, deleteCount, item1, item2, ...);

• startIndex → 开始位置
• deleteCount → 要删除的元素数量
• item1, item2, … → （可选）要添加的项目

删除元素

const numbers = [1, 2, 3, 4];
numbers.splice(1, 2); // start at index 1, remove 2 elements

console.log(numbers);
// [1, 4]

添加元素

const numbers = [1, 4];
numbers.splice(1, 0, 2, 3); // start at index 1, remove 0, add 2 and 3

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

重要规则： splice() 在 startIndex 位置 插入项目；该索引处的现有元素（以及其后面的元素）会向右移动。它 不会 在索引之后插入。

3. 搜索方法

includes() – 检查值是否存在

const fruits = ["Apple", "Banana"];
console.log(fruits.includes("Apple")); // true

返回 true 或 false。

indexOf() – 查找位置

const fruits = ["Apple", "Banana"];
console.log(fruits.indexOf("Banana")); // 1

返回元素的索引，如果未找到则返回 -1。

find() – 查找第一个匹配的元素

返回满足条件的第一个元素，如果没有匹配则返回 undefined。

语法

array.find(function(element) {
  return condition;
});

示例

const numbers = [5, 10, 15, 20];
const result = numbers.find(function(num) {
  return num > 10;
});

console.log(result);
// 15

重要提示： find() 在找到匹配后立即停止搜索。

Source: …

4. 循环方法

forEach() – 遍历数组

对数组的每个元素执行一次提供的函数。它 不会返回新数组，除非在回调内部修改原数组，否则原数组保持不变。

语法

array.forEach(function(element, index, array) {
  // code to run
});

• element → 当前值
• index（可选）→ 元素的位置
• array（可选）→ 整个数组

示例 1 – 简单循环

const numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num);
});

输出

1
2
3

示例 2 – 带索引

const fruits = ["Apple", "Banana", "Mango"];
fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});

输出

0 Apple
1 Banana
2 Mango

重要规则： forEach() 会遍历整个数组，返回 undefined，且永远不会生成新数组。

这些方法涵盖了日常 JavaScript 编程中最常用的数组操作。祝编码愉快！

Source: …

JavaScript 数组方法速查表

map() – 创建一个新数组

map() 方法用于：

• 转换数组中的每个元素
• 返回一个 新 数组
• 绝不 改变原数组

语法

array.map(function (element, index, array) {
  return newValue;
});

• element → 当前值
• index → 位置（可选）
• array → 整个数组（可选）

示例 1

const numbers = [1, 2, 3];

const doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled);
// [2, 4, 6]

发生了什么？

map() 会把所有返回的值收集到一个 新 数组中。

重要规则

• map() 始终返回一个新数组。
• 必须包含 return 语句。
• 不会修改原数组。

示例 2 – 箭头函数（现代写法）

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// [2, 4, 6]

filter() – 基于条件过滤

filter() 方法用于：

• 选取符合条件的元素
• 返回一个 新 数组
• 绝不 改变原数组

语法

array.filter(function (element, index, array) {
  return condition;
});

• 条件为 true → 保留该元素
• 条件为 false → 移除该元素

示例 1 – 基础示例

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

const even = numbers.filter(function (num) {
  return num % 2 === 0;
});

console.log(even);
// [2, 4]

仅保留偶数。

重要规则

• filter() 始终返回一个新数组。
• 可能返回更少的元素，甚至是空数组。

示例 2 – 箭头函数

const numbers = [5, 10, 15, 20];
const greaterThan10 = numbers.filter(n => n > 10);

console.log(greaterThan10);
// [15, 20]

reduce() – 合并所有值为一个

reduce() 方法用于：

• 取出数组的所有元素
• 将它们合并为 单个 值

它可以返回数字、字符串、对象或另一个数组。

语法

array.reduce(function (accumulator, currentValue) {
  return updatedValue;
}, initialValue);

• accumulator → 步骤性存储结果
• currentValue → 循环中的当前元素
• initialValue → 起始值（可选，但推荐）

示例 1 – 累加所有数字

const numbers = [1, 2, 3, 4];
const total = numbers.reduce(function (sum, num) {
  return sum + num;
}, 0);

console.log(total);
// 10

示例 2 – 累乘数字

const numbers = [2, 3, 4];
const result = numbers.reduce(function (total, num) {
  return total * num;
}, 1);

console.log(result);
// 24

快速比较表

此表格帮助您快速了解哪些方法会修改数组，哪些方法会返回新数组。