目前绝大多数的软件都会涉及数据收集和处理，在日常工作里，处理数组是再平常不过了的操作。忘掉 for 循环吧，别再使用老套的 (let i=0; i < value.length; i++ ) 了。

小提示：如果在  for 循环中使用了 const  ，你会被报错。因为在循环的时候， i 会递增，被 "i++" 重新赋值，所以每次在 let 和 const 之间犹豫不决的时候，你就问自己这个问题：这个值会不会被重新赋值？如果会，就选择 let；如果不会，就选择 const。 更多

打个比方，你需要展示一系列产品，并且对数组进行分类、筛选、修改、更新等操作，又或者说你需要对数组做一些简单的计算，比如加法乘法等等。那么，要怎么操作才是上策呢？

可能你听到箭头函数就摇头，可能你不是一个喜欢花很多时间学新东西的人，可能你觉得这些都与你无关，相信我，你不是唯一一个这样想的人。接下来请先看我用 ES5（普通函数） 和 ES6（箭头函数）来实现这些操作。

注意： 箭头函数和普通函数不完全是一回事儿，不能随意相互替换改写，记住，关键词 this 在箭头函数和普通函数里是两个不同的东西。

本文涉及到的 JavaScript 方法列表：

  1. 展开操作符
  2. for…of 循环
  3. includes()
  4. some()
  5. every()
  6. filter()
  7. map()
  8. reduce()
如果你想成为一名更好的 Web 开发者，或者是开创自己的事业，或者是教他人编程，抑或是想要精进自身的编程能力，请关注我的周更系列，我会分享关于最新 Web 开发语言的技巧要点。

1. 展开操作符

展开操作符能用来将数组 (array) 内的元素展开 ，也可以用在对象常量 (object literals) 里。

使用展开操作符的好处有哪些？

  • 是一个展示数组元素的简单、直接的方式
  • 适用于数组 (array) 和对象常量 (object literals)
  • 是一个传递参数的快速、直接的方式
  • 只用写三个点…

举个例子: 不写循环来展示最喜欢的食物列表中的元素，通过展开操作符来实现：

image

2. for…of 循环

for...of 语句可以用来遍历数组，也可以用来改写元素，可以基本替换传统的 for-loop 循环。

使用 for…of 循环的好处有哪些？

  • 是一个更新元素的简单方式
  • 可以用来完成加法乘法等计算操作
  • 可以和条件语句配合使用，比如 if，while，switch 等
  • 写出简洁优雅的代码

举个例子： 你想展示工具箱里的工具，那么就可以使用 for...of 循环语句来轻松实现。

image-1
for...of 语句

3. Includes() 方法

includes() 方法用于检查一个数组中是否含有某个字段，会返回 true 或者 false值。用来检验的字段要注意大小写，如果你得检验字段是 school，而数组中只有  SCHOOL，那么返回值就是 false。

使用 includes() 的好处有哪些？

  • 是一个简易的搜索功能
  • 是一个快速判断某字段是否存在的简洁方式
  • 可以使用条件语句来进行修改、筛选等操作
  • 写出可读性更强的代码

举个例子：假设你想不起你车库里存放着哪些车了，你需要一个系统来帮你判断你想要的车存不存在，那么 includes() 可以帮到你！

image-2
带箭头函数的 includes()

4. Some() 方法

some() 方法用来检验数组中是否存在某些元素，返回值为 true 或者 false ，和 includes() 方法的一些核心思想很相近，但是必须注意的是，传进 some()方法里的参数必须是函数，而不能是字符串。

使用 some() 的好处有哪些？

  • 用来验证数组中是否有元素满足检验条件
  • 以函数形式来做条件判定
  • 陈述式代码
  • 检验有无即可

举个例子： 打个比方，你是一家俱乐部的老板，你不想限制客人进店，但对于明显喝多了的客人你不想让他们进来（原谅我贫瘠的想象力）。下面看看如何用 ES5 和 ES6 写这个函数：

ES5:

image-3
some() 方法

ES6:

image-4
带箭头函数的 some() 方法

5. Every() 方法

用 every() 来遍历数组，挨个元素检查，最后返回  true 或者 false值，和 some() 的核心思想是一样的，不同点在于一旦有某个元素不满足检验条件，返回值即为  false 。

使用 every() 的好处有哪些？

  • 用来验证数组中是否所有元素都满足检验条件
  • 以函数形式来做条件判定
  • 陈述式代码

举个例子： 上次你用 some() 方法，让一些年龄不满的学生混进来了，结果被人举报，警察找上了门。所以，这次你要用 every() 来做检验，保证每一个人都满足年龄要求，才能进俱乐部。

ES5

image-5
every() 方法

ES6

image-6
带箭头函数的 every() 方法

6. Filter() 方法

filter() 会将通过检验条件的所有元素放进一个新的数组。

使用 filter() 的好处有哪些？

  • 不会改动原始数组
  • 剔除掉不需要的元素
  • 可读性更强的代码

举个例子： 你只想要价格等于 30 或者 30 以上的，其他的价格剔除掉...

ES5

image-7
filter()

ES6

image-8
带箭头函数的 filter()

7. Map() 方法

和  filter() 一样，map() 也会返回一个新的数组，但不同的是，map() 可以用来修改元素。

使用 map() 的好处有哪些？

  • 不会改动原始数组
  • 修改数组内元素
  • 可读性更强的代码

举个例子： 你手头上有一些产品的价格，经理要求你把加 25% 税后的价格报给他，这个时候你就可以使用  map() 方法。

ES5

image-9
map()

ES6

image-10
带箭头函数的 map()

8. Reduce() 方法

reduce() 可以将一个数组变成一个数字，一个对象，一系列 promises 等。一个使用 reduce() 的简易场景就是将一系列数字相加求和，将一个数组“浓缩”成一个数值。

使用 reduce() 的好处有哪些？

  • 进行计算操作
  • 求值
  • 重复值数量计数
  • 按照属性对对象进行分组
  • 按顺序执行 promises
  • 快速计算

举个例子： 你想知道这一周花了多少钱，你可以使用 reduce() 求值。

ES5

image-11
reduce()

ES6

image-12
带箭头函数的 reduce()

原文链接：These JavaScript methods will boost your skills in just a few minutes，作者：Dler Ari