前端入门21-JavaScript的ES6新特性
声明
本篇内容全部摘自阮一峰的：ecmascript 6 入门
阮一峰的这本书，我个人觉得写得挺好的，不管是描述方面，还是例子，都讲得挺通俗易懂，每个新特性基本都还会跟 es5 旧标准做比较，说明为什么会有这个新特性，这更于理解。
所以，后续不会再写个关于 es6 系列的文章了，就在这篇里大概的列举一下，大体清楚都有哪些新特性就好了，以后需要用时再去翻一翻阮一峰的书。
正文-es6新特性
es6 新标准规范相比于 es5 旧标准规范中，无非就三个方面的改动：新增、更新、废弃。
由于更新和废弃需要考虑到兼容性问题，所以这两方面的内容应该并不多，那么大部分基本都是新增的特性。对于新增的特性来说，大体上也还可以再分两类：完全新增的特性和基于旧标准扩展的特性。
下面就大概来过一下，es6 中新增的特性。
symbol
这是新增的一种原始数据类型，es5 中原始类型有 5 种，在 es6 中新引入了一种后，现在就是有 6 种原始数据类型了：number、string、boolean、null、undefined、symbol
这个单词中文直译是：符号、标志等，但好像并没有在书中有这种叫法，书中都是直接使用 symbol 来描述，可能中文翻译不能够很好的表示出这种原始数据类型的含义吧。
背景
之所以新增了这种原始数据类型，是为了解决：
es5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 es6 引入
symbol的原因。
基础用法
var s1 = symbol('s1'); //参数只是用来描述当前 s1 变量，跟其他 symbol 数据类型的变量相区分，在调用 tostring 或 typeof 时会输出当前数据类型跟描述信息
//第一种
var o = {};
o[s1] = "dasu";
//第二种
var o = {
[s1]: "dasu"
};
//第三种
var o = {}
object.defineproperty(o, s1, {value: "dasu"});
给一个对象定义一个属性名用 symbol 数据类型来表述的方法有上述三种，如果使用 o.s1 = "dasu" 这种方式，是给 o 对象定义了一个属性名为 s1 且数据类型为字符串的属性，字符串就存在相等与否的场景。而使用上述三种方式，是给对象定义了一个属性名为 s1 但数据类型为 symbol 的属性，如果后期又定义了另一个属性名为 s1 的 symbol 原始值的属性，并不会覆盖之前定义的属性。
其他内容，包括关于 symbol 属性的遍历、symbol 自带的方法、symbol 应用场景等见：symbol
块作用域 let 和 const
背景
es5 中变量的作用域只分全局作用域和函数内作用域，且全局变量本质上是全局对象的属性，书中是这么评价的：
顶层对象的属性与全局变量挂钩，被认为是 javascript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，
window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。
为了解决这些问题，es6 中新增了块级作用域的变量，通过关键字：let 和 const 声明的变量，作用域是块级作用域，同时，这些变量不属于顶层对象的属性。
const 定义的变量是常量，除此外，这个变量跟用 let 定义的变量没有其他方面的区别了。而通过 let 和 const 定义的变量行为、作用域类似于 java 语言中定义的变量行为。
换句话说，let 和 const 定义的变量已经不包含 var 定义的变量的各种特性行为了，比如：没有变量的声明提前特性、存在暂时性死区（在定义之前不能使用，只能在定义变量位置之后使用）、不允许重复声明、作用域只有块级作用域等。
更多的参考：
module 模块机制
背景
es5 中并没有模块机制，常见的方式是：前端里通过 <script> 加载各种不同的 js 文件代码，在 js 文件代码内部中提供一些全局变量或全局函数供其他 <script> 使用。
说白了，就是不同 js 文件通过全局对象作为通信的桥梁来相互访问。而为了解决不同 js 文件共享全局对象造成的变量冲突问题，通常作为模块的 js 里的代码都会放在一个立即执行的函数内。
而 es6 中，引入了模块的机制。
基本使用
当在 html 文档中，通过指定 <script> 标签的 type 属性为 module 时，如：
<script type="module" src="./foo.js"></script>
浏览器会按照模块的处理方式来加载这份 js 文件，与模块脚本的处理方式与正常 js 脚本文件处理方式最不同的地方在于，模块内的代码都是在模块作用域中执行，也就是在模块 js 文件中的全局变量这些并不会被添加到全局对象的属性中，其他 js 文件无法访问。
那么，其他 js 文件如何使用这份模块 js 文件呢？
有三点要求：
- 模块 js 文件内，需要通过 export 声明该模块对外开放的接口
- 当前 js 文件内，需要通过 import 来引入模块对外开放的接口，想使用哪些接口，就需要引入哪些
- 当前 js 也必须是模块脚本文件，即 type=module 才行
import 命令和 export 命令是模块机制的关键，但只两个命令只能在 type=module 的 js 文件内生效，如果某个 js 文件声明了 type=text/javascript，然后代码里又使用到 import 或 export，那么运行期间会报错。
- 对外提供功能的模块
//module.js
//...
//以上省略模块内部功能代码
//一般对外的接口可放在文件底部，方便一览无余
//第一种：
export var name = "dasu";
export function getname() {return "dasuandroidtv"};
//第二种：
var name = "dasu"
var getname = function() {return "dasuandroidtv"};
export {name, getname}
- 使用其他模块功能的当前脚本
//第一种：from后跟js的相对路径或绝对路径
import {name, getname} from 'module.js'
//第二种：
import * as module from 'module.js'
//使用
module.name;
module.getname();
//...
最后，记住，模块脚本文件中，自动以严格模式运行，限制也很多，更多用法、细节说明参考：
变量解构
es6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（destructuring）。
以前，为变量赋值，只能直接指定值。
var a = 1; var b = 2; var c = 3;
es6 允许写成下面这样。
var [a, b, c] = [1, 2, 3];
上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
这种特性可以带来很多便捷：
- 函数可以返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
- 对象取值时很方便
//解析服务端返回的数据对象，提取其中的各字段值
var o = {
code: 1,
msg: "success",
content: {...}
};
var {code, msg, content} = o;
解构时，还可以设置默认值，更多用法，参考：
字符串的扩展
es6 中对字符串的处理扩展了很多新特性，让字符串的处理更加强大，下面看一个很强大的特性：
模板字符串
传统的 javascript 语言，输出模板通常是这样写的（下面使用了 jquery 的方法）。
$('#result').append(
'there are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onsale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便，es6 引入了模板字符串解决这个问题。
$('#result').append(`
there are <b>${basket.count}</b> items
in your basket, <em>${basket.onsale}</em>
are on sale!
`);
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
更多字符串扩展的特性介绍参见：
函数的扩展
es6 中，对于函数的处理也增加了很多新特性，让函数变得更强大。
参数默认值
es6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。
function log(x, y) {
x = x || 'dasu';
y = y || 'android';
console.log(x, y);
}
es6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x="dasu", y="android") {
console.log(x, y);
}
当然，参数默认值还有更多细节，比如默认参数的作用域是单独的、有默认参数值的函数 length 属性含义会变化等等。
剩余参数 reset
es6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
箭头函数
es6 允许使用“箭头”（=>）定义函数。
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
箭头前面是参数，后面的函数体，如果超过 1 个参数，那么用圆括号将多个参数圈起，如果没有参数，就用一个空圆括号 () 表示，如果函数体超过 1 行语句，那么用 {} 大括号包住。
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
当函数作为另一个函数的参数时，箭头函数的写法会让代码变得很便捷，如：
- 箭头函数的一个用处是简化回调函数。
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
- 嵌套的箭头函数
箭头函数内部，还可以再使用箭头函数。下面是一个 es5 语法的多重嵌套函数。
function insert(value) {
return {into: function (array) {
return {after: function (aftervalue) {
array.splice(array.indexof(aftervalue) + 1, 0, value);
return array;
}};
}};
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]
上面这个函数，可以使用箭头函数改写。
let insert = (value) => ({into: (array) => ({after: (aftervalue) => {
array.splice(array.indexof(aftervalue) + 1, 0, value);
return array;
}})});
insert(2).into([1, 3]).after(1); //[1, 2, 3]
但使用箭头函数有一些注意点：
- 函数体内的
this的指向，就是定义时所在的对象，而不是使用时所在的对象。 - 不可以当作构造函数，也就是说，不可以使用
new命令，否则会抛出一个错误。 - 不可以使用
arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。 - 不可以使用
yield命令，因此箭头函数不能用作 generator 函数。
其他还有很多扩展，包括在 es5 中，函数有个 name 属性并在标准规范中，但在 es6 中加入了标准规范中，还有其他新增的一些特性，具体参考：
class 类
javascript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。
function point(x, y) {
this.x = x;
this.y = y;
}
point.prototype.tostring = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new point(1, 2);
上面这种写法跟传统的面向对象语言（比如 c++ 和 java）差异很大，很容易让新学习这门语言的程序员感到困惑。
es6 提供了更接近传统语言的写法，引入了 class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
基本上，es6 的class可以看作只是一个语法糖，它的绝大部分功能，es5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 es6 的class改写，就是下面这样。
//定义类
class point {
constructor(x, y) {
this.x = x;
this.y = y;
}
tostring() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var p = new point();
上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，es5 的构造函数point，对应 es6 的point类的构造方法。
point类除了构造方法，还定义了一个tostring方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。
es6 的类，完全可以看作构造函数的另一种写法。
class point {
// ...
}
typeof point // "function"
point === point.prototype.constructor // true
上面代码表明，类的数据类型就是函数，类本身就指向构造函数。
使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
class bar {
dostuff() {
console.log('stuff');
}
}
var b = new bar();
b.dostuff() // "stuff"
构造函数的prototype属性，在 es6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。
class point {
constructor() {
// ...
}
tostring() {
// ...
}
tovalue() {
// ...
}
}
// 等同于
point.prototype = {
constructor() {},
tostring() {},
tovalue() {},
};
在类的实例上面调用方法，其实就是调用原型上的方法。
class b {}
let b = new b();
b.constructor === b.prototype.constructor // true
更多细节内容参考：
其他
阮一峰好歹专门为 es6 新增的特性写了一整本书，想用一个章节来介绍太不可能了，很多我也没有去细看。
本篇的主旨就在于大体上列出一些新特性，知道原来 es6 新增了这些东西，后续有时间再去细看这本书，或者当用到的时候再去查。
最后，就列举下，其他上面没有讲到的特性吧：
- arraybuffer：大概同于操作二进制数据
- set 和 map：新增是数据结构，类似于数组，可以类比 java 中的 set 和 map
- proxy：修改某些默认行为，等同于在语言层面做出修改，所以属于"元编程"，即对编程语言进行编程。
- reflect：同样是用于操作对象，修改默认行为。proxy 更多是在原本行为上增加新的行为，而 reflect 则是直接修改原本行为。
- iterator 和 for..of 循环：为不同的数据结构提供各自的遍历访问操作
- promise：异步编程的解决方案，比传统的解决方案（回调和事件）更合理强大
- generator 函数：异步编程的解决方案
- async：generator 函数的语法糖
- 正则的扩展、数组的扩展、数值的扩展、对象的扩展等
function a(x) {
a.prototype.x = x;
a.prototype.y = 1;
}
function b() {}
b.prototype = new a();
var b = new b();
b.y; //1
=
大家好，我是 dasu，欢迎关注我的公众号（dasuandroidtv），公众号中有我的联系方式，欢迎有事没事来唠嗑一下，如果你觉得本篇内容有帮助到你，可以转载但记得要关注，要标明原文哦，谢谢支持~