每个初学者都应该知道的基本 JavaScript 方法

JavaScript 就像编程中的瑞士军刀 - 它用途广泛、必不可少，并且包含您不知道自己需要的工具。但作为初学者，很容易陷入循环并被长而重复的代码淹没。想象一下尝试在杂乱的工具箱中手动搜索项目 - 乏味，对吧？

这就是 JavaScript 方法的用武之地。这些内置工具可让您轻松操作数组、过滤数据和简化复杂的任务。将它们视为节省您时间和精力的捷径，将杂乱的代码变成干净高效的代码。

在本文中，我们将探讨五个基本的 JavaScript 方法：map()、filter()、reduce()、forEach() 和 find()。掌握这些将使您的代码更清晰、更快并且编写起来更有趣。

“编程不是你所知道的；而是你所知道的。这是关于你能弄清楚什么。” – 克里斯·派恩。

1.map()——转换数组

它的作用：
将 map() 视为一个个人助理，它接受待办事项列表，为每个项目执行任务，然后为您提供一个包含结果的新列表。它非常适合在不触及原始数据的情况下转换数据。

想象一下您有一堆空白 T 恤，您想在所有这些 T 恤上打印设计。您无需更改原始堆栈，而是使用应用的设计创建一个新堆栈。这就是 map() 的工作原理——它将一个函数应用于每个项目并为您提供一个新数组。

示例：
以下是如何使用 map() 将数组中的每个数字加倍：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

细分：

• number：原始数组保持不变。
• num * 2：应用于每个元素的函数。
• doubled：具有转换值的新数组。

实际用例：
假设您有一个以美​​元表示的产品价格列表，并且您想将它们转换为另一种货币。使用map()，可以一步完成转换。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

为什么有用：
map() 可以帮助您避免重复的任务并保持代码整洁。此方法不使用循环来操作数组，而是为您完成繁重的工作。

永远记住map()创建一个新数组。如果您希望就地修改数据，那么这不是适合该工作的工具。

2.filter()——选择特定项目

它的作用：
filter() 创建一个仅包含满足特定条件的元素的新数组。可以把它想象成俱乐部的保镖，只让符合条件的人进入。

想象一下，您正在整理衣柜，只留下最适合您的衣服。 filter() 可以帮助您只选择您需要的内容，而忽略其余的内容 - 简单而高效。

示例：
让我们从数组中过滤掉偶数：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

细分：

• number：原始数组保持不变。
• 条件： num % 2 !== 0 检查数字是否为奇数。
• 结果： 使用过滤后的值创建一个新数组 oddNumbers。

实际用例：
假设您正在管理产品列表，并且您想要过滤掉缺货的商品。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

何时使用：

• 仅从数据集中提取相关数据。
• 仅处理您需要的内容，从而简化流程。

为什么初学者喜欢它：
与循环不同，filter() 很简单。它减少了出错的机会，您可以用更少的代码实现更多目标。

3.reduce()——聚合数据

假设，您在杂货店收银台，收银员正在将所有商品的价格相加，得出总价。这正是 reduce() 的工作原理 - 它将数组中的所有元素组合成一个值，例如总和、乘积或任何自定义结果。

它的作用：
reduce() 逐个元素处理数组，并根据您定义的函数将其缩减为单个输出值。

示例：
让我们计算一个数组的总和：

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

细分：

• 累加器：跟踪正在进行的总计（从 0 开始）。
• currentValue：指正在处理的数组中的当前项。
• 结果：将所有数字合并为一个总和。

实际用例：
假设您正在构建一个在线购物车。您需要计算用户选择的所有商品的总成本。

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

为什么特别：
reduce() 不仅仅适用于数字，您还可以用它来：

• 组合字符串。
• 展平数组。
• 动态构建对象。

有趣的转折：
让我们发挥创意吧！您可以使用reduce()来计算每个字母在单词中出现的次数：

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

为什么初学者应该学习它：
虽然reduce()一开始可能感觉有点高级，但掌握它可以为简化复杂操作带来无限的可能性。阵法就像瑞士军刀，用途广泛，威力强大。

“先解决问题。然后，写代码。” – 约翰·约翰逊。
使用reduce()，您可以使用优雅、最少的代码高效地解决问题。

4. forEach()——数组的友好主力

让我们设置场景：
将自己想象成厨房里的厨师，正在准备几道菜。您检查清单中的每种成分，根据需要切碎、切丁或调味。您不会更改成分列表本身 - 您只是对每个项目执行一个操作。这正是 forEach() 所做的。

它的作用：
forEach() 允许您循环遍历数组并为每个元素执行一个函数。与map()或filter()不同，它不返回新数组——它只是执行操作。

示例：
让我们打印列表中的每个水果：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

这里发生了什么：

• 输入： 水果数组。
• 操作： 该函数会为每种水果记录一条个性化消息。
• 结果： 没有创建新数组 - 它只是执行操作。

实际用例：
假设您正在管理任务列表并希望将它们记录为“已完成”：

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

为什么它与其他方法不同：
与创建新数组的 map() 不同，forEach() 仅关注副作用 - 不产生直接结果但修改数组外部的内容或与数组外部的内容交互的操作。

例如：

• 为列表中的每个项目发送 API 请求。
• 更新元素列表的 DOM。
• 将值记录到控制台。

何时使用：

• 在以下情况下使用 forEach()：
• 您只想迭代一个数组。
• 您需要执行操作而不需要新数组。

初学者应该注意什么：
由于 forEach() 不返回任何内容，因此它不适合链接操作。如果您需要转换后的数组，请坚持使用map()或filter()。

创意示例：
让我们向列表中的每个客户发送一封感谢电子邮件（只是模拟）：

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

为什么初学者喜欢它：
forEach() 简单直观。这是学习如何有效使用数组的第一步。

记住这一点：“代码简单并不是没有复杂性，而是掌握复杂性的艺术。”
forEach() 是您第一个以简单方式处理复杂性的工具。

5. find() – 发现第一个匹配项

你正在拿着地图寻宝，线索说：“找到森林里的第一枚金币。”你开始寻找，但当你发现第一枚硬币在树下闪闪发光时，你就停下来了。你已经找到了你需要的东西，其余的硬币并不重要。这正是 find() 的工作原理——它帮助您找到数组中与您的条件匹配的第一个项目，并停止查找该项目。

它的作用：
find() 扫描数组并返回满足函数中条件的第一个元素。如果未找到匹配项，则返回未定义。

代码示例：
让我们找到第一个大于 20 的数字：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

发生了什么：

• 条件数>每个元素检查 20。
• 一旦 25 满足条件，搜索停止，返回 25。
• 第一次匹配后不再检查任何元素。

将 find() 想象成一次寻宝游戏，你被告知“找到第一朵红花”。你不会收集每一朵红花（这就是 filter() 所做的）。相反，你一看到一个就停下来大喊：“明白了！”

实际用例：
假设您正在管理一个联系人列表，并且想要查找具有特定电子邮件地址的第一个人。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

为什么初学者喜欢它：
find() 使用简单，当您只需要一个结果时可以节省时间。这就像在黑暗的房间里用手电筒寻找单个物体一样——它不会试图照亮整个房间。

创意示例：
让我们把它带到电子商务的世界。假设您有一个产品列表，并且您想找到第一个正在促销的产品。

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

处理边缘情况：
如果没有商品符合您的条件怎么办？不用担心，find() 将返回未定义的结果。您可以通过后备方式优雅地处理这个问题：

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

为什么 find() 如此强大：

• 效率：一旦找到第一个匹配就停止。
• 清晰度：使代码中的意图清晰 - 搜索单个项目。
• 实际使用：非常适合在大型数据集中定位单个用户、产品或数据点。

结论

JavaScript 是一个强大的工具，这五个方法——map()、filter()、reduce()、forEach() 和 find()——是释放其真正潜力的关键。它们可以帮助您编写更干净、更高效的代码，同时使您免于无休止的循环和冗余任务。将它们视为开发人员工具箱中的瑞士军刀：多功能、可靠，旨在让您的生活更轻松。

掌握这些方法不仅仅是学习语法，而是像程序员一样思考。无论您是使用 map() 转换数据、使用 filter() 滤除噪音、使用 reduce() 求和、使用 forEach() 无缝迭代，还是使用 find() 查找隐藏的宝石，您都在构建技能将使您的代码更加专业和有影响力。

请记住，编码的魔力并不在于编写又长又复杂的程序，而在于为日常问题找到优雅的解决方案。从小事做起：选择一种方法，进行试验，然后在下一个项目中尝试。你练习得越多，这些方法就越像是你的第二天性。

“最好的代码是你不需要解释的代码。” – 马丁·福勒
使用这些方法来编写不言而喻的代码。

请在评论中告诉我你的想法！您在项目中使用过这些方法吗？我很想听听你的经历。

本文最初发布于 Hashnode

以上是每个初学者都应该知道的基本 JavaScript 方法的详细内容。更多信息请关注PHP中文网其他相关文章！