ECMAScript 新特性 - 标签：JavaScript

![](http://5coder.cn/img/WA5K6I3aVkFueLb.png)

## 一、ECMAScript概述

ECMAScript，即 ECMA-262 定义的语言，并不局限于 Web 浏览器。事实上，这门语言没有输入和输出之类的方法。ECMA-262 将这门语言作为一个基准来定义，以便在它之上再构建更稳健的脚本语言。

Web 浏览器只是 ECMAScript 实现可能存在的一种宿主环境（host environment）。宿主环境提供ECMAScript 的基准实现和与环境自身交互必需的扩展。扩展（比如 DOM）使用 ECMAScript 核心类型和语法，提供特定于环境的额外功能。其他宿主环境还有服务器端 JavaScript 平台 Node.js 和即将被淘汰的 Adobe Flash。

日常使用的Web环境下，JavaScript语言包括：ECMAScript、浏览器提供的BOM对象、DOM树。

Node.js环境下，JavaScript包括：ECMAScript、Node API（fs、net、etc.）

## 二、ES2015概述

ECMA-262 阐述了什么是 ECMAScript 符合性。要成为 ECMAScript 实现，必须满足下列条件：

- 支持 ECMA-262 中描述的所有“类型、值、对象、属性、函数，以及程序语法与语义”；

- 支持 Unicode 字符标准。

此外，符合性实现还可以满足下列要求。

- 增加 ECMA-262 中未提及的“额外的类型、值、对象、属性和函数”。ECMA-262 所说的这些额外内容主要指规范中未给出的新对象或对象的新属性。

- 支持 ECMA-262 中没有定义的“程序和正则表达式语法”（意思是允许修改和扩展内置的正则表达式特性）。

以上条件为实现开发者基于 ECMAScript 开发语言提供了极大的权限和灵活度，也是其广受欢迎的原因之一。

## 三、ES2015 let 与块级作用域

具体详情请阅读《JavaScript高级程序设计·第四版》中的第三章第三节（3.3）

### 1.var

- var定义的变量会预解析，简单的说就是如果变量没有定义就直接使用的话，JavaScript回去解析这个变量，代码不会报错，只会输出undefined。

```js
console.log(foo)  // undefined
var foo = 'foo';
```

- var定义的变量可以反复去定义，当然后面的会覆盖前面的

```js
var a = 1;
var a = 2;
```

- var在循环中使用的时候，循环体外依然可以使用

```js
for (var i = 0; i < 3; i++) {
	for (var i = 0; i < 3; i++) {
		console.log(i)
	}
	console.log('内层结束 i = ' + i)
}
//0
//1
//2
//内层结束 i = 3
```

- 在循环绑定事件过程中，var定义的变量无法保存，循环会在瞬间执行完

```js
var elements = [{}, {}, {}]
for (var i = 0; i < elements.length; i++) {
	elements[i].onclick = (function (i) {
		return
	})
}
elements[1].onclick()
```

### 2.let

- let定义的变量不会预解析，必须先声明再使用，否则会报错

```js
console.log(b);  // 报错
let b = 'bar'
```

- let不能定义已经定义过的变量（无论之前是用var定义的还是let或者const定义的）

```js
let b = 3;
let b = 4;  // 报错
```

- let是块级作用域，函数内部使用let定义后，对函数外部无影响，简单说就是在一个{}里面生效

```js
for (let i = 0; i < 3; i++) {
	let i = 'foo';
	console.log(i)  // foo
}
```

- 由于let是块级作用域，在循环绑定事件过程中let会在这个循环中生效，再次循环时let会重新定义生效

```js
let elements = [{}, {}, {}]
for (let i = 0; i < elements.length; i++) {
	elements[i].onclick = (function (i) {
		console.log(i)
	})
}
elements[0].onclick()
```

## 四、ES2015 const

- const定义的变量不会预解析，必须先声明再使用，否则会报错

```js
console.log(a);  // 报错 undefined
const a = 'foo'; 
```

- const定义的变量不允许修改

```js
  const a = 5;
  a = 6;  // err
  ```

- 但是，在数组里面，const的值是允许被修改的，这是因为const存储的是地址，值的内容可以变化

```js
  const arr = [1,2,3,4,5]
  arr[1] = 'array'
  console.log(arr);
  ```

## 五、ES2015 数组的解构

ECMAScript2015 新增了一种从数组或者对象获取指定元素的快捷方式，这是一种新的语法，这种新语法叫做**解构**。如下代码所示，定义一个数组：