ES6（ECMAScript6）新特性

点击打开链接

• 箭头操作符

ES6中新增的箭头操作符=>简化了函数的书写，操作符左边为输入的参数，右边是进行的操作以及返回的值。引入箭头操作符后可以方便地写回调了：

var array=[1,2,3];
//传统写法
array.forEach(function(v,i,a){
  console.log(v);
});
//ES6
array.forEach(v=>console.log(v));

var sum=(num1,num2)=>{return num1+num2;}
//等同于
var sum=function(num1,num2){
  return num1+num2;
};

箭头函数还修复了this的指向，使其永远指向词法作用域：

var obj={
   birth:1990,
   getAge:function(){
     var b=this.birth;
     var fn=()=>new Date().getFullYear()-this.birth;//this指向obj对象
     return fn();
  }
};
obj.getAge();

• 类的支持

ES6中添加了对类的支持，引入了class关键字。使得对象的创建、继承更加直观，并且父类方法的调用、实例化、静态方法和构造函数等概念都更加形象化。

//类的定义
class Animal{
  //ES6中新型构造器
  constructor(name){
     this.name=name;
   }
   //实例方法,方法名不用加上function或者：了。
   sayName(){
      console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal{
  constructor(name){
    //直接调用父类构造器进行初始化，super()方法
    super(name);
   }
   program(){
     console.log("I'm coding...");
   }
}
//测试类
var animal=new Animal('cat');
var dog=new Programmer('dog');
animal.sayName();
dog.sayName();

增强的对象字面量

对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了：

• 可以在对象字面量里定义原型
• 定义方法可以不用function关键字
• 直接调用父类方法

//通过对象字面量创建对象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //设置此对象的原型为human,相当于继承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’

• 字符串模板

ES6中允许使用反引`来创建字符串，创建的字符串里面可以包括由${}包裹的变量。

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

• 解构

自动解析数组或对象中的值，比如一个函数要返回多个值，常规的做法是返回一个对象，将每个作为这个对象的属性返回。但在ES6中，利用解构，可以直接返回一个数组，然后数组中的值会被自动解析到对应接收该值的变量中。

var [x,y]=getVal(),//函数返回值的解构
    [name,,age]=['wayou','male','secrect'];//数组解构

function getVal() {
    return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//输出：x:1, y:2 
console.log('name:'+name+', age:'+age);//输出： name:wayou, age:secrect 

• 参数默认值，不定参数，拓展参数

function sayHello(name){
	//传统的指定默认参数的方式
	var name=name||'dude';
	console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}
sayHello();//输出：Hello dude
sayHello('Wayou');//输出：Hello Wayou
sayHello2();//输出：Hello dude
sayHello2('Wayou');//输出：Hello Wayou

不定参数的格式是三个句点后跟代表所有不定参数的变量名：

//将所有参数相加的函数
function add(...x){
	return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15

拓展参数允许传递数组或类数组直接作为函数的参数而不用通过apply：

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数
function sayHello(people1,people2,people3){
	console.log(`Hello ${people1},${people2},${people3}`);
}
//将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock 

//而在以前，如果需要传递数组当参数，需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock 

• let与const关键字

可以把let堪称var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const用来定义常量，即无法被更改值的变量。

for (let i=0;i<2;i++)console.log(i);//输出: 0,1
console.log(i);//输出：undefined,严格模式下会报错

• for of值遍历

与for in类似，不同的是每次循环它提供的不是序号而是值。

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//输出 a,b,c
}

• 模块

在ES6标准中，原生JavaScript支持module了。将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块导入方式可以在其他地方使用。

// point.js
module "point" {
    export class Point {
        constructor (x, y) {
            public x = x;
            public y = y;
        }
    }
}
 
// myapp.js
//声明引用的模块
module point from "/point.js";
//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
import Point from "point";
 
var origin = new Point(0, 0);
console.log(origin);

• Map,Set和WeakMap,WeakSet

新加的集合类型，提供了更加方便的获取属性值的方法，不用使用hasOwnProperty来检验某个属性是属于原型链还是当前对象的。在进行属性值添加与获取时有专门的get()，set()方法。

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它，所以ws不会保存它的值，也就是说这次添加其实没有意思

• Proxies

Proxy可以监听对象身上发生了什么事情，并在发生后执行一些相应的操作：

//定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
var interceptor = {
  set: function (receiver, property, value) {//如果对象被set了，就调用处理程序
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};
//创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 60;//控制台输出：salary is changed to 60

• 对Math,Number,String,Object等添加了许多新的API：

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

• Promises

//创建promise
var promise = new Promise(function(resolve, reject) {
    // 进行一些异步或耗时操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//绑定处理程序
promise.then(function(result) {
	//promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
	//promise失败会执行这里
    console.log(err); // Error: "It broke"
});