ES6 變數的解構賦值詳解

2.0 物件的解構賦值

2.1 物件的巢狀解構

3.0 字串的解構賦值

4.0 函式引數的解構賦值

5.0 解構賦值的用途

summary

es 6 允許按照一定模式, 從陣列和物件中提取值, 對變數進行複製, 這被稱為解構賦值(destructuring)

事實上，只要某種資料結構具有 iterator 介面，都可以採用陣列形式的解構賦值

解構賦值允許指定預設值

let

[name =
"gene"]=
;console.
log(name)
;// gene
let[x, y =
'b']=[
'a']
;// x='a', y='b'
let[x, y =
'b']=[
'a', undefined]
;// x='a', y='b'

注意，es6 內部使用嚴格相等運算子（===），判斷乙個位置是否有值。所以，只有當乙個陣列成員嚴格等於undefined時，預設值才會生效

let

[x =1]
=[undefined]
;x // 1
let[x =1]
=[null];
x // null

上面**中，如果乙個陣列成員是null，預設值就不會生效，因為null不嚴格等於undefined。

解構不僅可以用於陣列, 還可以用於物件

物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。

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

let=;

baz // "aaa"
let obj =
;let
= obj;
f // 'hello'
l // 'world'

這實際上說明，物件的解構賦值是下面形式的簡寫

let

=;

? 也就是說，物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

let=;

baz // "aaa"
foo // error: foo is not defined

上面**中，foo是匹配的模式，baz才是變數。真正被賦值的是變數baz，而不是模式foo

與陣列一樣, 巢狀的物件, 也可以使用解構賦值

let obj =]}

;let]}
= obj;
x // "hello"
y // "world"

? 注意:這時p是模式, 不是變數, 因此不會被賦值, 如果p也要作為變數被賦值, 可以寫成如下這樣.

let obj =]}

;let]}
= obj;
console.
log(x)
;// "hello"
console.
log(y)
;// "world"
console.
log(p)
;// [ 'hello',  ]

下面是另外乙個巢狀的解構賦值

const node =}}

;let
, loc:}}
= node;
console.
log(line)
;// 1
console.
log(loc)
;//  }
console.
log(start)
;//

上面**有三次解構賦值，分別是對loc、start、line三個屬性的解構賦值。注意，最後一次對line屬性的解構賦值之中，只有line是變數，loc和start都是模式，不是變數。

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

字串也可以解構賦值, 這時因為此時, 字串被轉換成了乙個類陣列物件

const

[a, b, c, d, e]
='hello'
;a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

類似陣列物件都有乙個length屬性, 因此可以對這個屬性解構賦值

let

='hello'
;len // 5

**函式的引數也可以使用解構賦值 **

function

add(
[x, y]
)add([
1,2]
);// 3

函式引數的解構賦值也可以指定預設值

let x =1;

let y =2;
[x, y]
=[y, x]
;console.
log(x)
;console.
log(y)
;

函式只能返回乙個值, 如果要返回多個值, 就只能將它們放在陣列或物件裡返回, 有了解構賦值, 取出這些值就非常方便.

// 返回乙個陣列

function
returnarr()
let[a, b, c]
=returnarr()
;console.
log(a, b, c)
;// 1 2 3
// 返回乙個物件
function
returnobj()
}let
=returnobj()
console.
log(foo, bar)
;// foo bar

解構賦值可以方便的將一組引數與變數名對應起來

// 引數是一組有次序的值

functionf(
[x, y, z])f
([1,
2,3]
);// 引數是一組無次序的值
functionf(
)f()
;

const = require("source-map");

上一章: es6 let, const命令熟悉學習

該部落格為學習阮一峰 es6入門課所做的筆記記錄, 僅用來留作筆記記錄和學習理解

ES6 變數的解構賦值詳解

es6允許按照一定規則，從陣列和物件中提取值，對變數進行賦值，這被稱為解構賦值 destructuring 基本用法let a,b,c 1,3 a 1,b 3 c 上述 表示，可以從陣列中提取值，並且按照對應的位置，對變數賦值。本質上，這種寫法屬於模式匹配，只要等號兩邊的模式相同，左邊的變數就會被賦...

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 ...