ES6是指ECMA Script编程语言的版本6。 ECMA Script是JavaScript的标准化名称，版本6是继2011年发布的版本5之后的下一个版本。它是JavaScript语言的主要增强功能，并添加了许多旨在简化大规模软件开发的功能。 。
ECMAScript或ES6，于2015年6月发布。随后将其重命名为ECMAScript2015。尽管支持主要部分，但对完整语言的Web浏览器支持尚不完整。主要的网络浏览器支持ES6的某些功能。但是，可以使用称为 transpiler 的软件将ES6代码转换为ES5，这在大多数浏览器中都得到更好的支持。
现在让我们看看一些主要的变化ES6引入了JavaScript。
1。常量
最后，常量的概念已成为JavaScript！常量是只能定义一次的值（每个作用域，下面说明的作用域）。在相同范围内重新定义会触发错误。
const JOE = 4.0JOE= 3.5// results in: Uncaught TypeError: Assignment to constant variable.在可以使用变量（ var ）的任何地方都可以使用常量。
console.log("Value is: " + joe * 2)// prints: 82。块范围的变量和函数
欢迎使用21世纪的JavaScript！使用ES6，使用 let （以及上面描述的常量）声明的变量遵循Java Java，C ++等中的块作用域规则。
在此更新之前，JavaScript中的变量是函数作用域的。也就是说，当您需要变量的新作用域时，必须在函数中声明它。
变量将值保留到块的末尾。在该块之后，将还原外部块中的值（如果有）。
{ let x = "hello"; { let x = "world"; console.log("inner block, x = " + x); } console.log("outer block, x = " + x);}// printsinner block, x = worldouter block, x = hello您也可以在此类块中重新定义常量。
{ let x = "hello"; { const x = 4.0; console.log("inner block, x = " + x); try { x = 3.5 } catch(err) { console.error("inner block: " + err); } } x = "world"; console.log("outer block, x = " + x);}// printsinner block, x = 4inner block: TypeError: Assignment to constant variable.outer block, x = world3。箭头函数
ES6引入了一种新的语法，用于使用箭头定义函数。在下面的示例中， x 是一个接受名为 a 的参数并返回其增量的函数：
var x = a => a + 1;x(4) // returns 5使用此语法，您可以定义并轻松地在函数中传递参数。
使用 forEach（）：
[1, 2, 3, 4].forEach(a => console.log(a + " => " + a*a))// prints1 => 12 => 43 => 94 => 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 * bx(2)// returns 2x(2, 2)// returns 4与其他语言（如C ++或python）不同，具有默认值的参数可能会出现在那些没有默认值的。请注意，通过说明，此函数被定义为具有 return 值的块。
var x = (a = 2, b) => { return a * b }但是，参数从左到右匹配。在下面的第一次调用中，即使 a 已声明为默认值， b 的值仍为 undefined 。传入的参数与 a 而不是 b 匹配。该函数返回 NaN 。
x(2)// returns NaNx(1, 3)// returns 3当您显式传递 undefined 作为参数时，如果有默认值，则使用默认值。
x(undefined, 3)// returns 65。其余函数参数
调用函数时，有时需要能够传递任意数量的参数，并能够在函数中处理这些参数。此需求由 rest函数参数语法处理。它提供了一种使用以下所示语法在定义的参数之后捕获其余参数的方法。这些额外的参数将捕获到数组中。
var x = function(a, b, ...args) { console.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }x(2, 3)// printsa = 2, b = 3, 0 args leftx(2, 3, 4, 5)// printsa = 2, b = 3, 2 args left6。字符串模板
字符串模板是指使用诸如perl或shell之类的语法将变量和表达式内插到字符串中。字符串模板包含在反引号（`）中。相比之下，单引号（‘）或双引号（“ "）表示普通字符串。模板内的表达式在 $ {和} 之间标出。这是一个示例：
var name = "joe";var x = `hello ${name}`// returns "hello joe"当然，您可以使用任意表达式进行求值。
// define an arrow functionvar f = a => a * 4// set a parameter valuevar v = 5// and evaluate the function within the string templatevar x = `hello ${f(v)}`// returns "hello 20"这种用于定义字符串的语法也可以用于定义多行字符串。
var x = `hello worldnext line`// returnshello worldnext line7。对象属性
ES6带来了简化的对象创建语法。看下面的示例：
var x = "hello world", y = 25var a = { x, y }// is equivalent to the ES5:{x: x, y: y}计算的属性名称也非常漂亮。在ES5及更早版本中，要设置具有计算名称的对象属性，您必须执行以下操作：
var x = "hello world", y = 25var 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)// returns68。正式的类定义语法
最后，JavaScript获得了正式的类定义语法。尽管它只是现有的基于原型类型的类的语法糖，但它确实有助于提高代码的清晰度。这意味着不不会添加新的对象模型或类似的东西。
class Circle { constructor(radius) { this.radius = radius }}// use itvar c = new Circle(4)// returns: Circle {radius: 4}定义方法也非常简单。
class Circle { constructor(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 { constructor(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现在让我们添加一个设置器。为了能够将半径定义为可设置的属性，我们应该将实际字段重新定义为 _radius 或与设置器不冲突的内容。否则，我们会遇到堆栈溢出错误。
这是重新定义的类：
class Circle { constructor(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.26548245743669c.radius = 6c.area// returns: 113.09733552923255总而言之，这是对面向对象的JavaScript的很好的补充。
除了使用 class 关键字定义类之外，您还可以使用 extends 关键字从超类继承。让我们来看一个例子。
class Ellipse { constructor(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 { constructor(radius) { super(radius, radius); } set radius(r) { super.width = r; super.height = r; }}// create a circlevar 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.566370614359172c.radius = 5c.area// returns: 78.53981633974483这是JavaScript ES6某些功能的简短介绍。
下一步：熟悉一些重要的JavaScript数组方法！
图片来源：micrologia / Depositphotos
标签: JavaScript
.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5)