ES6的新增功能—第1部分–技术–中

ES6的新增功能-第1部分

好的,所以我们已经听到有关ES6的信息已经有一段时间了,您可能一直想知道这又是什么。.别害怕。 它仍然是您所知道的相同JavaScript,但是具有一些新功能,使您可以编写更少的代码。 太好了吧?

在不浪费太多时间的情况下,我们将了解这些新功能。 新功能将分为三个部分进行讨论。 这将是第一部分。

Let和Con声明

这些使我们可以声明变量,而不是常规的“ var”关键字。 实际上,“ let”代替了“ var”,而“ const”是一种新型的声明。 “ let”允许我们具有块级范围,这意味着,如果我们在全局范围内声明“ let”变量,并且在循环或if语句中使用相同的变量,那么它将完全不同并且独立存在范围对于某些开发人员来说一直是个难题。 “ const”只是常量值的声明,即随时都不会改变的值。

让我们看一下“ var”和“ let”的区别。

输出:

为什么会这样呢?

在第一次初始化时,“ a”为10。当满足if条件时,对于第一个console.log,它将获取局部变量的值,从而输出50,该值是正确的,但对于第二个console.log,即使a在条件的局部范围内创建了新变量a,它将在全局范围内更改该变量的值,从而将其值从10更改为50,这可能不是我们期望的输出。 让我们看看“ let”将如何处理这一问题。

输出:

为什么会这样呢?

在第一次初始化时,“ a”为10。当满足if条件时,对于第一个console.log,它将采用本地范围变量的值,从而输出正确的50。 因为我们正在使用“ let”,所以它不允许块作用域超出全局作用域,因此,在这种情况下,一旦条件语句完成,就完成了局部作用域,并且一旦我们尝试了第二个控制台。在日志中,它采用了全局范围内变量的值,这正是我们想要的。

让我们循环检查“ let”和“ var”。

输出:

看一下上面的代码片段,如果我们注释掉第二个console.log,我们的输出将停在9,但是使用第二个console.log,输出将变为10。这是因为i变量已经影响了外部的定义。范围,从而允许第二个console.log再次进入循环,这不是我们想要的。 看看“ let”的作用。

输出:

如果考虑上面的输出,您会注意到第一个console.log的本地范围保持不变,并且当第二个console.log尝试访问循环(块声明)中定义的相同变量时,将出现错误消息收到消息说未定义变量“ i”,这正是应该发生的情况。

常量声明。

“ const”声明用于简单地将常量值分配给变量。 分配后,将无法更改其中包含的值。 让我们看看它是如何工作的。

输出:

我们已经声明我们的品牌是一个常量变量,并且已经使用push方法为数组分配值。 现在,让我们尝试从数组中更改品牌声明。

输出:

我们可以看到,每当尝试更改“ const”变量的声明类型时都会出错。

基本上,这就是使用“ let”和“ const”声明的有用性。 是作品。

类和继承。

现在可以在普通的旧JavaScript中使用类,因此我们不需要打字稿或类似的东西。 它与PHP或Java类或使用此类的任何OOP语言非常相似。 让我们跳进去,对类和继承做一些事情。

上面的代码片段是类和构造函数的基本创建。

构造函数是在实例化类或创建对象时将运行的方法。 他们可以接受参数。 在这种情况下,参数是用户名,电子邮件和密码。

在第47至49行中,我们要做的是接受传递的值(参数)并将它们分配给类的属性。

接下来是在我们的类中创建一个方法。 方法基本上是属于类的函数。

输出:

我们的register方法是在第51行中创建的。我们在控制台中所做的就是获取属性值并将其与另一个字符串连接起来,并在调用该函数时打印出该值。 第55行创建了一个User类的对象,并传递了一些默认参数。在第57行,我们调用该函数,然后可以按预期看到输出。 在register方法中,您可以传入类中的其他属性值,以自行查看输出。

我们还可以拥有所谓的静态方法。 为此,我们要做的就是使用关键字“ static”。

您可以静态使用某些方法,而某些则不能。 例如。 在上面的示例中,register方法不能用作静态方法,因为您需要实例化一个对象才能执行或调用它,但是对于numberOfUsers方法,无论如何它都将是相同的。 它要做的就是回显用户数量。 对于静态方法,不需要实例化它们。 因此,要调用它们,您所要做的就是在下面的第60行中显示。

输出:

我们也可以在JavaScript中使用继承。 利用上面的相同示例,让我们创建一个Member类,该Member类继承User类的属性,然后具有自己的额外参数。

在上面的代码段中,我们创建了一个Member调用并扩展了User类,这意味着我们将使用User类的功能并将其添加到Member类中,即使Member类将具有自己的额外参数(bouquetType)。 在第64行中,我们不必像在User类中那样使用“ this”关键字来添加属性,而是可以使用super方法。 这样做是为了获取超类(用户)的属性,并将其分配给新的Member类。 第65行有助于向Member类添加新属性。

现在,我们想尝试从新的Member类中获取项目。

第67行是我们用来从类中获取项目的方法。 这类似于我们前面解释的寄存器方法。 在第71行中,我们从Member类创建了chris对象。 在第72行中,我们正在调用不在类Member中的方法(寄存器) 由于我们继承了User类的所有属性,因此这仍然可以完美地工作,因此我们仍然可以访问User类中定义的方法。 最后一行是对我们定义的getBouquet方法的方法调用。

输出:

因此,基本上这就是在ES6中如何使用类和继承。

模板文字/字符串

模板文字很容易理解,并且确实很有用,特别是在您不喜欢将字符串连接到数字,变量等的情况下。

我们将在此处做一些HTML处理模板文字。 看看下面的HTML代码段。 这很简单。

看一下第10行。我们有一个空的div,其ID为template。 那就是我们要从JavaScript端填充内容的地方。 现在让我们写出我们的JavaScript。

仔细看一下上面的代码,您会发现我们有两组引号组成一个字符串,并存储在模板变量中。 h2标签中的文本可以是变量,也可以是p标签中包含的文本。 在Plain JavaScript或ES5中,为了使我们能够将它们两者合并为一个变量,我们将不得不使用加号(+)将它们连接在一起。 如果我们要加入一个很长的项目,那么它看起来可能会变得很嗡嗡作响,而所有这些看起来都不太好。 但是,借助ES6中的模板文字,它变得非常容易和简单。 请看下面的代码片段,与上面的代码片段进行比较,并给出相同的输出。

请注意代码的简单性以及读取代码的难度。 我们消除了字符串每一行开头的单引号以及加号(+),并用反斜杠替换了整个字符串值。 倒勾是键盘上按钮1左侧的按钮 。 让我们再做一个绑定数据的例子。 假设我们要在变量中存储一些内容,然后将存储在变量中的值添加到字符串中。 在我们的普通JavaScript中,这是我们将要做的事情。

上面的代码片段只是一个基本示例,因此您可能不会真正感觉到使用模板文字的好处,但是当您开始要连接很长的字符串时,工作就会出来。 请注意,在第9行中,我们必须使用3加号,几个单引号和全部。 当字符串过长时,您可能会忽略其中一个。 使用模板文字编写上述内容更容易,并且不会碰到那么容易的错误。 让我们看一下用模板文字编写的相同代码。

如果仔细看一下上面的代码片段,您会发现它比以前的代码更不容易出错。 整个字符串是pt,位于一个单引号内,要传递的变量放在花括号内,并用美元符号将它们引起来($ {})。 像这样工作非常简单直接。

我们还可以在模板文字内部使用函数。 让我们看看我们如何做到这一点。

我敢打赌,您已经知道我们的输出应该是什么。 以防万一,就在这里。

输出:

模板字面量就是这样。

请继续关注ES6的新功能。

谢谢阅读。