几分钟内提升技能的8个 JavaScript 方法

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

我们今天构建的大多数应用程序都需要进行某种数据收集修改。您最常遇到的常见操作是处理集合中的项。不要再使用 for-loop 循环的传统方式（ let i=0; i < value.length; i++ ）。

请注意，在 for 循环中使用 const 会报一个错误。原因是因为它在每次执行期间重新赋值，因此 i 被 i++ 修改。所以每当你想到使用 const 或 let 时，问问自己 – 这个值会被重新声明吗？如果答案是肯定的，请选择 let ，如果不是，请选择 const 。 更多信息 。

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

也许你不喜欢箭头功能，你不想花太多时间学习新东西，或者它们与你无关。放心，并不是只有你这样。我将向您展示如何在 ES5（普通函数）和 ES6（箭头功能）中实现。

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

我们将要关注的方法有：

1. Spread operator（展开操作符）
2. for…of 迭代器
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

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

1. Spread operator（展开操作符）

Spread operator（展开操作符）将数组展开为其对应的元素。它也可以用于对象字面量。

为什么我应该用它呢？

...

示例：

假如你想展示一个喜爱的水果列表，但不是通过一个循环函数的方式。你可以用一个扩展操作符，像这样：

const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];
console.log(...favoriteFood);
//Pizza Fries Swedish-meatballs

2. for…of 迭代器

for...of 语句循环/遍历集合，为你提供了修改特定元素的功能。 它取代传统的 for-loop 方式。

为什么我应该用它呢？

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

示例：

假设你有一个 工具 箱，你想要展示里面所有的工具。 for...of 迭代器会让它变得更简单。

const toolBox = ['Hammer', 'Screwdriver', 'Ruler']
for(const item of toolBox) {
console.log(item)
}
// Hammer
// Screwdriver
// Ruler

3. Includes() 方法

include() 方法被用来检查数集合中是否包含指定的元素，如果存在则返回 true ，否则返回 false 。 请记住，它是区分大小写的：如果集合中的某项元素是 SCHOOL ，并且但你查询的是 school ，那么它将会返回 false 。

为什么我应该用它呢？

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

示例：

比如，无论出于什么原因，你不知道车库里有什么车，你需要一个系统检查你想要的车是否在车库里。 includes() 可以拯救你！

const garge = ['BMW', 'AUDI', 'VOLVO'];
const findCar = garge.includes('BMW');
console.log(findCar);
// true

4. Some() 方法

some() 方法检查在数组中是否存在某些元素，如果存在返回 true ，否则返回 false 。这和 includes() 方法相似，但是 some() 方法的参数是一个函数，而不是一个字符串。

为什么我应该用它呢？

• 它确保某些项目通过测试
• 它使用函数执行条件语句
• 使您的代码更具声明性
• 它足够好用

示例：

假如你是一个俱乐部老板，并不在乎谁进入这俱乐部吧。但是有些人是不允许进来的，因为他们已经喝了很多酒（我的想象力很好）。查看以下 ES5 和 ES6 之间的差异：

ES5:

const age = [16, 14, 18];
age.some(function(person) {
return person >= 18;
});
// Output: true

ES6:

const age = [16, 14, 18];
age.some((person) => person >= 18);
// true

5. Every() 方法

every() 方法循环遍历数组，检查数组中的每个元素项，并返回 true 或 false 。与 some() 概念相似。但是每一项都必须通过条件表达式，否则返回 false 。

为什么我应该用它呢？

• 它确保每个项目都通过测试
• 您可以使用函数执行条件语句
• 使您的代码更具声明性

示例：

上次你用 some() 方法允许一些未成年学生进入俱乐部，有人举报了这事，警察抓住了你。这次你不会让这种情况再次发生，你将用 every() 方法确保每一个进来俱乐部的人都是满足年龄限制的。

ES5:

const age = [15, 20, 19];
age.every(function(person) {
return person >= 18;
})
// Output: false

ES6:

const age = [15, 20, 19];
age.every((person)=> person >= 18);
// false

6. Filter() 方法

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

为什么我应该用它呢？

• 你可以修改原始数组
• 你可以让你过滤掉那些你不需要的元素项
• 让你的代码可读性更高

示例：

假如你只想要大于或者等于30的价格，过滤掉其他价格。

ES5:

//array
const prices = [25, 30, 15, 55, 40, 10];
prices.filter(function(price){
return price >= 30;
})
// Output: [30, 55, 40]

ES6:

const prices = [25, 30, 15, 55, 40, 10];
prices.filter((price) => price >= 30);
// [30, 55, 40]

7. Map() 方法

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

为什么我应该用它呢？

• 它可以让你避免对原始数组进行修改
• 你可以修改你所需的元素项
• 代码可读性更高

示例：

假如你有一份价格清单。 您的经理需要一个清单，以便展示在税率增加25％后的新价格。 map() 方法可以帮助你。

ES5:

const productPriceList = [200, 356, 1500, 5000];
productPriceList.map(function(item){
return item * 0.75;
})
// [150, 267, 1125, 3750]

ES6:

const productPriceList = [200, 356, 1500, 5000];
productPriceList.map((item) => item * 0.75);
// [150, 267, 1125, 3750]

8. Reduce() 方法

reduce() 方法可用于将数组转换为其他内容，可以是整数，对象，promises 链（顺序执行的promises）等等。出于实际原因，一个简单的用例是对整数列表求和。简而言之，它将整个数组“缩短”为一个你想要的值。

为什么我应该用它呢？

• 执行计算
• 计算一个值
• 计算重复数
• 按属性分组对象
• 按顺序执行promises
• 这是一种快速执行计算的方法

示例：

假如你想得到这一周的消费总和， reduce() 可以帮你实。

ES5:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce(function(first, last) {
return first + last;
})
// 8530

ES6:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce((first, last) => first + last);
// 8530

希望你的 JavaScript 技能有所提升！

英文原文： https://medium.freecodecamp.org/7-javascript-methods-that-will-boost-your-skills-in-less-than-8-minutes-4cc4c3dca03f