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

这些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