摘要：快速入門簡介以下簡稱是語言的下一代標(biāo)準，已經(jīng)在年月正式發(fā)布了。而且聲明后必須立即初始化賦值，不能后面賦值。方法默認返回實例對象即，可以指定返回另外一個對象。參數(shù)搭配的變量是一個數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標(biāo)準，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。

ES6與ECMAScript2015的關(guān)系

ES6的第一個版本，就這樣在2015年6月發(fā)布了，正式名稱就是《ECMAScript 2015標(biāo)準》（簡稱ES2015）。，ES6既是一個歷史名詞，也是一個泛指，含義是5.1版以后的JavaScript的下一代標(biāo)準，涵蓋了ES2015、ES2016、ES2017等等，而ES2015則是正式名稱，特指該年發(fā)布的正式版本的語言標(biāo)準。

所以，我們可以認為ES6 = ES2015

由于不是目前所有的瀏覽器都能兼容ES6的全部特性，所以實際的項目還是主要有ES5語法來開發(fā)。

這里可以看到 es6在各大瀏覽器的支持程度http://kangax.github.io/compat-table/es6/

但是ES6畢竟是以后的標(biāo)準，而且約來越多的項目已經(jīng)在用ES6開發(fā)了，你需要看懂別的人寫的代碼，同時讓自己寫的代碼讓別人看懂，最重要的是如果有天妹子問你，啥是ES6呀？

Babel是一個廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行?？梢匀ス倬W(wǎng)了解一下https://babeljs.io/

Babel做的事情很簡單，將ES6語法寫出的代碼，解析成ES5的語法，從而使得目前所有的瀏覽器都能正常運行。

比如：

// 轉(zhuǎn)碼前
input.map(item => item + 1);

// 轉(zhuǎn)碼后
input.map(function (item) {
  return item + 1;
});

可以在babel官網(wǎng)上，在線查看ES6代碼轉(zhuǎn)換成ES5是什么樣子的。

http://babeljs.io/repl/ 有時候不太穩(wěn)定，可能需要翻一下 ┑(￣Д ￣)┍

在項目中使用babel需要配置.babelrc文件，存放在項目根目錄下。

先安裝 bable-cli

npm install babel-cli -g

然后安裝一個將es6編譯成es5的插件

npm install --save-dev babel-preset-es2015

將.babelrc中添加這個配置

{
    "presets": ["es2015"],
    "plugins": []
  }

然后運行

babel es6.js -o es5.js

就可以看到es5.js就是解析過后的腳本

babel有大量的插件，還需要大家自己去了解。

let

let和const的用法都類似var。let是塊級作用域聲明，所聲明的變量，只在let所在的代碼塊內(nèi)有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

最為典型的例子，for循環(huán)

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

我們往往需要使用閉包的手法來處理

var a = [];
for (var i = 0; i < 10; i++) {
  (function(i){
    a[i] = function () {
    console.log(i);
    };
  })(i);
}
a[6]();  //6

換成let會方便很多

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

變量提升問題

var聲明會存在變量提升的問題，如果變量在聲明前使用，其值則會輸出 undefined。let聲明則改變了這種奇怪的邏輯，let所聲明的變量必須先聲明，后使用，否則就會報錯。

// var 的情況
console.log(foo); // undefined
var foo = 2;

// let 的情況
console.log(bar); // ReferenceError
let bar = 2;

不能重復(fù)聲明

和var不同，let不允許在相同作用域中，重復(fù)聲明同一個變量。

// 正常
function () {
  var a = 10;
  var a = 1;
}
// 報錯
function () {
  let a = 10;
  var a = 1;
}

// 報錯
function () {
  let a = 10;
  let a = 1;
}

const

const用來聲明一個常量。一旦聲明，常量的值就不能改變。而且聲明后必須立即初始化賦值，不能后面賦值。

//報錯
const PI = 3.1415;
PI // 3.1415
PI = 3;

//報錯
const DOMAIN;
DOMAIN = "jd.com";

const和let很相似：1.只在塊級作用域中有效，2.不會提升變量，3.不能重復(fù)定義變量。

const聲明的變量雖然無法改變，但是const命令只是保證所賦值的變量指向的地址不變，并不保證改地址的數(shù)據(jù)不變，所以當(dāng)賦值的變量是一個值引用型的變量的時候，要格外的小心。

JavaScript語言的傳統(tǒng)方法是通過構(gòu)造函數(shù)，定義并生成新對象。

function Human(name) {
  this.name = name;
}

Human.prototype.sayName = function () {
  return "(My name is" + this.name + )";
};
var zhang3 = new Human("zhang3");
var li4 = new Human("li4");
var wang5 = new Human("wang5");

ES6提供了更接近傳統(tǒng)語言(C++和Java)的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關(guān)鍵字，可以定義類。基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。上面的代碼用ES6的“類”改寫，就是下面這樣。

class Human {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    return "(My name is" + this.name + )";
  }
}

var zhang3 = new Human("zhang3");
var li4 = new Human("li4");
var wang5 = new Human("wang5");

constructor

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調(diào)用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

constructor方法默認返回實例對象（即this），可以指定返回另外一個對象。

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

extends

Class之間可以通過extends關(guān)鍵字實現(xiàn)繼承，這比ES5的通過修改原型鏈實現(xiàn)繼承，要清晰和方便很多。

class Woman extends Human {
  constructor(name) {
    super(name); // 調(diào)用父類的constructor(name);
    this.sex = "female";
  }
}

let hanmeimei = new Woman("hanmeimei");

需要用函數(shù)表達式的地方，可以用=>代替，代碼簡潔，而且綁定了this.

// bad
[1, 2, 3].map(function (x) {
  return x * x;
});

// good
[1, 2, 3].map((x) => {
  return x * x;
});

// best
[1, 2, 3].map(x => x * x);

箭頭函數(shù)取代Function.prototype.bind

// bad
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構(gòu)（Destructuring）。

沒明白啥意思，show me the code

數(shù)組解構(gòu)賦值

// before
let a = 1;
let b = 2;
let c = 3;
//after
let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];
let [ , , third] = ["foo", "bar", "baz"];

對象解構(gòu)賦值

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

//變量名和屬性名如果不一樣，可以這樣寫
var { foo: baz } = { foo: "aaa", bar: "bbb" };

字符串解構(gòu)賦值

const [a, b, c, d, e] = "hello";

還可以對數(shù)值和布爾值，函數(shù)參數(shù)解構(gòu)賦值。

Set

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

// 例一
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
function divs () {
  return [...document.querySelectorAll("div")];
}

var set = new Set(divs());
set.size // 56

// 類似于
divs().forEach(div => set.add(div));
set.size // 56

Map

JavaScript的對象（Object），本質(zhì)上是鍵值對的集合（Hash結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當(dāng)作鍵。這給它的使用帶來了很大的限制。為了解決這個問題，ES6提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。也就是說，Object結(jié)構(gòu)提供了“字符串—值”的對應(yīng)，Map結(jié)構(gòu)提供了“值—值”的對應(yīng)，是一種更完善的Hash結(jié)構(gòu)實現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu)，Map比Object更合適。

var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content")
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

傳統(tǒng)的JavaScript語言，輸出模板通常是這樣寫的。

$("#result").append(
  "There are " + basket.count + " " +
  "items in your basket, " +
  "" + basket.onSale +
  " are on sale!"
);

ES6是這樣解決的

$("#result").append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。

$("#list").html(`

  
first
  
second

`);

同時字符串模板中還可以嵌入變量，變量可以寫在${}里面。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

字符串模板還支持嵌套

const tmpl = addrs => `
  
  ${addrs.map(addr => `
    
  `).join("")}
  
${addr.first}
    
${addr.last}
`;
const data = [
    { first: "", last: "Bond" },
    { first: "Lars", last: "" },
];

console.log(tmpl(data));
// 
//
//   
//   
//
//   
//   
//
// 
Bond
Lars

在以前，我們聲明了一個有很多參數(shù)的函數(shù)時，無法直接指定默認值，所有會很很多default配置來處理。

function log(x, y) {
  y = y || "World";
  console.log(x, y);
}

但是這種處理方法是不安全的，如果我們這樣賦值

log("Hello") // Hello World
log("Hello", "China") // Hello China
log("Hello", "") // Hello World

ES6 允許為函數(shù)的參數(shù)設(shè)置默認值，即直接寫在參數(shù)定義的后面。

function log(x, y = "World") {
  console.log(x, y);
}

log("Hello") // Hello World
log("Hello", "China") // Hello China
log("Hello", "") // Hello

ES6 引入 rest 參數(shù)（形式為“...變量名”），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對象了。rest 參數(shù)搭配的變量是一個數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

擴展運算符 ...

它好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll("div")]
// [
, 
, 
]

參考資料

http://es6.ruanyifeng.com/

http://www.jianshu.com/p/ebfe...