这些JavaScript方法将会在几分钟内提高你的技能

文章首次发表在：https://segmentfault.com/a/1190000014913511

这些JavaScript方法将会在几分钟内提高你的技能

现在创建的大多数应用都会需要对一些数据集合做修改。处理集合中的元素是你最可能遇到的操作。不要再使用常规的像是(const i; i < value.length; i++ )的for-loop方式。
如果你想要展示一个商品列表，并且对这个数据集合做分类、筛选、搜索、修改和更新。或者你想做一些快速计算比如求和，相乘等等。实现这些操作的最佳方式是什么？
可能你不喜欢箭头函数，你也不想花费太多时间去学习这些新东西，或者它们跟你没有关系。放心，并不是只有你这样。我会同时在ES5（普通函数）和ES6（箭头函数）中展示给你看怎么实现。
注意：箭头函数和函数声明/表达式不是等价的，而且也不能盲目替换。你要记得this关键字在两者之间的作用不一样的。

这些方法将会被使用

1. Spread operator（扩展运算符，三个点）
2. for…of iterator
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

1. 扩展操作符

扩展运算符用于把一个数组展开变为一个数组元素序列（一系列逗号隔开的值）。也可以展开对象字面量。

为什么我应该用它？

• 简单且快速的方式列出数组元素
• 同时用于数组和对象
• 快速且直观的方式传递参数
• 只需要写三个点

例子：

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

const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];

console.log(...favoriteFood);
//Pizza Fries Swedish-meatballs

2. for…of 迭代器

for...of利用循环/迭代器表达式遍历集合，为你提供了修改特定元素的能力。它可以替代常规的for-loop方式。

为什么我应该用它？

• 一种简单的方式添加、更新一个元素
• 执行计算（累加、相乘）
• 代码简单，可读性高

例子：

如果你有一个工具箱，你想要展示里面所有的工具。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方法有几分相似，但是参数是一个函数，而不是一个字符串。

为什么我应该用它？

• 可以确保某些项测试通过
• 用函数执行条件表达式
• 使你的代码更直观
• 它非常好用

例子：

假如你是一个酒吧老板，也不在乎谁进入这家酒吧。但是某些人是不允许进来的，因为他们已经喝了很多酒了。下面分别用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()方法用来把一个数组转化为一个int值，一个对象，一个promises串（顺序执行的promises）等等。实际上，一个简单的用例就是对一系列int值求和。简单来说，它就是把数组中的所有值最终”缩短”为一个值。

为什么我应该用它？

• 合并计算为一个值
• 重复执行计算
• 把对象按照属性分组
• 顺序执行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

原文链接：These JavaScript methods will boost your skills in just a few minutes