ES6之解構賦值

按照一定模式從陣列和物件中提取值，然後對變數進行賦值，該操作即為解構。只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。

es6之前的賦值

let a =1;
let b =2;
let c =
3;

解構賦值:

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

解構賦值也可以進行巢狀、有所忽略、使用剩餘運算子賦、以及進行不完全解構

let
[a,[
[b], c]]=
[1,[
[2],
3]];
// a = 1，b = 2，c=3
let[a,
, b]=[
1,2,
3];// a = 1，b = 3
let[head,
...tail]=[
1,2,
3,4]
;//head = 1，tail = [2, 3, 4]
let[x, y,
...z]=[
'a']
;//x = "a"，y = undefined，z =

如果解構不成功，變數的值就等於undefined

let
[foo]=[
];//foo = undefined
let[bar, foo]=[
1];//bar = 1，foo = undefined

在陣列的解構中，解構的目標若為可遍歷物件，皆可進行解構賦值。可遍歷物件即實現 iterator 介面的資料。

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

當解構模式有匹配結果，且匹配結果是 undefined 時，會觸發預設值作為返回結果。

let
[a =2]
=[undefined]
;// a = 2
let[a =
3, b = a]=[
];// a = 3, b = 3
let[a =
3, b = a]=[
1];// a = 1, b = 1
let[a = b, b =1]
=;// referenceerror: b is not defined

上面最後乙個表示式之所以會報錯，是因為a用b做預設值時，b還沒有宣告

如果預設值是乙個表示式，會採用惰性求值，只有在用到時才會求值

functionf(
)let
[x =f(
)]=[
1];//x = 1

沒有變數接收的解構值會被忽略掉，如果賦值不是陣列則會報錯

let
[a,[b]
, d]=[
1,[2
,3],
4];//a = 1，b = 2，d = 4
let[foo]=1
;//1 is not iterable

物件的解構賦值與陣列不同，陣列的元素是按次序排列的，變數的取值是由它的位置決定。物件的屬性沒有次序，變數必須與屬性同名才能取到正確的值。如果解構失敗，變數的值等於undefined。

let=;
//foo = "aaa"，bar = "bbb"
let=
;//baz = undefined

如果變數名與屬性名不一致，必須明確對應關係

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

let=;
//baz = undefined
let=
;//baz = 'aaa' ， foo is not defined

與陣列一樣，解構也可以用於巢狀結構的物件。

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

注意，這時p是模式，不是變數，因此不會被賦值。

let obj =
;let arr =
;(=)
;//obj = ，arr = [true]

如果解構模式是巢狀的物件，而且子物件所在的父屬性不存在，那麼將會報錯

let}=
;//cannot read property 'bar' of undefined

上面**中，等號左邊物件的foo屬性，對應乙個子物件。該子物件的bar屬性，解構時會報錯。原因很簡單，因為foo這時等於undefined，再取子屬性就會報錯。

物件的解構也可以指定預設值，預設值生效的條件是，物件的屬性值嚴格等於undefined

var=;
//x = 3
var=
;//x = 1，y = 5
var=
;//y = 3
var=
;//y = 5
var=
;//msg = "something went wrong"

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

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

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

let
='hello'
;//len = 5

解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件。由於undefined和null無法轉為物件，所以對它們進行解構賦值，都會報錯

let
=123
;s === number.prototype.tostring // true
let=
true
;s === boolean.prototype.tostring // true
let= undefined;
// typeerror
let=
null
;// typeerror

函式呼叫時，會將實參傳遞給形參，其過程就是實參賦值給形參。因此，也可以使用解構賦值。

其規則與陣列、物件的解構賦值一致，關鍵看引數是採用哪種解構賦值方式。

function
add(
[x, y =10]
)let r =
add([1
]);//r = 11
function
add(
)let r =
add();
//r = 30

（1）交換變數的值

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

（2）從函式返回多個值

function
example()
let[a, b, c]
=example()
;

（3）函式引數的定義

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

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

（4）提取 json 資料

let jsondata =
;let
= jsondata;
console.
log(id, status, number)
;// 42, "ok", [867, 5309]

ES6之解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構賦值 destructuring 也可以簡稱解構。下面用進一步解釋一下什麼叫解構賦值。1.關於給變數賦值，傳統的變數賦值是這樣的 var arr 1,2,3 把陣列的值分別賦給下面的變數 var a arr 0 var b...

ES6之解構賦值

1.es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 let a,b,c 1,2 3 2.如果等號的右邊不是陣列或者嚴格地說，不是可遍歷的結構，參見 iterator 一章那麼將會報錯。如下例 let foo 1 let foo false let foo nan l...

ES6之解構賦值

es6允許按照一定模式從陣列和物件中提取值，對變數進行賦值稱為解構賦值 const aaa 張三李四王二麻子 let zhang,li,wang,ma aaa console.log zhang 張三 console.log li 李四 console.log wang 王二 console...

ES6之解構賦值

ES6之 解構賦值

ES6之解構賦值

ES6之解構賦值

相關推薦

ES6之解構賦值