[译]这些Javascript方法几分钟内提升你的技能

原文地址： These JavaScript methods will boost your skills in just a few minutes

我们今天构建的大多数应用程序都需要进行某种数据收集修改。会经常遇到对集合中的项进行处理。忘记 for 循环传统方式 (let i=0; i < value.length; i++ ) 。

注意，在 使用 for-loop 时 const 报出一个错误。是因为它在每次执行期间重新声明了值，因此 i 被 i++ 修改了。所以每当你想到使用 const 或者 let 时考虑一下 - 这个值会被重新声明吗？如果答案是肯定的，请选择 let ，如果不是，请选择 const 。 更多信息 。

假设您要显示产品列表并对集合进行分类，过滤，搜索，修改或更新。或者您可能希望执行快速计算，例如求和，乘法等。实现这一目标的最佳方法是什么？

也许你不喜欢 箭头函数 ，不想花太多时间学习新东西，或者它们与你无关。别担心，我将向您展示如何在ES5（功能降级）和ES6（箭头函数）中完成它。

请注意：箭头函数和函数声明/表达式 不是等效 的，不能盲目替换。请注意， this 关键字在两者之间的工作方式不同。

我们将要关注的方法：

1. Spread operator
2. for…of iterator
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

如果您想成为更好的Web开发人员，开始自己的事业，教别人或提高您的开发技能，我将每周发布关于最新Web开发语言的技巧和窍门。

Spread operator

Spread Operator 将数组扩展为其元素。它也可以用于对象字面量。

为什么要用它？

• 这是一种简单快速的方式来显示数组的项
• 适用于数组和对象字面量
• 这是一种快速直观的传递参数的方法
• 它只需要上面三个原因就足以说明问题了......

示例：

假设您想显示喜欢的食物列表而不想创建循环函数。可以使用这样的 Spread operator ：

for ... of iterator

for...of 语句循环/遍历集合，并为您提供修改特定项的功能。它取代了传统的 for-loop 做法。

为什么要用它？

• 这是添加或更新元素的简单方法
• 执行计算（求和，乘法等）
• 使用条件语句时（if，while，switch等）
• 干净和可读的代码

示例：

假设您有一个 工具 箱，并且要显示其中的所有工具。 for...of 迭代器很容易实现。

Includes()

includes() 方法用于检查集合中是否存在特定字符串，并返回 true 或 false 。请记住，它区分大小写：如果集合中的项目是 SCHOOL ，而您搜索 school ，它将返回 false 。

我为什么要用它？

• 构建简单的搜索功能
• 这是一种确定字符串是否存在的直观方法
• 使用条件语句来修改，过滤等
• 可读代码

示例：

假设您不知道车库中有哪些车辆，您需要一个系统来检查您想要的车是否存在。includes()来完成！

Some()

some() 方法检查数组中是否存在某些元素，并返回 true 或 false 。这有点类似于 includes() 方法的概念，除了参数是函数而不是字符串。

为什么要用它？

• 确保某些项目通过测试
• 使用函数执行条件语句
• 使代码1清晰

示例：

假设您是俱乐部老板，并不关心谁进入俱乐部。但有些人不允许进入，因为他们喝得太多。查看以下ES5和ES6之间的差异：

ES5：

ES6：

Every()

every() 方法遍历数组，检查每个项，并返回 true 或 false 。概念和 some() 相同。除了每个项必须满足条件语句，否则它将返回 false 。

我为什么要用它？

• 确保每个项都通过测试
• 可以使用函数执行条件语句
• 使您的代码清晰

示例：

最后一次允许 some() 未成年学生进入俱乐部时，有人报告此事并且警察抓住了您。这次你不会让这种情况发生，你将确保每个人 every() 都通过了年龄限制。

ES5

ES6

Filter()

filter() 方法创建一个包含所有通过条件的元素的新数组。

我为什么要用它？

• 可以避免更改原数组
• 可以过滤掉不需要的项
• 提供更易读的代码

示例：

假设想返回高于或等于 30 的价格。过滤掉所有其他价格......

ES5

ES6

Map()

map() 方法在返回新数组方面类似于 filter() 方法。但是，唯一的区别是它用于修改项。

我为什么要用它？

• 可以避免对原数组进行更改
• 可以修改所需的项
• 提供更易读的代码

示例：

假设有一个包含价格的产品列表。经理需要一个清单，以便在税率增加 25％ 后显示新价格。 map() 方法可以完成。

ES5

ES6

ES6