为新手准备的带示例的ES6

题图：by Kaique Rocha from Pexels

译 | 流口水流

文 | Srebalaji Thirumalai

原文 | https://dev.to/srebalaji/es6-for-beginners-with-example-c7

在这篇文章中，我将介绍ES6中的一些新特性。如果你是刚学ES6或者在学习前端框架，这将是很有帮助的。

我将在这篇文章中讨论的知识点：

1. 和

2.箭头函数

3.默认参数

4. 循环

5.rest参数与扩展运算符

6.

7.

8.静态方法

9.取值函数（getter）和存值函数（setter）

Let

的用法类似于 ，但是所声明的变量只在 命令所在的代码块内有效。

在上面的例子中，变量·a是在 语句中定义的，因此在函数之外是不可访问的。

再看个例子：

Const

声明一个只读的常量。一旦声明，常量的值就不能改变。

这个例子可能有点令人困惑。

我们这样考虑。无论何时定义const变量，Javascript都引用该变量的值的地址。 实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址不得改动，在我们的示例中，变量 实际上引用了分配给数组的内存。在整个程序中，它只引用了数组。

箭头函数

ES6中的函数在语法上带来了一些小变化。

这个新的语法可能有点混乱，但是我会试着解释一下。

这个语法可以分为两部分。

第一部分只是声明一个变量并为其分配函数。它看起来是变量实际上是一个函数。

然后第二部分是声明函数的正文部分。带大括号的箭头部分定义函数体。

来看个带参数的例子

我认为我不需要对此做出解释，它很简单。

默认参数

如果您熟悉Ruby、Python等其他编程语言，那么默认参数对你来说并不陌生。

默认参数是在声明函数时默认给出的参数。但当调用函数时，它的值可以被改变。

例子：

在上面的例子中，我们只传递一个参数，该函数使用了默认参数并执行该函数。

思考下另一个例子

在上面的示例中，函数接受两个参数，第二个参数替换了默认参数。

再看一个例子

当你用参数调用函数时，它们会按顺序被分配。即第一个值被赋给第一个参数，第二个值被赋给第二个参数，以此类推。

在上面的例子中，值20被分配给参数“a”，而“b”没有任何值。所以我们没有得到任何输出。

但是

正常运行

For of 循环

与 非常相似，有细微的不同。

循环遍历元素列表(例如数组)，并逐个返回元素(不是索引)。

注意：变量 value 输出数组中的每个元素而不是索引。

另一个例子：

当然，它也适用于字符串。

rest参数与扩展运算符

翻看ES6代码，很多时候都会看到三个点( )的存在,它在ES6语法中，有两种应用形式，分别为函数中的rest参数，以及扩展运算符。扩展运算符（spread）是三个点（ ）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

未使用rest参数：

上面的例子很简单。我们声明一个函数接受数组作为参数并返回其和。

现在看看使用rest参数的相同示例。

在上面的例子中，rest参数将元素列表(即参数)转换为数组。

来来看另一个例子

是一个从给定列表中返回最大元素的简单方法。它不接受数组。

让我们用我们的扩展运算符

在上面的例子中，展开运算符将数组转换为元素列表。

Maps

它类似于数组，但我们可以定义自己的索引。索引在 上是独一无二的。

示例:

我认为上面的例子是不言自明的。

的其他有趣的特征是所有的索引都是唯一的。我们可以使用任何值作为键值或值。

示例:

在上面的示例中，map.keys()返回映射的键，但只返回的是Iterator对象。也就是说它不能被显示出来，它应该只通过迭代来显示。

看看另一个例子:

上面的例子是不言而喻的。 循环输出数组中的键值对。

我们可以稍微优化一下。

Sets

示例

注意，没有显示重复的值。只显示唯一的值。

还要注意，集合是可迭代的对象。我们必须遍历元素来显示它。

其他有用的方法:

在上面的例子中， 是不言自明的。还有一种方法 它根据给定的元素是否存在于集合中返回一个布尔值。

静态方法

你们大多数人已经听说过静态方法。静态方法是在ES6中引入的。很容易定义和使用它。

示例:

注意：我没有在类中使用关键字

我可以调用函数而不为类创建任何实例。

Getters 和 Setters

Getters和setters是ES6中引入的一个有用的特性。如果你使用的是JS的类，那么它将派上用场。

未使用Getters和setters

我认为上面的例子是不言自明的。我们在People类上有两个函数，用来帮助设置和获取person的名称。

使用Getters和setters的例子：

在上面的示例中，您可以看到在类中有“get”和“set”属性的两个函数。“get”属性用于获取变量的值，并使用“set”属性将值设置为变量。

可以看到getName函数没有括号，setName函数是没有括号的，这就像给变量赋值一样。

谢谢你的阅读。希望你喜欢这篇文章。:):)