一、测试环境

1、node下几乎完全支持ES6，标准浏览器支持部分语法

2、chrome下使用ES6，为了保证可以正常使用大部分语法，需要使用严格模式，即在js开始部分加上‘use strict‘

3、ff下需要知道测试版本，即在script标签的type属性中加上 ‘application/javascript:version=1.7’ 属性值

 

二、区别

1、声明变量

var 可以多次声明同一个属性

let 需要在严格模式下才能用，不允许重复声明，没有与解析过程（声明之前调用不是undefined而是错误），块级作用域 {} 内部使用(从块开始到声明这段区域成为暂存死区)，

const 声明常量，常量的值不允许进行更改，有的浏览器会报错；但如果常量的值是一个对象，对象的属性可以被修改

 

2、解构赋值

①允许移动模式从数组和对象之提取值，对变量进行赋值，被称为解构；如 var [a,b,c] = [1,2,3]==> a=1, b=2, c=3 多层嵌套也可以准确赋值，只要嵌套顺序一样；

②针对对象的解构赋值，需要var {n1,n2,n3} = obj，n1,n2,n3需要与obj中的key对应，即var后的n1、n2、n3复制结果与顺序无关

③[x, y] = [y, x];可以进行值的交换

 

3、字符串的扩展

str.at() //返回对应位置的字符

str.codePointAt() //返回码点

String.fromCodePoint() //根据码点返回字符

str.repeat() //传入重复的次数

 

4、模板字符串

`Your name: ${name} Your age: ${age}`

使用反引号 ` ` 表示字符串，引入的变量使用${varName}表示

 

5、unicode表示法，之前只有\u0000~\uFFFF，对于两字节的无法解析，现在可以使用大括号{}来解析，"\u0061"-> 直接输出为 a，"\u{20BB7}"

 

6、字符串扩展

str.includes() 传入要查找的字符串，起始位置，返回布尔值，字符串是否包含参数字符串

str.startsWith() 传入要查找的字符串，起始位置，返回布尔值，字符串是否在元字符串头部

str.endsWith() 传入要查找的字符串，起始位置 (注意)，返回布尔值，表示参数是否在元字符的尾部

 

三、数值扩展

1、二进制表示法与八进制表示法：分别用前缀0b与0o表示，可以直接书写，如

0b11 ==> 3

0o11 ==> 9

 

2、Math对象的扩展

Math.trunc() 去掉小数部分，返回证书部分

Math.sign() 判断一个数字是正数、负数、正0还是负0

Math.hypot(...values) 返回所有参数的平方和的平方根，即勾股定理，用处较大

 

四、数组的扩展

1、Array.from() 将类数组对象 (包括字符串) 转换为数组对象

2、Array.of() 将传入的参数存入到数组中，相当于第三种声明数组方式，支持一个参数

3、arr.find() 找出第一个符合条件的元素，传入一个函数，函数的参数分别为item, index，find会遍历整个数组调用回调函数，如果所有元素都不符合条件则返回undefined

4、arr.findIndex()：查找第一个符合条件元素的索引，使用方法与find一致，只是如果找不到符合条件的则返回-1

5、arr.fill()：填充数组(替换元素值)，针对原数组操作，参数：填充的内容，起始位置，结束位置

 

五、for of 遍历 值，可以遍历数组，字符串等遍历接口；不能遍历对象

// 这个实战中显示没有此属性，只有Object.keys(obj)与Object.values(obj)

arr.keys()：用于对数组键名的遍历

arr.values()：用于对数组键值的遍历

arr.entries()：用于对数组键值对的遍历

 

六、数组推导：直接送过现有数组生成新的数组

var arr1 = [1,2,3,4,5];

 

var arr2 = [for(value of arr1) value*2];

console.log(arr2);

 

var arr3 = [for(i of arr1) if (i>2) i];

console.log(arr3);

 

var arr4 = [for(i of arr1) if(i>2) if(i<4) i];

console.log(arr4);

七、对象扩展

1、对象return时，过去只能{x: x, y: y}，ES6中可以直接return {x, y}

2、对象中的函数：过去：showName: function(){...}；ES6中：可以直接showName(){...}函数内部表达是一样的

3、属性名表达式：允许使用表达式作为对象的属性名，可以把表达式放在[]中作为属性名/函数名

4、Object.is() 传入的两个参数是否完全相等，比如0，-0；NaN，NaN；

5、Object.assign(target [, source1,..., sourceN])：将source对象的可枚举属性赋值到target对象上；注意，如果source对象中有重名属性，则后面的属性会覆盖前面的属性

6、Object.getPrototypeOf(obj)获取obj的prototype属性

7、Object.setPrototypeOf(obj, prototype)用来设置一个对象的prototype对象

8、__proto__：用来读取或设置当前对象的prototype对象；如var obj = {__proto__ : super};

9、Proxy对象：做代理，get(obj, attr){}，在对象的属性值被调用的时候触发；set(obj, attr, value){}在对象的属性值被修改的时候触发

10、Object.observe(obj, observe, [eventType]) 可以检测对属性的设置，不能检测到访问。 传入参数：需要监控的对象，回调函数，接收一个数组参数，指定事件；EventType ： add 添加属性；update 属性值变化；delete 删除属性； setPrototype 设置原型； reconfigure 属性的attrbutes对象发生变化

11、Object.unobserve(obj, observe) 取消监测

12、Reflect.ownKeys(obj)获取obj的键名，返回数组

 

八、函数的扩展

1、可以像别的语言一样，直接在参数值处直接赋值，也可以赋值对象，如function test(a,b,c=3){}

注意：定义默认值的参数必须是尾参数，因为定义默认值之后该参数可以忽略

2、当实参数过多的话，可以在必要的形参后面 ...rest，可以获取多余参数，rest后面不能有参数

如： function fn(a, b, c, ...rest){console.log(rest)} fn(1,2,3,4,5,6,7) //[4,5,6,7]

3、扩展运算符(...varName)：基于遍历接口的，可以将数组/类数组对象拆开，转换为一个用逗号分隔的参数序列

如：var arr = [1,2,3]; Math.max(...arr); //3

var str = ‘abcd‘; console.log([...str]); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]

4、箭头函数：作为回调函数使用，(参数) => {操作}；当只有一个参数可以省略()，只有一步操作可以省略{}

注意：

①函数体内的this对象，指定义的时候指向谁就是谁，不是使用时的对象

②不可以当做构造函数，不能使用new，否则会报错

③没有arguments

 

九、新增数据结构

1、Set：构造方法： new Set( [Array] )，传入的是一个数组或者类数组等有遍历接口的。Set中不会有重复的成员

常用的方法/属性：

set.size 返回set的长度

set.add(value) 添加某一成员

set.delete(value) 删除某一成员

set.has(value) 返回set中是否存在该成员

set.clear() 清空set对象

2、WeakSet(list)

与Set类似，也是不重复值的集合

WeakSet是一个构造函数，也可以传入一个类数组初始化默认值；成员只能是对象；不能其他类型的值；对象都是弱引用，即垃圾回收机制不考虑；是不可遍历的。

提供的方法：

ws.add(value) 添加值

ws.delete(value) 删除值

ws.has(value) 判断传入的参数是否为其成员

3、map：构造方法： new Map([[k1, v1], [k2, v2], ... ])，重复的key后面的会覆盖前面内的，允许各种类型，包括对象作为key

常用方法：

map.size

map.set( key, value )

map.get(key)

map.has(key)

map.clear()

map中提供的遍历接口，前三个使用for of进行遍历：keys()，values()，entries()，forEach()

也有WeakMap，用处不多

 

十、遍历接口

ES6中引入了一种新的原始数据类型，Symbol，表示独一无二的ID。它通过Symbol函数生成

Iterator 遍历接口部署方法：

object[Symbol.iterator] = function(){

return {next(){ return {value: value, done:bollean } }}

}

举例，对所有对象部署遍历接口，使其可以直接使用for of

Object.prototype[Symbol.iterator] = function() {

var keys = Object.keys(this);

var _self = this;

var index = 0;

return {

next(){

if(index < keys.length){

return {value: _self[keys[index++]], done: false};

}else{

return {value: undefined, done: true};

}

}

};

}

 

十一、Generator 函数：一个函数的内部状态的遍历器，每调用一次，函数的内部状态就会发生一次改变，但会保留这个状态，下次调用next()时会继续向下执行，返回一个遍历接口；注意：function后有个*，使用yield关键字

function* fn() {

var a = yield 1;

console.log(a);

yield 2;

}

var f = fn();

console.log(f.next());

console.log(f.next(‘20161226‘)); // 这里传入的参数会传入第1次调用yield的接收参数

console.log(f.next());

 

十二、Promise对象：代表了未来某个将要发生的时间，通常是一个异步操作，它的好处在于有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数；

例子1：

var p1 = new Promise(function(resolve, reject){// 成功状态，失败状态

setTimeout(function(){

resolve();

}, 400)

});

p1.then(function(){

console.log(‘成功‘);

console.log(b); // b不存在，会报错

}, function(){

console.log(‘失败‘);

}).catch(function(e){

console.log(e); // 但是有了catch就会捕捉错误信息，不会影响程序的正常执行。

})

 

例子2：

var p1 = new Promise(function(resolve, reject){

setTimeout(function(){

resolve();

console.log(‘p1‘);

}, 20);

});

 

var p2 = new Promise(function(resolve, reject){

setTimeout(function(){

// resolve();

reject();

console.log(‘p2‘);

}, 400);

});

 

var p3 = new Promise(function(resolve, reject){

setTimeout(function(){

resolve();

console.log(‘p3‘);

}, 1000);

});

 

// 当p1 p2 p3的状态都为成功(fulfilled)，resolve被执行即为成功，p4才是fulfilled

// 当reject执行了就是失败；如果两个都没有执行，则为中间态，既不成功也不失败，p4的两个方法都不执行

var p4 = Promise.all([p1, p2, p3]);

p4.then(function() {

console.log(‘成功‘);

}, function() {

console.log(‘失败‘);

 

与Promise.all类似，有var p = Promise.race()：

1、只要有一个为fulfilled，则p就是fulfilled

2、只要有一个失败，则p就是失败的

 

十三、Class类

1、Class关键字用来声明一个类

2、constructor构造函数

3、extends继承

4、super指代父级同名方法

 

十四、module：es6所提供的模块化

as关键字：为输入的变量换一个新名字

export命令：用于用于自定义模块，规定对外接口，

语法： export var name = ‘aaa‘; export {name1, name2}

import命令用于输入其他模块提供的接口

语法：import {name1, name2} from ‘文件路径‘

输入的名称必须与输出的名称一致

模块的继承：export * from ‘模块路径名‘，输出模块中所有的方法和属性

export {a as b} from ‘模块路径名‘，将模块中的a变量转为b输出

 

十五、ES6代码转换为ES5代码需要使用的 babel、webpack工具

 

扩展阅读： ECMAScript 6 入门 http://es6.ruanyifeng.com/#README