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

相關推薦