都这么久了，你还没有用上ECMAScript 6？

2020-07-18 21:35:00 APP开发网 4011

ES8已经发售了很久，但是很多前端开发者都还没有用上ES6。这边文章主要用于介绍怎么快速入门ES6，并且将SE6的语法用于实际运用中。本文中用 ES 表示 ECMAScript。

如果你用过React，Vue或Nodejs等，那你对于ES6的语法也会有一些了解。

ES8中的新特性，浏览器厂商和语法转换器还需要一段来实现，我们先来谈谈怎么在实际项目中运用ES6。

什么是ES6？它和ES5有什么区别？

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。ECMAScript（核心），作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象。我们常说的JavaScript是指ES3和ES5，ES6是ECMAScript 6 的缩写。

对于经常写原生JavaScript的前端开发者来说，对ES5中的语法肯定比较熟悉，ES5作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。

1. strict模式

严格模式，限制一些用法，'use strict';

2. Array增加方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

PS：还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

3. Object方法

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS：只讲有什么，不讲是什么。

ES6给前端开发者带来了很多的新的特性，可以更简单的实现更复杂的操作，很大的提高开发效率，提高代码的整洁性。

ES6中的新特性有很多，列一些比较常用的特性：

Block-Scoped Constructs Let and Const（块作用域构造Let and Const）

Default Parameters（默认参数）

Template Literals （模板字符串）

Multi-line Strings （多行字符串）

Arrow Functions （箭头函数）

Enhanced Object Literals （增强的对象文本）

Promises

Classes（类）

Modules（模块）

Destructuring Assignment （结构赋值）

下面介绍下这些常用的ES6特性。

Block-Scoped Constructs Let and Const（块作用域构造Let and Const）

ES6与ES5相比，多了两个声明变量的关键字：let和const。而let和const要和块级作用域结合才能发挥其优势。

什么是块级作用域？

任何一对话括号（｛和｝）中的语句集都属于一个块是一个独立的作用域，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。在这个作用域内用let声明的变量a，只能在这个作用域内被访问到，在这对大括号外面是访问不到a的。

当然，在块级作用域中还可以声明函数，该函数也是只能作用域内部才能被访问到。函数作用域定义在函数中的参数和变量在函数外部是不可见的。所以，在if、else、for甚至是一对单独的{}，都是一个块级作用域。

在ES6之前的版本中，是没有块级作用域的概念的，只有全局作用域和函数作用域两种，并且，用var声明的变量和用function声明的函数会被提前到作用域的顶部，这也就是我们常说的声明提前。

用let声明的变量是存在于距离声明语句最近的一个作用域（全局作用域、函数作用域或块级作用域）内的，在声明的时候，可选择将其初始化成一个值。

语法如下：

let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;

这一点与var的声明不同，用var声明的变量是属于最靠近它的一个全局作用域或函数作用域中，且声明会被提前。在块级作用域中，var的声明与在全局作用域和函数作用域中是一样的。

块级作用域和let声明变量，解决了使用var的一些不足，相当于用let声明的变量不会被提前到作用域顶部。有一点需要注意，let也是声明提前,但是let声明变量的语句必须在使用该变量语句之前，在声明之前引用会报错该变量未被声明，且let不允许重复声明相同名称的变量，否则会报错。我们看下例子：

{

var hello = 'Hello'

let world = 'World'

}

console.log(hello);

console.log(world);

在Chrome浏览器的控制台（最新版本的Chrome已支持一部分ES6语法）执行一下，会发现有报错。constconst声明与let基本相同，它也是存在于块级作用域内。

有一点区别就是const声明的是常量，换句话来说就是不可被重新赋值改变原值。需要注意，const在声明常量的时候，必须同时给常量初始化赋值。如果只声明，不初始化值的话，会报错。见下面代码。

const MAX;

// Uncaught SyntaxError: Missing initializer in const declaration

声明变量的方法

在ES5中，可以通过var和function这两种方法来声明变量。

而在ES6中，除了增加了let和const两种声明方式，还有接下来要介绍的import和class的声明方式。

Default Parameters（默认参数）

默认参数是ES6中对函数拓展的一个特性，可以直接为函数的参数设置默认值，当某一参数设置了默认值时，如果调用函数的时候没有传该参数，则该参数的值为默认值，如果传了该参数，则该参数的值为传递的参数值。

在ES6之前，我们可以通过手动的方式，为函数的参数设置默认值，代码如下：

function sign (x) {

if (typeof x === 'undefined') {

x = 'default'

}

console.log(x)

}

sign('new sign') // new sign

sign() // default

将上述代码换成ES6模式，可以这样写：

function sign (x = 'default') {

console.log(x)

}

sign('new sign') // new sign

sign() // default

Template Literals （模板字符串）

ES6提供了模板字符串的特性，模板字符串是使用反引号（`）和${}实现字符串的拼接，字符串中可以嵌入变量。

在ES6之前，我们一般这样输出模板：

var name = 'Henry'

var welcome = 'Hello, ' + name + '!'

console.log(welcome); // Hello, Henry!

在ES6中，模板字符串可以这样拼接字符串：

let name = 'Henry'

let welcome = `Hello, ${ name }!`;

console.log(welcome); // Hello, Henry

模板字符串的计算规则是在两个反引号之间将字符串拼接到一起，如果反引号之间含有${}，则会计算这对大括号内的值，大括号里面可以是任意的JavaScript表达式，可以进行运算和引用对象属性。

let a = 3;

let number = `$ {a + 2 }`;

console.log(`${ number }`); // 5

let b = { c: 2, d: 4 };

console.log(`${ b.c * b.d }`) ; // 8

Multi-line Strings （多行字符串）

多行字符串是模板字符串的拓展，它跟模板字符串是同样的解析方式，不同的是，它可以拼接多行的字符串，且拼接的字符串中会保留所有的空格和缩进。

如果需要用字符串来拼接DOM树结构时，可以这样写：

let titleValue = 'This is a title'；

let htmlStr = `

${ titleValue }

This is a paragraph.

上述代码中，能看到JavaScript代码和伪html代码的结合，完全可以将模板字符串的多行字符串封装成一个页面模板工具，绝对是轻量高效的。

这种书写方式是与React的JSX狠起来很相似。

Arrow Functions （箭头函数）

在ES6中，可以使用箭头（=>）来声明一个函数，称作箭头函数。

ES5中声明一个函数，可以这样写：

var func = function (a) {

return a + 2;

}

将这个函数换成箭头函数：

let func = a => a + 2;

如果函数有多个参数，需要用括号包含所有参数，只有一个参数的时候，可以省略括号，如果没有设置参数，也必须有括号。示例如下：

let func1 = (arg1, arg2, arg3) => {

return arg1 + arg2 + arg3;

}

let func2 = arg => {

console.log(arg)

}

let func3 = () => {

console.log(`This is an arrow function.`)

}

需要注意的是，箭头函数没有自己的this，如果在箭头函数内部使用this，那样这个this是箭头函数外部的this，也是因为箭头函数没有this，所以，箭头函数不能用作构造函数。如果用箭头函数来写回调函数时，就不用再将外部this保存起来了。

// ES5

function foo() {

var _this = this;

setTimeout(function() {

console.log('id:', _this.id);

}, 200)

}

// ES6

function foo() {

setTimeout(() => {

console.log(`id:${ this.id }`)

}, 200)

}

Enhanced Object Literals （增强的对象文本）

在ES6，对象字面值扩展支持在创建时设置原型，简写foo：foo分配，定义方法，加工父函数（super calls），计算属性名(动态)。总之，这些也带来了对象字面值和类声明紧密联系起来，让基于对象的设计得益于一些同样的便利。

var obj = {

// __proto__ 原型

__proto__: theProtoObj,

// Shorthand for ‘handler: handler’ 简写

handler,

// Methods

toString() {

// Super calls 继承

return "d " + super.toString();

// Computed (dynamic) property names 计算属性名

['prop_' + (() => 42)()]: 'name'

};

Promises

Promise是异步编程的一种解决方案，它作为一个对象，并且只要开始就会一直进行下去，直到最后。就和他的意思一样是一个诺言，作为诺言就会完成，不论最后是成功还是失败。并且他的结果是由异步操作的结果决定的，所以结果一旦形成就不会改变，不管是在什么情况下，都会得到同一个结果。

不过，在新建Promise之后，需要注意的是：Promise被新建后，便无法被取消，会执行下去，直到出现结果；如果不设置回调，Promise内部抛出的异常，不会反应到外部。

都这么久了，你还没有用上ECMAScript 6？

${ titleValue }

为您推荐