ECMAScript 6新特性简介

简介

ECMAScript 6.0（如下简称 ES6）是 JavaScript 语言的下一代标准，正式发布与2015年6月。它的目标，是使得JavaScript语言能够用来编写复杂的大型应用程序，成为企业级开发语言。

今天咱们将会讲解一下ES6中引入的语法新特性。

ECMAScript和JavaScript的关系

1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA.

1997年, ECMA 发布262号标准文件 ECMAScript 1.0。

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。

咱们看一下ECMAScript的发行历史：

从2015年ES2015，也就是ES6发布以来，ECMAScript以每一年一个版本的发行速度发行到了ES2020。

后面的文章咱们会讲解一下这些新版本的ECMAScript的新特性。

let和const

ES6中引入了let和const,是为了解决以前的var变量的种种问题。

在ES6以前，JS中变量的做用域有两种：全局做用域和函数做用域。

全局做用域很好理解，咱们在浏览器控制台或者 Node.js 交互终端中开始编写 JavaScript 时，即进入了所谓的全局做用域。

全局做用域的变量能够在任何其余做用域中访问。

函数做用域就是定义在函数内部的变量，在函数内部均可以访问到该变量。

这两种做用域会有一些问题：

1. 变量提高

var命令会发生”变量提高”现象，即变量能够在声明以前使用，值为undefined.

// var 的状况 
console.log(foo);  // 输出undefined 
var foo = 2;

1. 变量覆盖

当咱们在函数做用域使用全局变量的时候，若是函数做用域中定义了一样名字的变量，不论是在哪里定义的，都会覆盖掉全局的变量。以下所示：

var tmp = new Date(); 
function f() { 
console.log(tmp); 
if (false) { var tmp = "hello world"; 
} } 
f(); // undefined

1. 变量泄露

变量泄露的意思是，咱们原本只但愿在小范围做用域使用的变量，结果泄露到了范围外面，以下所示：

var s = 'hello'; 
for (var i = 0; i < s.length; i++) { 
console.log(s[i]); 
} 
console.log(i); // 5
~~

为了解决上面两个问题，ES6引入了let和const。

这两个都是块级做用域。不一样的是const定义的变量初始化以后就不能变化了。

什么是块级做用域呢？相似于 if、switch 条件选择或者 for、while 这样的循环体便是所谓的块级做用域,或者更简单一点使用大括号括起来的就叫作块级做用域。

块级做用域的最大好处就是不会产生做用域提高，以下所示：

{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

# 解构赋值

什么是解构赋值呢？

ES6 容许按照必定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

以下所示：

let [a, b, c] = [1, 2, 3];
let [ , , third] = ["foo", "bar", "baz"];
let [x, , y] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];

let [x, y] = [1, 2, 3];

解构赋值还能够设定默认值，咱们来看下面的几个例子：

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a'];
// x='a', y='b'

let [x, y = 'b'] = ['a', undefined];
// x='a', y='b’

let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null

若是解构的默认值是一个函数，那么能够触发惰性赋值：

function f() {
console.log('aaa');
}

let [x = f()] = [1];

上面的例子中，f函数将不会被执行。

除告终构变量以外，还能够结构对象：

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

解构还支持嵌套的结构：

let obj = { p: [ 'Hello', { y: 'World' } ] };

let { p: [x, { y }] } = obj;

x // "Hello"
y // "World"

解构赋值有两个很是重要的做用。

第一就是交换变量：

let x = 1;
let y = 2;
[x, y] = [y, x];

咱们就能够再也不使用中间变量，直接进行两个变量值的交互。

第二个做用就是从函数中返回多个值：

// 返回一个数组
function example() { return [1, 2, 3]; }
let [a, b, c] = example();

// 返回一个对象
function example() { return { foo: 1, bar: 2 }; }
let { foo, bar } = example();

//提取JSON数据
let jsonData = { id: 42, status: "OK", data: [867, 5309] };
let { id, status, data: number } = jsonData;

# 数组的扩展

ES6中的Array.from方法用于将下面两类对象转为真正的数组：

* 相似数组的对象（array-like object）
* 可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

什么是相似数组对象呢？

所谓相似数组的对象，本质特征只有一点，即必须有length属性。所以，任何有length属性的对象，均可以经过Array.from方法转为数组。

下面的变量就是类数组变量：

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };

这个类数组对象怎么转换成为数组呢？

// ES5的写法
var arr1 = [].slice.call(arrayLike);
// ['a', 'b', 'c']

// ES6的写法 let arr2 = Array.from(arrayLike);
// ['a', 'b', 'c']

咱们看下一般的使用场景：

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) { console.log(p); });

// arguments对象
function foo() { var args = Array.from(arguments);
// ...
}

什么是可遍历对象呢？

只要是部署了Iterator接口的数据结构，都叫作可遍历对象。

咱们看下下面的例子：

Array.from('hello') // ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

同时还引入了扩展运算符（...），经过扩展运算符，也能够很方便的转换为数组对象：

function foo() { var args = [...arguments]; } // arguments对象
[...document.querySelectorAll('div')] // NodeList对象

Array.from方法还能够接收第二个参数，用来对数组中的元素进行操做：

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of方法能够很方便的建立新的数组：

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

# 函数的扩展

ES6，能够支持函数的默认值了：

function log(x, y = 'World') { console.log(x, y); }
function Point(x = 0, y = 0) { this.x = x; this.y = y; }

函数的默认值能够和解构赋值默认值组合起来使用：

function foo({x, y = 5}) { console.log(x, y); }
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

接下来，咱们看一个复杂的例子：

// 写法一
function m1({x = 0, y = 0} = {})
{ return [x, y]; }

// 写法二
function m2({x, y} = { x: 0, y: 0 })
{ return [x, y]; }

咱们来看一下，上面的两种写法有什么不一样呢？

当函数没有参数的状况：

m1() // [0, 0]
m2() // [0, 0]

当x和y都有值的状况：

m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

当x有值，y无值的状况 ：

m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

当x和y都无值的状况：

m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

看出区别了吗？ m1的解构赋值，对于x,y来讲是有默认值0的。而m2的解构赋值对于x,y来讲是没有默认值的。

> 本文做者：flydean程序那些事
> 
> 本文连接：[http://www.flydean.com/ecmascript-6-startup/](http://www.flydean.com/ecmascript-6-startup/)
> 
> 本文来源：flydean的博客
> 
> 欢迎关注个人公众号:「程序那些事」最通俗的解读，最深入的干货，最简洁的教程，众多你不知道的小技巧等你来发现！