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

现如今，我们构建大多数应用程序时都需要对一些数据集合进行修改。处理集合中的项目是你很可能遇到的常见操作。忘记常规的for循环方式吧

假如你想要展示一个产品列表，并对集合进行分类、筛选、搜索、修改或更新。或者你想做一些快速计算，比如：求和，相乘等等。那么达到这个目的的最佳方式是什么呢?

也许你不喜欢箭头函数，不想化太多时间去学习新东西，或者它们与你无关。 别担心，你并不孤单。我将想你展示如何使用ES5和ES6 两种方法去完成。

注意： 箭头函数和函数表达式/函数声明 并不完全相等，不能盲目地替换它们，请记住， 关键字在两者之间的作用不同。

我们将会看到的方法:

1. 展开运算符（Spread operator）

2. 循环

1. 展开运算符（Spread operator）

扩展运算符用于将数组项展开。扩展运算允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

我们为什么要用它?

简单快速的显示数组项

它适用于数组和对象

快速直观的来传递参数

它只需要三个点

例子：

假如你想显示一个最喜欢的食物列表，而不需要创建一个循环函数。我们可以像这样使用扩展操作符:

2. for…of 循环

for...of 语句用来循环/遍历集合，并为你提供修改特定项目的能力。 它取代了传统的 方式

我们为什么要用它?

这是添加或更新项目的简单方法

执行计算(求和、乘法等)

使用条件语句时（ ， ， 等）

代码清晰易读

例子：

假如你有一个工具箱，你想要显示里面所有的工具。 迭代器使它变更简单。

3. includes() 方法

方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 ，否则返回 。请记住：它是区分大小写的，如果集合中的值为 ，并且你搜索 ，它将返回

我们为什么要用它?

构建简单的搜索功能

这是一种直观的方法来确定字符串是否存在。

它可以使用条件语句来修改、过滤等

代码清晰易读

例子:

比如说，无论出于什么原因，您都不知道车库里有什么车，而且你需要一个系统来检查您想要的车是否存在。 就能拯救你！

4. some() 方法

方法测试数组中的某些元素是否通过测试。 它用来检查数组中是否存在某些元素，并返回 或 。这与 方法的概念有些相似，不过参数是一个函数而不是一个字符串。

我们为什么要用它?

它确保某些项目通过测试

它使用函数执行条件语句

使代码更可读

真的很好用

例子:

假设你是一个俱乐部老板，并不关心谁进入俱乐部。但有些人不允许进来，因为他们喝得太多了（我的创造力最棒了）。查看下面ES5和ES6的区别：

ES5:

ES6:

5. every() 方法

方法测试数组的所有元素是否都通过了指定函数的测试。 它遍历数组，检查每个项目，并返回true或false。与some() 方法差不多。但是每个项目必须满足条件语句，否则它将返回false。

我们为什么要用它?

它确保每个项目都通过测试。

可以使用函数执行条件语句。

使代码更可读

例子:

你最后一次允许一些（ ）未成年学生进入俱乐部，有人报告了这事，警方逮捕了你。这一次你不会让这种情况发生，你要确保每个人都通过 运算符来通过年龄限制。

ES5:

ES6:

6. filter() 方法

方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

我们为什么要用它?

可以避免改变原数组

方便的过滤掉你不需要的东西

为你提供更可读的代码

例子:

假设你想只返回高于或等于30的价格。过滤掉所有其他的价格…

ES5:

ES6:

7. map() 方法

方法与 方法类似，用于返回一个新数组。但是，唯一的区别是它用于修改数组中的项目

我们为什么要用它?

避免对主数组进行更改。

可以方便修改你想要的项目。

为你提供更可读的代码

例子:

假如你有一个产品的价格表，但是你的经理需要一份新的价格表，因为它们已经被征税了25%。 方法可以帮助到你。

ES5:

ES6:

8. reduce() 方法

方法可以用来将一个数组转换成其他的东西，它可以是一个整数、一个对象、一个Primose等等。简而言之，它将整个数组 "reduce" 为一个值

我们为什么要用它?

计算数组里所有值的和或相乘

计算数组中每个元素出现的次数

按属性分组对象

依次执行 Promise

这是执行计算的快速方法

例子:

假设你想知道一周的总花费，可以使用 来得到结果

ES5:

ES6:

如果你喜欢这篇文章，记得请点赞 ❤️分享哟！你的支持是我创作的动力。

原文 | http://suo.im/5bIW7N

意译