好程式員JavaScript分享ES6相關知識

好程式員JavaScript分享ES6相關知識，ES6增加的文法

let&&const

[size=0.9em]let與[size=0.9em]var的差別

let 變量名=變量值

　　使用let建立變量和使用var建立變量的差別

1、用var聲明的變量會變量提升，用let聲明的變量不會進行變量提升。

　　用let建立變量

let xxx=xxx;

　　用let建立函數

let xxx=function(){}

　　建立自執行函數

;(function(){

})();

2、用let定義變量不允許在[size=0.9em]同一個作用域中重複聲明一個變量(隻要目前作用域中有這個變量，不管是用var還是用let聲明的，再用let聲明的話會報錯：不能重複聲明一個變量)，但是可以重複定義(指派)。

let i=10;

let i=20;/會報錯，

i=20;重複指派不會報錯

3、暫時性死區：在代碼塊内，使用let指令聲明變量之前，該變量都是不可以使用的。

if (true) {

// TDZ開始

tmp = 'abc'; // ReferenceError,報錯之後下面都不會輸出

console.log(tmp); // ReferenceError，報錯之後下面都不會輸出

let tmp; // TDZ結束

console.log(tmp); // undefined

tmp = 123;

console.log(tmp); // 123

}

//下面也會報錯出現TDZ

console.log(typeof x); // ReferenceError

let x;

//作為比較如果一個變量根本沒有被聲明，使用typeof反而不會報錯。

console.log(typeof x);// "undefined"

4、ES6文法建立的變量(let)存在塊級作用域

[ES5]

window全局作用域

　　函數執行形成的私有作用域

[ES6]

　　除了有ES5中的兩個作用域，ES6中新增加塊級作用域(我們可以把塊級作用域了解為之前學習的私有作用域，存在私有作用域和作用域鍊的一些機制)[size=0.9em]ES6中把大部分用{｝包起來的都稱之為塊級作用域;

[size=0.9em]const

const細節知識點和let類似

const聲明的常量隻要聲明就必須指派，而且變量的值是一定的，不能被修改;

[size=0.9em]注意：并不是變量的值不得改動，而是變量指向的那個記憶體位址不得改動。對于簡單類型的資料(數值、字元串、布爾值)，值就儲存在變量指向的那個記憶體位址，是以等同于常量。但對于複合類型的資料(主要是對象和數組)，變量指向的記憶體位址，儲存的隻是一個指針，const隻能保證這個指針是固定的，至于它指向的資料結構是不是可變的，就完全不能控制了。是以，将一個對象聲明為常量必須非常小心。

[size=1em][size=1em]const聲明的變量也存在暫時性死區，即隻能在聲明的位置之後使用;

JS中建立變量的方式彙總

[size=1em][size=1em][ES5]

· var ：建立變量

function：建立函數

ES5中建立變量或者函數：存在變量提升，重複聲明等特征;

[size=1em][size=1em][ES6]

· let建立變量

const：ES6中建立常量

ES6中建立的變量或者常量：都不存在變量提升，也不可以重複聲明，而且還存在塊級作用域;

class：建立一個類

import：導入

ES6中的解構指派

[size=1em][size=1em]按照原有值的結構，把原有值中的某一部分内容快速擷取到(快速指派給一個變量)。

　　數組的解構指派

[size=1em][size=1em]解構指派本身是ES6的文法規範，使用什麼關鍵字來聲明這些變量是無所謂的，如果不用關鍵字來聲明，那麼就相當于給window添加的自定義屬性;(嚴格模式下必須使用關鍵字來聲明，因為嚴格模式下不允許出現不用關鍵字聲明的變量;)，如果解構不到值，那麼變量的值就是undefined;

let [a,b,c]=[12,23,34];

var [d,e,f]=[35,41,63];

console.log(a,b,c)//12,23,34;

console.log(d,e,f)//35,41,63;

[q,w,e]=[1,2,3];//相當于給window添加了三個屬性:q,w,e值分别為1，2，3;(嚴格模式下會報錯)

[size=1em][size=1em]多元數組的解構指派，可以讓我們快速的擷取到需要的結果

let [a,b,c]=[[45,36],12,[23,43,[1,2[4,[8]]]]23,34];

console.log(a)//[45,36]

console.log(b)//12

console.log(c)//[23,43,[1,2,[4,[8]]]]

//數組中不需要解構的值可用逗号(，)空開，一個逗号代表空開一項

let [,,,A]=[12,23,45];

console.log(A)//undefined

let [,,B]=[12,23,45]

console.log(B)//45

[size=1em][size=1em]在解構指派中，支援擴充運算符即[size=1em]…[size=1em],隻要用了擴充運算符，就相當于新生成了一個數組或者對象，如果解構不到值的話，新生成的數組或者對象為空，而不是undefined，但是擴充運算符必須放在末尾

let [a,...c]=[12,1,4,83,34];

console.log(a)//12

console.log(c)//[1,4,83,34];

let [a,...b,c]=[12,1,4,83,34];//會報錯，擴充運算符隻能放在末尾;

　　對象的解構指派

[size=1em][size=1em]對象的簡潔表示法：

const foo = 'bar';

const baz = {foo};

baz // {foo: "bar"}

// 等同于

const baz = {foo: foo};

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

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

foo // "aaa"

bar // "bbb"

　　如果變量名與屬性名不一緻，必須寫成下面這樣。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };

baz // "aaa"

　　真正被指派的是後者，而不是前者。

let obj = { first: 'hello', last: 'world' };

let { first: f, last: l } = obj;

f // 'hello'

l // 'world'

first//error: first is not defined

　　如果要将一個已經聲明的變量用于解構指派，必須非常小心。

// 錯誤的寫法

let x;

{x} = {x: 1};//會報錯

　　因為 JavaScript 引擎會将{x}了解成一個代碼塊，進而發生文法錯誤。隻有不将大括号寫在行首，避免 JavaScript 将其解釋為代碼塊，才能解決這個問題。

// 正确的寫法

let x;

({x} = {x: 1});

放在圓括号當中就可以避免 JavaScript 将其解釋為代碼塊。