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

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

请注意，在 for 循环中使用 const 会报一个错误。缘由是由于它在每次执行期间从新赋值，所以 i 被 i++ 修改。因此每当你想到使用 const 或 let 时，问问本身 – 这个值会被从新声明吗？若是答案是确定的，请选择 let ，若是不是，请选择 const 。

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

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

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

咱们将要关注的方法有：

Spread operator（展开操做符）

for…of 迭代器

includes()

some()

every()

filter()

map()

reduce()

若是您想成为更好的Web开发人员，开始本身的事业，教别人或提升您的开发技能，我将每周发布最新的关于 Web 开发语言的技术和技巧。

1. Spread operator（展开操做符）

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

为何我应该用它呢？

• 这是一种简单且快速的方式来列出数组元素
• 同时适用于数组和对象
• 这是一种快速直观的传递参数的方法
• 它只须要三个点 ...

示例：

假如你想展现一个喜好的水果列表，但不是经过一个循环函数的方式。你能够用一个扩展操做符，像这样：

JavaScript 代码:

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 迭代器会让它变得更简单。

JavaScript 代码:

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() 能够拯救你！

JavaScript 代码:

const garge = ['BMW', 'AUDI', 'VOLVO'];

const findCar = garge.includes('BMW');

console.log(findCar);

// true

4. Some() 方法

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

为何我应该用它呢？

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

示例：

假如你是一个俱乐部老板，并不在意谁进入这俱乐部吧。可是有些人是不容许进来的，由于他们已经喝了不少酒（个人想象力很好）。查看如下 ES5 和 ES6 之间的差别：

ES5:

JavaScript 代码:

const age = [16, 14, 18];

age.some(function(person) {

return person >= 18;

});

// Output: true

ES6:

JavaScript 代码:

const age = [16, 14, 18];

age.some((person) => person >= 18);

// true

5. Every() 方法

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

为何我应该用它呢？

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

示例：

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

ES5:

JavaScript 代码:

const age = [15, 20, 19];

age.every(function(person) {

return person >= 18;

})

// Output: false

ES6:

JavaScript 代码:

const age = [15, 20, 19];

age.every((person)=> person >= 18);

// false

6. Filter() 方法

filter() 方法建立一个包含全部经过测试的元素的新数组。

为何我应该用它呢？

• 你能够修改原始数组
• 你可让你过滤掉那些你不须要的元素项
• 让你的代码可读性更高
• 示例：

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

ES5:

JavaScript 代码:

//array

const prices = [25, 30, 15, 55, 40, 10];

prices.filter(function(price){

return price >= 30;

})

// Output: [30, 55, 40]

ES6:

JavaScript 代码:

const prices = [25, 30, 15, 55, 40, 10];

prices.filter((price) => price >= 30);

// [30, 55, 40]

7. Map() 方法

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

为何我应该用它呢？

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

示例：

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

ES5:

JavaScript 代码:

const productPriceList = [200, 356, 1500, 5000];

productPriceList.map(function(item){

return item * 0.75;

})

// [150, 267, 1125, 3750]

ES6:

JavaScript 代码:

const productPriceList = [200, 356, 1500, 5000];

productPriceList.map((item) => item * 0.75);

// [150, 267, 1125, 3750]

8. Reduce() 方法

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

为何我应该用它呢？

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

示例：

假如你想获得这一周的消费总和，reduce()能够帮你实。

ES5:

JavaScript 代码:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpenses.reduce(function(first, last) {

return first + last;

})

// 8530

ES6:

JavaScript 代码:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpenses.reduce((first, last) => first + last);

// 8530

但愿你的 JavaScript 技能有所提高！

原文连接：https://www.jianshu.com/p/22f796df053c