ES6是ECMA脚本编程语言的版本6。ECMA脚本是JavaScript的标准化名称，版本6是继2011年发布的版本5之后的下一个版本。它是JavaScript语言的一个主要增强，并添加了更多的功能，以使大规模软件开发更容易。

ECMAScript或ES6于2015年6月发布。随后更名为ECMAScript 2015。Web浏览器对完整语言的支持尚未完成，尽管支持主要部分。主要的web浏览器支持ES6的一些功能。但是，可以使用称为transpiler的软件将ES6代码转换为ES5，这在大多数浏览器上都得到了更好的支持。

现在让我们看看ES6给JavaScript带来的一些主要变化。

1常量

最后，常量的概念已经应用到JavaScript中了！常量是只能定义一次的值（每个作用域，下文解释的作用域）。在同一范围内重新定义会触发错误。

c***t JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to c***tant variable.

可以在任何可以使用变量（var）的地方使用常量。

c***ole.log("Value is: " + joe * 2)
// prints: 8

2块作用域变量和函数

欢迎来到21世纪，JavaScript！用ES6，使用爪哇（C++）等声明的变量（如上面描述的常量）所声明的变量遵循块范围规则（为了了解更多，请参见如何在JavaScript中声明变量）。

在更新之前，JavaScript中的变量是函数范围。也就是说，当您需要一个变量的新作用域时，您必须在函数中声明它。

变量将保留该值直到块结束。在块之后，外部块中的值（如果有）被恢复。

{
  let x = "hello";
  {
    let x = "world";
    c***ole.log("inner block, x = " + x);
  }
  c***ole.log("outer block, x = " + x);
}
// prints
inner block, x = world
outer block, x = hello

您也可以在这些块中重新定义常量。

{
  let x = "hello";
  {
    c***t x = 4.0;
    c***ole.log("inner block, x = " + x);
    try {
      x = 3.5
    } catch(err) {
      c***ole.error("inner block: " + err);
    }
  }
  x = "world";
  c***ole.log("outer block, x = " + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to c***tant variable.
outer block, x = world

三。箭头函数

ES6将箭头函数引入JavaScript。（这些函数与传统函数类似，但语法更简单。）在下面的示例中，x是一个接受称为a的参数并返回其增量的函数：

var x = a => a + 1;
x(4) // returns 5

使用这种语法，您可以轻松地在函数中定义和传递参数。

使用forEach（）：

[1, 2, 3, 4].forEach(a => c***ole.log(a + " => " + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16

通过将接受多个参数的函数括在括号中来定义它们：

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]

4默认函数参数

现在可以用默认值声明函数参数。在下面，x是一个具有两个参数a和b的函数。第二个参数b的默认值为1。

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4

与其他语言（如C++或Python）不同，默认值的参数可能出现在没有默认值的那些参数之前。请注意，通过举例说明，此函数定义为具有返回值的块。

var x = (a = 2, b) => { return a * b }

不过，参数是从左到右匹配的。在下面的第一次调用中，b有一个未定义的值，即使a已用默认值声明。传入的参数与a而不是b匹配。函数返回NaN。

x(2)
// returns NaN
x(1, 3)
// returns 3

当您显式地将未定义作为参数传入时，如果存在参数，则使用默认值。

x(undefined, 3)
// returns 6

5rest函数参数

调用函数时，有时需要能够传入任意数量的参数，并在函数中处理这些参数。这一需求由rest函数参数语法处理。它提供了一种使用如下所示语法捕获已定义参数之后的其余参数的方法。这些额外的参数被捕获在一个数组中。

var x = function(a, b, ...args) { c***ole.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left

6字符串模板

字符串模板是指使用perl或shell等语法将变量和表达式**字符串中。字符串模板用反勾号（`）括起来。相比之下，单引号（'）或双引号（“）表示普通字符串。模板中的表达式标记在${和}之间。举个例子：

var name = "joe";
var x = `hello ${name}`
// returns "hello joe"

当然，可以使用任意表达式进行求值。

// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns "hello 20"

此定义字符串的语法也可用于定义多行字符串。

var x = `hello world
next line`
// returns
hello world
next line

7对象属性

ES6带来了简化的对象创建语法。请看下面的示例：

var x = "hello world", y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}

计算属性名也相当漂亮。对于ES5及更早版本，要使用计算名称设置对象属性，必须执行以下操作：

var x = "hello world", y = 25
var a = {x: x, y: y}
a["joe" + y] = 4
// a is now:
{x: "hello world", y: 25, joe25: 4}

现在你可以用一个定义来完成这一切：

var a = {x, y, ["joe" + y]: 4}
// returns
{x: "hello world", y: 25, joe25: 4}

当然，要定义方法，可以使用以下名称来定义：

var a = {x, y, ["joe" + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6

8形式类定义语法

类别定义

最后，JavaScript得到了一个正式的类定义语法。虽然它只是对已经可用的基于protytype的类的语法补充，但它确实有助于提高代码的清晰度。这意味着这不会添加新的对象模型或类似的东西。

class Circle {
  c***tructor(radius) {
    this.radius = radius
  }
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}

声明方法

定义方法也非常简单。没什么奇怪的。

class Circle {
  c***tructor(radius) {
    this.radius = radius
  }
  computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669

接受者和接受者

我们现在也有getter和setter，只需对语法进行简单的更新。让我们用area属性重新定义Circle类。

class Circle {
  c***tructor(radius) {
    this.radius = radius
  }
  get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669

现在让我们添加一个setter。为了能够将radius定义为可设置的属性，我们应该将实际字段重新定义为\u radius或与setter不冲突的内容。否则我们会遇到堆栈溢出错误。

以下是重新定义的类：

class Circle {
  c***tructor(radius) {
    this._radius = radius
  }
  get area() { return Math.PI * this._radius * this._radius }
  set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255

总之，这是对面向对象JavaScript的一个很好的补充。

继承

除了使用class关键字定义类之外，还可以使用extends关键字从超类继承。让我们用一个例子来看看这是如何工作的。

class Ellipse {
  c***tructor(width, height) {
    this._width = width;
    this._height = height;
  }
  get area() { return Math.PI * this._width * this._height; }
  set width(w) { this._width = w; }
  set height(h) { this._height = h; }
}
class Circle extends Ellipse {
  c***tructor(radius) {
    super(radius, radius);
  }
  set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483

这是对JavaScript ES6的一些特性的简短介绍。

接下来：熟悉一些重要的JavaScript数组方法并编写一个语音敏感的机器人动画脚本！此外，还可以了解一个名为Vue的优秀前端框架。

图片来源：micrologia/Depositphotos