好程式設計師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 將其解釋為程式碼塊。