初探ES6(1)...

直接進入正題吧，儘可能關於ES6的知識點都能涉及到。

let const

let 和 const 用法與 var 相似，
都是變量的聲明，可是let具備塊級做用域。那是什麼概念呢？看下面的例子。

for(var i = 0; i<10; ++i) {}
console.log(i); //10
for(let j = 0; j<10; ++j) {};
console.log(j); //undefined

上面的例子很明顯的展現了let的塊級做用域特性。
let不能夠重複聲明，會提示咱們:

let x = 10;let x = 20; // Uncaught SyntaxError: Identifier 'x' has already been declared

當咱們在全局聲明var的時候，咱們能夠經過window來獲取這個變量，可是let不能夠，
你能夠將let變量看其處在一個無形的做用域內。
我以爲在大部分時候都應該優先使用let,<不敢說任什麼時候候，總怕來個例外..>。
關於const,顧名思義，不可改變，但這也要引用類型和基本類型。
首先，當你聲明一個const變量的時候，必需要初始化。

const x; //Uncaught SyntaxError: Missing initializer in const declaration

基本類型:

`const x = 10;x = 20;//Uncaught TypeError: Identifier 'x' has already been declared`

引用類型: 就有點特殊了，咱們能夠對它帶有的屬性進行，只要不改變它的指向。

const obj = {name: 'jack'};obj.name = 'berry';obj.id = 1;// OK
obj = {}; //Uncaught TypeError: Assignment to constant variable.

Array

Array實在用到它的地方太多了，因此咱們有必要對於它新添加的方法都來過一遍。

Array.from

將一個類數組對象和或可遍歷對象轉換成真正的數組, 不會改變原有對象，返回一個新的數組。
類數組對象:有2種最多見的，咱們都拿出來講下。

let x = document.querySelectorAll('*');
console.log(Array.isArray(x));// false
let y = Array.from(x);
console.log(Array.isArray(x));// false
console.log(Array.isArray(y));// true

   function foo () {
    console.log(Array.isArray(arguments));//false

    let args = Array.from(arguments, x => x * x);
    console.log(Array.isArray(args));//true
    console.log(args);//[1, 4, 9]
}
foo(1, 2, 3);

你能夠看到咱們在foo函數內對於arguments處理的時候 出現了 x => x*x,這也是ES6的新特性(箭頭函數)這咱們將在後面提到。這邊咱們能夠發現Array.from不只能夠轉換成數組，並且能夠對其中的值進行操做，咱們來看下它完整的函數定義。
Array.from(arrayLike[, mapFn[, thisArg]])
第一個是必需參數，即要轉換的對象，第二個是可選參數，是一個函數，第三個也是可選參數，指定mapFn的this對象。
因此啦，咱們拆出來當作Array.from(arrayLike).map(mapFn, thisArg)

Array.prototype.fill

arr.fill(value[, start = 0[, end = this.length]])

使用 value 填充從 start至end的區間，而且會修改原數組對象，而且返回自身， 隨便看個例子就好。

let arr = [1, 2, 3];
    console.log(arr.fill(10, 0, 2)); //[10, 10, 3]
    console.log(arr); //[10, 10, 3]

Array.of

Array.of(element0[, element1[, ...[, elementN]]])

將全部傳進來的參數都放進同一個數組，而且返回這個新的數組。

console.log(Array.of('ab', 1, null, undefined));//['ab', 1, null, undefined]

Array.prototype.find

arr.find(callback[, thisArg])

callback中能夠傳遞的參數和在ES5中引入的新方法,如map, filter同樣，有三個參數，分別是:value,index,array,同時, thisArg能夠指定函數中的this
函數不會修改原數組，若是callback返回true,則退出，並返回當前value,若是遍歷結束，返回false,則返回undefined，咱們看下下面這個例子就清楚了。

let arr = [3, 5, 7, 8];
    let res1 = arr.find((value, index, arr) => value+index>=6);
    console.log(res1); //5
    let res2 = arr.find((value, index, arr) => value < index);
    console.log(res2); //undefined

Array.prototype.findIndex

恩。。。 看函數名字就知道了，上面咱們剛提到的find()是找值，這個是找索引，若是找不到則返回-1，因此這邊咱們就提下有這個函數，具體就不展開了。

Array.prototype.keys

arr.keys()

返回一個數組索引的迭代器, 額！！這下又牽扯出新知識了，迭代器。
一步一步來，先繼續這裏的，能夠將問題先留着，先看下它的用法。

for (let i of [10, 20, 30].keys()) {
        console.log(i);//0, 1, 2
    }

上面，咱們的例子會輸出0, 1, 2,這很好理解，就如咱們上面說的，返回當前數組的索引，細心的話能夠發現，咱們for的遍歷採用了for ... of的方式，這也是ES6帶給咱們的全新的遍歷方法，相比於for...in會在當前對象上全部屬性去循環，而它則是直接在數據上進行循環,對於for...of咱們也暫且先不展開，由於它的篇幅也實在能夠扯出太多。

Array.prototype.values

arr.values()

和咱們上面提到的方法對應，返回每一個索引下對應的值，也是一個迭代器，咱們能夠用相同的for...of進行遍歷

for (let i of [10, 20, 30].values()) {
        console.log(i);//10, 20, 30
    }

Array.prototype.entries

arr.entries()

返回一個迭代器，包含每個數組中的 索引與其值， 也能夠稱其爲鍵值對

for (let i of [10, 20, 30].entries()) {
        console.log(i);//[0, 10], [1, 20], [2, 30]
    }

Arrow functions

this

關於 箭頭函數 其實咱們在上面舉例的時候，就已經提到了，可能你已經感覺到了它帶來的便捷，在 箭頭函數中的this指針繼承於它所在的詞法做用域。咱們能夠經過下面的例子來感覺一下，這也是咱們大力推行 箭頭函數 的一個緣由,可讓咱們少考慮一點函數中的this指針帶來的困擾。

let obj1 = {
    arr: [1, 2, 3],
    foo () {
        setTimeout(function () {
            console.log(this.arr);
        }, 0);
    }
}
obj1.foo();//undefined


let obj2 = {
    arr: [1, 2, 3],
    foo () {
        let _self = this;
        setTimeout(function () {
            console.log(_self.arr);
        }, 0);
    }
}
obj2.foo();//[1, 2, 3]

let obj3 = {
    arr: [1, 2, 3],
    foo () {
        setTimeout(() => {
            console.log(this.arr);
        }, 0);
    }
}
obj3.foo();//[1, 2, 3]

咱們往常處理this指針帶來的問題可能會使用 第二種方法或者bind()這邊就不給出了，咱們能夠很清楚地對比得出，箭頭函數給咱們帶來的好處。
對了，可能你發現了，在obj中，我對於foo屬性的值是函數時候的寫法，這也是一個能節省代碼量的方法，使用起來至關方便。

參數和返回值

即使箭頭函數不須要參數，咱們也必須用()來表示，只有在只有一個參數的狀況下，咱們才能夠省略(),對於箭頭函數的返回值，有2種狀況，當你沒有使用{}將包裹，而且只有單行表達式時，則默認以其做爲返回值，反之則應顯示聲明return,一個特殊狀況是對於對象字面量做爲返回值時，始終應當將其用()包裹，不然將以 undefind 處理

console.log(['a'].map( () => {} )); // undefined
console.log(['a'].map( () => ({}) )); // Object
console.log(['a'].map( () => {
    return {};
})) // Object

看上去 彷佛仍是 第三種更直觀。。

一些注意點

它 沒有 arguments,也不能夠對其進行new操做，它沒有自身的this指針，同時它永遠是匿名函數。

若是你們有興趣關於這方面更多知識，能夠自行去如下網站，同時也是我有關ES6的資料來源。
MDN
ES6 in depth
極客學院-深度解析ES6

有任何錯誤，還請指正~~