掌握 JavaScript 数组方法：初学者指南

Source: Dev.to

请提供您希望翻译的具体文本内容（除代码块和 URL 之外），我将按照要求将其翻译成简体中文并保留原有的格式。

Introduction

Hello, fellow readers! Whether you’re just starting out with JavaScript arrays or brushing up on your skills, remember that arrays are the backbone of data handling in programming.

Think of an array as a bustling Indian street market: vendors line up in a row, each selling everything from vegetables and fish to spices and sweets. Each vendor (element) has a spot (index), and you can add, remove, or transform what’s on offer.

In a previous blog I covered the basics of arrays in JavaScript. In this post we’ll dive into some essential array methods:

• push() / pop()
• shift() / unshift()
• forEach()
• map()
• reduce()
• filter()

For each method you’ll get a short explanation, an easy‑to‑understand analogy, a before‑and‑after example, and a quick comparison with a traditional for loop. By the end you’ll have a hands‑on assignment to try out. Let’s get started—open your console and experiment as we go!

介绍

各位读者好！无论你是刚刚开始学习 JavaScript 数组，还是在复习已有的技能，都请记住：数组是编程中数据处理的基石。

可以把数组想象成热闹的印度街头市场：摊贩们排成一列，出售从蔬菜、鱼类到香料和甜点的各种商品。每个摊贩（元素）都有自己的位置（索引），你可以添加、移除或转换他们的商品。

在之前的博客中，我已经介绍了 JavaScript 中数组的基础知识。本篇文章将深入探讨一些必备的数组方法：

• push() / pop()
• shift() / unshift()
• forEach()
• map()
• reduce()
• filter()

对于每个方法，你将获得简短的解释、易于理解的类比、前后对比示例，以及与传统 for 循环的快速比较。文章结束时，你还会得到一个动手练习来实践所学。让我们开始吧——打开控制台，边看边实验！

push() and pop()

类比 – 想象一个家庭婚礼自助餐。push() 就像把新客人加到队伍的末尾，而 pop() 就像为最后一个客人服务并把他们从队列中移除。

示例

// Before
let sweets = ['jalebi', 'gulab jamun', 'rasgulla'];

// push() – add 'peda' to the end
sweets.push('peda');
// After: ['jalebi', 'gulab jamun', 'rasgulla', 'peda']

// pop() – remove the last element
console.log(sweets.pop()); // 'peda'
// After: ['jalebi', 'gulab jamun', 'rasgulla']

在浏览器控制台或 IDE 中尝试一下。就这么简单！

shift() and unshift()

类比 – 想象一下宝莱坞电影首映的 VIP 排队。unshift() 把名人加到队列前面，而 shift() 移除第一个人（第一个被服务的）。

示例

// Before
let sweets = ['jalebi', 'gulab jamun', 'rasgulla'];

// unshift() – add 'barfi' at the beginning
sweets.unshift('barfi');
// After: ['barfi', 'jalebi', 'gulab jamun', 'rasgulla']

// shift() – remove the first element
sweets.shift();
// After: ['jalebi', 'gulab jamun', 'rasgulla']

由于每个元素都必须重新索引，这些操作在大数组上可能会更慢，就像重新整理拥挤的火车车厢一样。

forEach()

类比 – 在学校集会上点名：函数对每个元素运行，执行副作用（例如日志），但从不改变原数组并返回 undefined。

示例

let fruits = ['mango', 'banana', 'guava'];

fruits.forEach(fruit => console.log(`${fruit} is tasty!`));

控制台输出

mango is tasty!
banana is tasty!
guava is tasty!

fruits 数组保持不变。

重要提示

• 除了抛出异常外，无法跳出 forEach() 循环。
• forEach() 期望同步回调；它 不会 等待 Promise。

map()

类比 – 为你的数组来一次排灯节改造：map() 会遍历每个元素，对其进行转换，并返回一个 新 数组，同时保持原数组不变。想象一群朋友在胡里节被“染色”，每位朋友的兴奋度都翻倍。

示例

let prices = [10, 20, 30]; // 街头小吃的卢比价格

let doubled = prices.map(price => price * 2);

结果

• 新数组（doubled）：[20, 40, 60]
• 原数组（prices）：[10, 20, 30]

对比 – 传统 for 循环 vs. map()

// 使用 for 循环
let doubled = [];
for (let i = 0; i < prices.length; i++) {
  doubled.push(prices[i] * 2);
}

// 使用 map()
let doubled = prices.map(price => price * 2);

map() 更简洁、更具声明式，并且不会修改源数组。

注意事项 – 在 稀疏 数组中，map() 会跳过空位，保持返回数组的稀疏性。

reduce()

类比 – 在板球比赛中记分：从一个初始累加器（通常是 0）开始，reduce() 将每位球员的得分相加得到总分。

示例

let runs = [50, 30, 20]; // runs scored by three batsmen

let total = runs.reduce((acc, run) => acc + run, 0);

结果：total 为 100（单个数字，而不是数组）。

reduce() 也可以用于连接字符串、构建对象，或执行任何将数组折叠为单个值的操作。

注意 – 初始累加器的值不一定要是 0；它可以是逻辑所需的任何类型。

filter()

类比 – 婚礼帐篷的保镖：filter() 只让满足条件的受邀宾客（元素）通过，返回这些元素的浅拷贝。

示例

let ages = [15, 22, 18, 30]; // 家庭聚会的年龄

let adults = ages.filter(age => age >= 18);

结果

• 新数组（adults）：[22, 18, 30]
• 原数组（ages）：[15, 22, 18, 30]

对比 – 传统 for 循环 vs. filter()

// 使用 for 循环
let adults = [];
for (let i = 0; i < ages.length; i++) {
  if (ages[i] >= 18) {
    adults.push(ages[i]);
  }
}

// 使用 filter()
let adults = ages.filter(age => age >= 18);

filter() 去除了冗余代码，使意图更加明确，代码也更易读。

实践作业

1. 创建 一个包含你最喜欢的印度菜的数组。
2. 使用 push() 添加一个新菜品，然后 使用 pop() 将其移除。每一步后 记录 数组。
3. 使用 unshift() 在前面添加两个菜品，然后 使用 shift() 移除第一个。记录 结果。
4. 使用 forEach() 记录 每个菜品。
5. 使用 map() 创建 一个菜名全部大写的新数组。
6. 使用 reduce() 计算 所有菜名的字符总数。
7. 过滤 菜品，仅保留名称长度超过 6 个字符的菜品。

在控制台或在线编辑器中运行代码，验证每个方法的行为是否如描述。

祝编码愉快！ 🚀

示例：使用 map()、filter() 和 reduce()

// Original array
let numbers = [5, 8, 12, 15, 3];

// 1️⃣ Double each number
let doubled = numbers.map(num => num * 2);
// Expected: [10, 16, 24, 30, 6]

// 2️⃣ Keep only numbers greater than 10 (using the doubled array)
let greaterThan10 = doubled.filter(num => num > 10);
// Expected: [16, 24, 30]

// 3️⃣ Sum the remaining numbers
let sum = greaterThan10.reduce((acc, num) => acc + num, 0);
// Expected: 70

提示： 在浏览器控制台或 Node.js REPL 中运行代码。随意修改 numbers 数组并观察结果如何变化。这种动手实验是掌握数组方法的最快方式。

---

为什么这些方法很重要

• push() / unshift() – 添加元素的简便方式。
• map() – 通过转换每个元素创建一个新数组。
• filter() – 创建只包含满足条件的元素的新数组。
• reduce() – 将数组折叠为单一值（例如求和、乘积、对象）。

这些内置函数让你的代码保持简洁且富有表现力——就像现代应用简化日常任务（点餐、订火车等），为印度数百万用户提供便利。

---

后续步骤

1. 练习 – 用不同的数组和条件尝试上述代码片段。
2. 探索 – 查找其他数组辅助方法，如 some()、every()、find() 和 flatMap()。
3. 提问 – 如有不明之处，请在下方留言提问。

祝编码愉快！ 🚀