为新手准备的带示例的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函数是没有括号的,这就像给变量赋值一样。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180316G1OKZD00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券