ES6 變數的解構賦值

2021-09-29 19:45:08 字數 2077 閱讀 2412

基本用法：

es6允許按照一定的模式從陣列和物件中提取值，然後對變數進行賦值，這被稱之為解構。

let [a, b, c] = [1, 2, 3];
這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。

let [foo, [[bar], baz]] = [1, [[2], [3]];


let [ , , third] = ['foo', 'bar', 'baz'];


let [x, , y] = [1, 2, 3];


let [head, ...tail] = [1, 2, 3, 4];


tail; // [2, 3, 4]


let [x, y, ...z] = ['a'];


y; // undefined


z; //
解構不成功，變數的值等於undefine。

不完全解構：

let [a, b] = [1, 2, 3];


a; // 1


b; // 2


let [a, [b], c] = [1, [2, 3], 4];


a; // 1


b; // 2


c; // 4
如果等號右邊的不是陣列，則會報錯。

預設值：

let [foo = true] = ;


foo; // true
es6內部使用嚴格相等運算子（===）判斷乙個位置是否有值，所以如果乙個陣列不嚴格等於undefined，預設值是不會生效的。

let [x = 1] = [undefined];


x; // undefined


let [x = 1] = [null];


x; // null
預設值也可以是乙個表示式，那麼這個表示式是惰性求值的（只用在用到時才會求值）

預設值可以引用解構賦值的其他變數，但該變數必須已經宣告。

let  = ;


foo; // 'aaa'


bar; // 'bbb'
物件的解構與陣列的解構有乙個重要的不同，陣列的元素按次序排列，變數的取值由位置決定。而物件的屬性沒有次序，變數名與屬性名同名則可取道正確的值。

let  = ;


abc; // undefined
如果變數名和屬性名不一致，必須寫成下面這樣

let  = ;


abc; // 'aaa'
實際上說明，物件的解構就是以下形式的簡寫：

let  = ;
物件的解構，首先找到同名的屬性，再賦值給對應的變數。

後者被賦值，前者只是匹配模式。

物件的解構和陣列的解構相同，也可用於巢狀的資料結構。

物件的解構也可以指定預設值

const [a, b, c, d, e] = 'hello';


a // 'h'


b // 'e'


c // 'l'


d // 'l'


e // 'o'


//陣列物件有length屬性


let  = 'hello';


len // 5
解構的規則是，若等號右邊的值不是物件或者陣列，就先轉轉換為物件。

let  = 123


// 由於number和boolean物件都有tostring屬性，所以s能取到值
由於undefined和null無法轉換為物件，所以在解構賦值時會出錯。

function add([x, y]) ;


add([1, 2]) // 3
函式引數的解構，也可使用預設值。（undefined會觸發函式的預設值）

交換變數的值

從函式返回多個值

函式引數的定義

提取json資料

函式引數的預設值

遍歷map結構

輸入模組的指定方法

es6變數解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示，可以從陣列中提取值，按照位置的物件...

ES6變數解構賦值

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 es6之前我們申明多個變數需要按照下面的方法 let l a 1 let b 2 let c 3 let d 4 或者 let a 1,b 2,c 3,d 4 現在我們可以更加簡便 let a,b,c,d 1,2,3,4 ...

es6 變數解構賦值

1.陣列的解構賦值 等號兩邊的模式相同，左邊的變數就會被賦予對應的值 預設值 undefined型別只有乙個值，即undefined。當宣告的變數還未被初始化時，變數的預設值為undefined。null型別也只有乙個值，即null。null用來表示尚未存在的物件，常用來表示函式企圖返回乙個不存在的...