摘要：返回布爾值，表示參數字符串是否在源字符串的頭部。參考語法返回一個布爾值與的全等操作符比較兼容環境把對象的值復制到另一個對象里淺拷貝定義方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。語法要設置其原型的對象。

一步一步似爪牙。

學習es6之前我們可能并不知道es6相比es5差距在哪, 但是這并不妨礙我們站在巨人的肩膀上; 程序員就是要樂于嘗鮮;
學習es6最終目的是結合es5 一起進行工程項目開發, 而不是完全拋棄es5 ;
學習的方法是文檔為主, 前人的blog為輔助, 實際console為最終標準 ;
注意!號
留意TODO關鍵詞

http://mp.weixin.qq.com/s?__b...

let 語句聲明一個塊級作用域的本地變量，并且可選的將其初始化為一個值。

參考 : https://developer.mozilla.org...

if (true) {
    console.log(a) // 報錯 : Uncaught ReferenceError: a is not defined(…)
    let a = "js"
} 
// 這里也訪問不到 a

一個作用域不能重復聲明同一個值

if(true){
    var a = 1;
    if (true) {
        let a = "js" // a == "js"
    } 
    a = 3; // a == 3;
    let a = 2 ; // 報錯Uncaught SyntaxError: Identifier "a" has already been declared ; 

    // 題外話, 在console中, 產生報錯后a的內存指引被清除, 可以重新賦值
    let a = 0; // a == 0
    // 但實際開發中, 產生報錯, 后面的代碼不再執行, 所以不會有這種情況產生
}

const 語句聲明一個塊級作用域的本地常量, 必須有值且不能為null, 不能再更改(僅可讀)。

參考 : https://developer.mozilla.org...

const a = 1;
a = 2; // 報錯 : Uncaught TypeError: Assignment to constant variable.(…)

const聲明的數組, 對象, 還可以進行增改查, 但是不能重新定義

const a = [];
    a.push(2)   // a == [2]

const b = {};
    b.a = a ;   // 包含了a數組的對象

只在聲明的作用域有效(與let一樣)

if(true){
    const c = 1;
} 
// 此處訪問會報錯:   Uncaught ReferenceError: c is not defined(…)

總結: 可以把const理解為let的常量版(不可改的let)

參考:

http://www.cnblogs.com/weiwei...

https://developer.mozilla.org...

數組的新語法

let [a, b, c] = [1, 2, 3];
// 即: let a = 1;let b = 2;let c = 3;

let [bar, foo] = [1];
// 解構失敗: undefined
// 即: let bar = 1; let foo = undefined

let [a] = 1;
// 等號的右邊不是數組 (或者嚴格地說，不是可遍歷的解構)
// 報錯：VM2799:2 Uncaught TypeError: undefined is not a function(…)

// 如果賦值的字面量全等undefined, 則默認值生效
let [x = 1] = [undefined];// x  === 1
let [x = 1] = [];//x  ===  1

// null 不全等 undefined, 所以默認值不生效
let [x = 1] = [null];// x  === null

進階語法

// 解構賦值允許指定默認值。
let [foo = true] = []; // 即: foo === true

坑!小心

function f() {
  console.log("aaa");
}
let [x = f()] = [1];// x === 1
// 此處f函數并沒有執行; 如果是es5, 在賦值過程中, 肯定會先執行f()方法: log("aaa")
// es6 沒有執行f方法, 經過粗略查閱文檔, 百谷后, 并沒有得到答案; 生命有限, 留待日后, TODO
// 在與`MeatHill`老師交流過后,得知 , 在此處后面有具體的值，就不需要計算默認值, 賦值是從右往左運行

奇奇怪怪的, 我猜可能會出面試題

let [x = 1, y = x] = [];   // x == 1; y == 1; 
 
let [x = 1, y = x] = [2];  // x == 2; y == 2; 別急, 一步一步來
// 第一步: x = 2(賦值從右到左, x = 1 不會計算);
// 第二步: y = x = 2;

let [x = 1, y = x] = [1, 2]; // 答案呢? 留著想

let [x = y, y = 1] = [];  
// 第一步  x = y ; y未聲明報錯

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

語法

let { foo, bar } = { foo: "aaa", bar: "bbb" }; 
// 變量必須與屬性重名
// 以上其實是 let { foo : foo, bar : bar } = { foo: "aaa", bar: "bbb" };的簡寫;  
// 對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者
// foo === "aaa"; bar === "bbb"


let {foo} = {bar: "baz"}; 
// foo === undefined


let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
// 數值也屬于對象的一種表現形式

默認值

let {x = 3} = {x: undefined};
// x === 3
// 默認值生效的條件是，對象的屬性值嚴格等于undefined。

注意

let { foo: baz } = { foo: "aaa", bar: "bbb" };
// 上面代碼中，foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo。

高階(解析嵌套結構)

let obj = {
  p: [
    "Hello",
    { y: "World" }
  ]
};
let { p: [x, { y }] } = obj
// 注意，這時p是模式，不是變量，因此不會被賦值。

疑難雜癥

let {foo: {bar}} = {baz: "baz"};
// 報錯 : VM3721:2 Uncaught TypeError: Cannot match against "undefined" or "null".(…)
// 報錯 : 等號左邊對象的foo屬性，對應一個子對象。該子對象的bar屬性，解構時會報錯。原因很簡單，因為foo這時等于undefined，再取子屬性就會報錯

let x;
{x} = {x: 1};
// 報錯: 因為JavaScript引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。
// 應該不將大括號寫在行首，避免JavaScript將其解釋為代碼塊, 正確的寫法:
let x;
({x} = {x: 1})

// 第三個參數默認值為 {}
function demo(a, b, {c , d} = {}){
    console.log(a, b, c, d)
    // 1  2 "c" "d"
}
demo(1, 2, {c : "c", d:"d"})

let [a, b, c, d, e] = "hello"
// a === "h", b === "e", ......

let {length} = "hello";
// length === 5
// 類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值

小總結

數組的解構賦值對應的是位置

// 所以可以交換變量的值
let x = 1;
let y = 2;
[x, y] = [y, x];

對象對應的是鍵名

解構的意義

數組結構可以方便快速的交換變量的值

接受函數return的值, 如果函數返回array或者object, 利用解構方便快捷

解析JSON數據

代替 ||

參考

https://developer.mozilla.org...

http://www.webfront-js.com/ar...

概念

${} 關鍵詞

反引號包裹字符串

語法

let name = "Bob", 
    time = "today";
console.log(`Hello ${name}, how are you ${time}?`)
// 模板字符串都是用反引號表示，如果在模板字符串中需要使用反引號，則前面需要用反斜杠轉義

多行字符串

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

參考

https://developer.mozilla.org...

function a(b, ...c){
    console.log(b)
    // ["我的年齡是", ",我的性別是", "", raw: Array[3]]

    console.log(c)
    // Array : ["1", "nan"]
}
let d = "1";
a`我的年齡是$77d7vv5,我的性別是${f}`

在標簽函數的第一個參數中，存在一個特殊的屬性raw ，我們可以通過它來訪問模板字符串的原始字符串

傳統上，JavaScript只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6又為String對象擴展了三種新方法。

參考

includes : https://developer.mozilla.org...

startsWith : https://developer.mozilla.org...

endsWith : https://developer.mozilla.org...

includes()：返回布爾值，表示是否找到了參數字符串。

"Blue Whale".includes("blue"); // return false
"Blue Whale".includes("Whale" , 2); // return true

startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。

"Blue Whale".startsWith("blue"); // return false
"Blue Whale".startsWith("Whale" , 2); // return false
"Blue Whale".startsWith("Whale" , 5); // return true

endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。

"Blue Whale".endsWith("blue"); // return false
"Blue Whale".endsWith("Whale" , 10); // return true
"0Blue".endsWith("Blue" , 5); // return true

以前es5 : 
function makeRequest(url, timeout, callback) {
    timeout = timeout || 2000;
    callback = callback || function() {};
    // ...
}

現在es6 :
function makeRequest(url, timeout = 2000, callback = function(){}) {
    // ...
}

如果不傳入參數, 或者傳入undefined, 則使用默認值;

參考:

https://developer.mozilla.org...

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

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

function func(x, y, z, a, b) {
    console.log(x, y, z, a, b);
}
var args = [1, 2];
func(0, ...args, 3, ...[4]); // 0 1 2 3 4

// es5使用數組作為參數:
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// es6使用數組作為參數:
function demo(x, y, z) { 
    console.log(x, y, z)
}
var args = [0, 1, 2];
demo(...args); 

let arr = [1, 2, 3];
let arr2 = [...arr]; // 就像是 arr.slice()

arr2.push(4); 

console.log(arr2) // [1, 2, 3, 4]
// arr 不受影響

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1  , ...arr2]
// arr3 : [0, 1, 2, 3, 4, 5]

var nodeList = document.querySelectorAll("div");
var array = [...nodeList];
// 實際: 360瀏覽器報錯 : VM2386:3 Uncaught TypeError: nodeList[Symbol.iterator] is not a function(…)
// 版本: 8.7.0.306

// 火狐為一個空數組
// 版本:26.0.0.137

// google為undefined
// 版本:57.0.2987.133

參考

https://developer.mozilla.org...

https://developer.mozilla.org...

剩余參數只包含那些沒有對應形參的實參

function(a, b, ...restArgs) {
  // ...restArgs 即為剩余參數, 是一個Array對象
}

剩余參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的所有實參。

arguments 對象不是一個真實的數組,而剩余參數是真實的 Array實例，也就是說你能夠在它上面直接使用所有的數組方法，比如 sort，map，forEach，pop。

arguments 對象對象還有一些附加的屬性 (比如callee屬性)。

function fun1(...theArgs) {
  alert(theArgs.length);
}
 
fun1();  // 彈出 "0", 因為theArgs沒有元素
fun1(5); // 彈出 "1", 因為theArgs只有一個元素
fun1(5, 6, 7); // 彈出 "3", 因為theArgs有三個元素

// TODO

函數的name屬性，返回該函數的函數名。
這個屬性早就被瀏覽器廣泛支持，但是直到 ES6 ，才將其寫入了標準。

function foo() {}  
foo.name // "foo"  

并不完全支持的ES6(360瀏覽器環境)

var a = function(){}
a.name
// 空字符串: "" 

let b = function(){}
b.name
// 同樣是 ""

解讀:
ES6 對這個屬性的行為做出了一些修改。如果將一個匿名函數賦值給一個變量， ES5 的name屬性，會返回空字符串，而 ES6 的name屬性會返回實際的函數名。

但實際上國內目前主流瀏覽器支持的還是es5為主, 在node下搭建的es6環境, 才會返回實際的函數名(Google測試已經支持)

函數名的優先級

let a = function d(demo){}
a.name // "d"

重點:
!箭頭函數會捕獲其所在上下文的 this 值，作為自己的 this 值
!也就是可以理解為: 箭頭函數沒有自己的this, 如果上下文沒有this, 則this指向Window對象

參考

ES6-this[MDN} : https://developer.mozilla.org...

什么時候不該使用箭頭函數:https://segmentfault.com/a/11...

基礎語法

let demoFun = oArgument => oDessert
// demoFun 為函數名
// oArgument 為函數形參
// oDessert 為返回的值


let func = (x, y) => { return x + y; }; 
//常規編寫 明確的返回值

高級語法

let demoFun = (oArgument, drink) => oArgument + drink
// 返回的是 oArgument + drink

let demoFun = params => ({foo: bar})
//返回一個對象時，函數體外要加圓括號

let demoFun = (param1, param2, ...rest) => { statements }
// 支持 剩余參數和默認參數:

不綁定 this

箭頭函數會捕獲其所在上下文的 this 值，作為自己的 this 值，因此下面的代碼將如期運行。

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回調里面的 `this` 變量就指向了期望的那個對象了
        this.age++;
    }, 3000);
}
var p = new Person();

箭頭函數沒有自己的 arguments

var arr = () => arguments;
arr();  // Uncaught ReferenceError: arguments is not defined(…)

箭頭函數不能用作構造器，和 new 一起用就會拋出錯誤。

var Foo = () => {};
var foo = new Foo();  // TypeError: Foo is not a constructor

箭頭函數沒有原型屬性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

箭頭不是操作符

在箭頭函數中的箭頭不是操作符(或者運算符,就像"+ -"那些)， 但是箭頭函數有特殊的解析規則就是：相比普通的函數，受操作符的優先級影響。參考: https://developer.mozilla.org...

let callback;
callback = callback || function() {}; // ok
callback = callback || () => {};      // SyntaxError:非法箭頭函數屬性
callback = callback || (() => {});    // ok

像方法一樣使用箭頭函數

"use strict";
let obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // undefined, Window對象, 此處或許有疑問, 可翻閱?提過的`!`
obj.c(); // 10, Object {...}

不能返回預期的對象

let func = () => {  foo: 1  };
// undefined

所以，記得用圓括號把文字表達式包起來：

var func = () => ({ foo: 1 });

箭頭u函數在某些情況加還是很有便利的, 但是新的語法, 可讀性有所轉變, 要多使用, 多看才行

// TODO

參考:
https://developer.mozilla.org...

// TODO

Object.is() 方法確定兩個值是否是 相同的值。

參考:

https://developer.mozilla.org...

Object.is(value1, value2); // 返回一個布爾值

ES6:

Object.is(NaN, NaN); // true

Object.is(0, -0); // fasle
Object.is(-0, +0) // false

Object.is({},{})  // false

var a = function () {};
var b = function () {};
Object.is(a, b) //false

ES5

NaN === NaN // false;

0 === -0 // true
-0 === +0 // true

{} === {} // false

var a = function () {};
var b = function () {};
a === b //false

if (!Object.is) {
  Object.is = function(x, y) {
    // SameValue algorithm
    if (x === y) { // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  };
}

Object.assign() 方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

// target目標對象。
// sources(多個)源對象。
Object.assign(target, ...sources)

var obj = { a: 1 };
var copy = Object.assign({}, obj); // {a: 1}

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign({},o1, o2, o3); // Object {a: 1, b: 2, c: 3}

繼承屬性和不可枚舉屬性是不能拷貝的

原始類型會被包裝為 object

var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo")

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始類型會被包裝，null 和 undefined 會被忽略。
// 注意，只有字符串的包裝對象才可能有自身可枚舉屬性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

異常會打斷接下來的拷貝任務

參考:

https://developer.mozilla.org...

Object.setPrototypeOf() 方法設置一個指定的對象的原型 ( 即, 內部[[Prototype]]屬性）到另一個對象或 null。

Object.setPrototypeOf(obj, prototype)
// obj          要設置其原型的對象。.
// prototype    該對象的新原型(一個對象 或 null).

var dict = Object.setPrototypeOf({}, null); // Object {}

參考

https://developer.mozilla.org...

es6 可以設置對象的__proto__

參考: 
https://developer.mozilla.org...

super 關鍵字用于調用一個對象的父對象上的函數。

參考:

MDN -迭代器&生成器 : https://developer.mozilla.org...

ES6學習——迭代器（Iterators）：迭代器接口高級應用 - Challenge Next Challenge - CSDN博客

http://blog.csdn.net/kittyjie...

sf - [譯]迭代器指南 : https://segmentfault.com/a/11...

參考:

MDN -迭代器&生成器 : https://developer.mozilla.org...

JavaScript 現有的基于原型的繼承的語法糖, 提供了一個更簡單和更清晰的語法來創建對象并處理繼承。

類實際上是個“特殊的函數”，就像你能夠定義的函數表達式和函數聲明一樣，類語法有兩個組成部分：類表達式和類聲明。

參考:

sf - ES6探秘 : https://segmentfault.com/a/11...

使用class關鍵字聲明類

// 聲明一個類名為 Rectangle  的JS類
// constructor方法用于創建和初始化使用一個類創建的一個對象。只允許存在一個
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

類聲明不會聲明提升

類表達式可以是被命名的或匿名的。

/* 匿名類 */ 
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

/* 命名的類 */ 
let Rectangle = class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

如果沒有指定this, this值將為undefined。

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
let speak = obj.speak;
speak(); // undefined

let eat = Animal.eat;
eat(); // undefined

"use strict"
// 創建一個 Chef 類
class Chef {
    // 初始化
    // 接收參數
    constructor(food){
        this.food = food;
    }

    cook(){
        console.log(this.food)
    }

}
let qing = new Chef("?")
qing.cook(); // ?

參考:
http://blog.csdn.net/qq_30100...

"use strict"
// 創建一個 Chef 類
class Chef {
    // 初始化
    // 接收參數
    constructor(food){
        this.food = food;
        this.dishs = [];
    }

    get menu(){
        return this.dishs;
    }

    set menu(dishs){
        this.dishs.push(dish)
    }

    cook(){
        console.log(this.food)
    }

}
let qing = new Chef()
console.log(qing.menu = "?") //?
console.log(qing.menu = "?") // ?

"use strict"
// 創建一個 Chef 類
class Chef {
    // 初始化
    // 接收參數
    constructor(food){
        this.food = food;
        this.dishs = [];
    }

    get menu(){
        return this.dishs;
    }

    set menu(dishs){
        this.dishs.push(dish)
    }

    static cook(food){
        console.log(food)
    }

}

// 不需要實例化Chef即可以直接使用
Chef.cook("?") 
// 輸出 : ?

"use strict"
class Person{
    constructor(name, birthday){
        this.name = name
        this.birthday = birthday
    }

    intro(){
        return `${this.name}, ${this.birthday}`
    }
}

// 使得Chef類 繼承 Person類
class Chef extends Person{
    constructor(name, birthday){
        // 調用父類的constructor函數 
        super(name, birthday)
    }
}

let qing = new Chef("qing", "1949-10-1");

// 實例化后才可使用 Chef類 的intro方法
qing.intro() // "qing, 1949-10-1"

參考:

MDN - https://developer.mozilla.org...

Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。

new Set([iterable]);
// iterable 
// 如果傳遞一個可迭代對象，它的所有元素將被添加到新的 Set中。
// 如果不指定此參數或其值為null，則新的 Set為空

// 返回值
// 一個新的Set對象。

DEMO:

使用Set對象

let mySet = new Set();

mySet.add(1); // {1}
mySet.add(5); // {1, 5}
mySet.add("some text"); //{1, 5, "some text"}

mySet.has(1); // true
mySet.has(3); // false
mySet.has(5); // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // true

mySet.size; // 返回Set對象的值的個數 ： 3

mySet.delete(5); //  從set中移除5并返回true
mySet.delete(8); //  不存在8, 返回false
mySet.has(5);    // false, 5已經被移除

mySet.size; // 2, 我們剛剛移除了一個值

// 按照插入順序，為Set對象中的每一個值調用一次callBackFn。如果提供了thisArg參數，回調中的this會是這個參數。
mySet.forEach(callbackFn[, thisArg])

// 與values()方法相同，返回一個新的迭代器對象，該對象包含Set對象中的按插入順序排列的所有元素的值。
mySet.keys()

// 返回一個新的迭代器對象，該對象包含Set對象中的按插入順序排列的所有元素的值。
mySet.values()


mySet.clear() // 清空全部值

var myArray = ["value1", "value2", "value3"];

// 用Set構造器將Array轉換為Set
var mySet = new Set(myArray);

mySet.has("value1"); // returns true

// 用...(展開操作符)操作符將Set轉換為Array
console.log([...mySet]); // 與myArray完全一致

參考:
https://developer.mozilla.org...

Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

var myMap = new Map();
 
var keyObj = {},
    keyFunc = function () {},
    keyString = "a string";
 
// 添加鍵
myMap.set(keyString, "和鍵"a string"關聯的值");
myMap.set(keyObj, "和鍵keyObj關聯的值");
myMap.set(keyFunc, "和鍵keyFunc關聯的值");
 
myMap.size; // 3
 
// 讀取值
myMap.get(keyString);    // "和鍵"a string"關聯的值"
myMap.get(keyObj);       // "和鍵keyObj關聯的值"
myMap.get(keyFunc);      // "和鍵keyFunc關聯的值"
 
myMap.get("a string");   // "和鍵"a string"關聯的值"
                         // 因為keyString === "a string"
myMap.get({});           // undefined, 因為keyObj !== {}
myMap.get(function() {}) // undefined, 因為keyFunc !== function () {}

Map 認為 NaN === NaN

var myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN); // "not a number"

Map可以獲得length, Object不可以

Map的鍵可以是任意字, Object的只能為字符串, 或者變量

Map 認為 NaN === NaN

Map內置很多迭代, 查詢, 操作方法

花了半天時間學習了下ES6的部分新語法丶新特性。 不求精通, 但說涉獵。不實踐怎么來的發言權 ;

ES6新增了很多方法和功能參數, 但是其實相對于ES5來, 變革性并不是那么大, 學起來興趣乏乏, 有點像雞肋;

ES6中我最感興趣的是Promise , Class, 期待ES8的異步函數（Async Functions） ;

項目中打算深入實踐ES6, 畢竟這波不虧 ? ;

原文地址: https://segmentfault.com/a/11...
轉載無需聯系, 但請著名來源 @SF.GG-Starch。程序員就是要敢于, 樂于嘗鮮;