ES6的新特性-让前后端差异越来越小

ES6（ECMAScript 6）是即将到来的新版本号JavaScript语言的标准，代号harmony(和谐之意，显然没有跟上我国的步伐，我们已经进入中国梦版本号了)。上一次标准的制订还是2009年出台的ES5。

眼下ES6的标准化工作正在进行中，估计会在14年12月份放出正式敲定的版本号。但大部分标准已经就绪，且各浏览器对ES6的支持也正在实现中。

潮流虽然太快。但我们不停下学习的步伐，就不会被潮流丢下的，以下来领略下ES6中新特性，一堵新生代JS的风採。

1、箭头操作符

假设你会C#或者Java，你肯定知道lambda表达式。ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的參数，而右边则是进行的操作以及返回的值Inputs=>outputs。

我们知道在JS中回调是常常的事，而一般回调又以匿名函数的形式出现。每次都须要写一个function。甚是繁琐。当引入箭头操作符后能够方便地写回调了。

请看以下的样例。
var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

2、类的支持

ES6中加入了对类的支持，引入了class关键字（事实上class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本号中会用到，如今最终派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上仅仅是JS原型模式的包装。

如今提供原生的class支持后，对象的创建，继承更加直观了，而且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。

以下代码展示了类在ES6中的使用

//类的定义
class Animal {
    //ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal {
    constructor(name) {
        //直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//測试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’

3、增强的对象字面量

对象字面量被增强了。写法更加简洁与灵活，同一时候在定义对象的时候能够做的事情很多其它了。详细表如今：

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

这样一来。对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了。

//通过对象字面量创建对象
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...’

4、字符串模板

字符串模板相对简单易懂些。ES6中同意使用反引號 ` 来创建字符串，此种方法创建的字符串里面能够包括由美元符号加花括号包裹的变量${vraible}。假设你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。

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

5、解构

自己主动解析数组或对象中的值。比方若一个函数要返回多个值，常规的做法是返回一个对象，将每一个值做为这个对象的属性返回。但在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 

6、let与const 关键字

能够把let看成var。仅仅是它定义的变量被限定在了特定范围内才干使用，而离开这个范围则无效。const则非常直观，用来定义常量。即无法被更改值的变量

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

7、for of 值遍历

我们都知道for in 循环用于遍历数组，类数组或对象。ES6中新引入的for of循环功能类似，不同的是每次循环它提供的不是序号而是值。

var someArray = [ "a", "b", "c" ];

for (v of someArray) {
    console.log(v);//输出 a,b,c
}

8、模块

在ES6标准中，JavaScript原生支持module了。

这样的将JS代码切割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的。比方CommonJS和AMD模式。

将不同功能的代码分别写在不同文件里。各模块仅仅需导出公共接口部分。然后通过模块的导入的方式能够在其它地方使用。

// 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);

9、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;

有时候我们会把对象作为一个对象的键用来存放属性值，普通集合类型比方简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收。有造成内存泄漏的危急。

而WeakMap,WeakSet则更加安全些。这些作为属性键的对象假设没有别的变量在引用它们。则会被回收释放掉。详细还看以下的样例

// 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不会保存它的值，也就是说这次加入事实上没有意思

10、Symbols

我们知道对象事实上是键值对的集合，而键通常来说是字符串。而如今除了字符串外，我们还能够用symbol这样的值来做为对象的键。Symbol是一种基本类型。像数字，字符串还有布尔一样，它不是一个对象。

Symbol 通过调用symbol函数产生，它接收一个可选的名字參数。该函数返回的symbol是唯一的。

之后就能够用这个返回值做为对象的键了。

Symbol还能够用来创建私有属性，外部无法直接訪问由symbol做为键的属性值。

(function() {

  // 创建symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

})();

var c = new MyClass("hello")
c["key"] === undefined//无法訪问该属性。由于是私有的

11、Math。Number。String，Object 的新API

对Math,Number,String还有Object等加入了很多新的API。以下代码相同来自es6features，对这些新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) })

12、Promises

Promises是处理异步操作的一种模式，之前在非常多三方库中有实现，比方jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时。事实上就是在应用promise模式。

//创建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"
});