解構(gòu)賦值

1.1 什么是解構(gòu)賦值

允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)
只要某種數(shù)據(jù)結(jié)構(gòu)具有 Iterator 接口，都可以采用數(shù)組形式的解構(gòu)賦值

1.2 數(shù)組解構(gòu)賦值和對象解構(gòu)賦值的區(qū)別

數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；
而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

2.1 數(shù)組的解構(gòu)賦值

// 報(bào)錯(cuò) let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {}; //解構(gòu)數(shù)組 let [a,b,c] = [1,2,3] console.log(a,b,c) //1,2,3 //解構(gòu)Set let [x, y, z] = new Set(['a', 'b', 'c']); console.log(x,y,z)//'a','b','c' //解構(gòu) Generator 函數(shù) function* fibs() {let a = 0;let b = 1;while (true) {yield a;[a, b] = [b, a + b];} }let [first, second, third, fourth, fifth, sixth] = fibs(); sixth // 5

2.2 默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值
只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會生效。

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

如果默認(rèn)值是一個(gè)表達(dá)式，那么這個(gè)表達(dá)式是惰性求值的，即只有在用到的時(shí)候，才會求值。

function f() {console.log('aaa'); }let [x = f()] = [1];

默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明。

let [x = 1, y = x] = []; // x=1; y=1 let [x = 1, y = x] = [2]; // x=2; y=2 let [x = 1, y = x] = [1, 2]; // x=1; y=2 let [x = y, y = 1] = []; // ReferenceError: y is not defined

2.3 數(shù)組的嵌套結(jié)構(gòu)

let [a,[b,[c]]]=[1,[2,[3]]] console.log(a,b,c)//1,2,3

3.1 對象的解構(gòu)賦值

let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; foo // "aaa" bar // "bbb"

3.2 對象的嵌套解構(gòu)

let obj = {p: ['Hello',{ y: 'World' }] };let { p: [x, { y }] } = obj; x // "Hello" y // "World"

注意，這時(shí)p是模式，不是變量，因此不會被賦值。如果p也要作為變量賦值，可以寫成下面這樣。

let obj = {p: ['Hello',{ y: 'World' }] };let { p, p: [x, { y }] } = obj; x // "Hello" y // "World" p // ["Hello", {y: "World"}]

下面是另一個(gè)例子。

const node = {loc: {start: {line: 1,column: 5}} };let { loc, loc: { start }, loc: { start: { line }} } = node; line // 1 loc // Object {start: Object} start // Object {line: 1, column: 5}

上面代碼有三次解構(gòu)賦值，分別是對loc、start、line三個(gè)屬性的解構(gòu)賦值。
注意，最后一次對line屬性的解構(gòu)賦值之中，只有l(wèi)ine是變量，loc和start都是模式，不是變量。

下面是嵌套賦值的例子

let obj = {}; let arr = [];({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });obj // {prop:123} arr // [true]

對象的解構(gòu)賦值可以取到繼承的屬性

const obj1 = {}; const obj2 = { foo: 'bar' }; Object.setPrototypeOf(obj1, obj2);const { foo } = obj1; foo // "bar"

3.3 對象解構(gòu)的默認(rèn)值

默認(rèn)值生效的條件是，對象的屬性值嚴(yán)格等于undefined

var {x = 3} = {x: undefined}; x // 3var {x = 3} = {x: null}; x // null

3.4 注意點(diǎn)

如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值，必須非常小心。

// 錯(cuò)誤的寫法 let x; {x} = {x: 1}; // SyntaxError: syntax error

上面代碼的寫法會報(bào)錯(cuò)，因?yàn)?JavaScript 引擎會將{x}理解成一個(gè)代碼塊，
從而發(fā)生語法錯(cuò)誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋
為代碼塊，才能解決這個(gè)問題。

// 正確的寫法 let x; ({x} = {x: 1});

上面代碼的寫法會報(bào)錯(cuò)，因?yàn)?JavaScript 引擎會將{x}理解成一個(gè)代碼塊，
從而發(fā)生語法錯(cuò)誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為
代碼塊，才能解決這個(gè)問題。

4、字符串的解構(gòu)賦值

const [a,b,c,d,e] = 'hello'; console.log(a,b,c,d,e) // 'h','e','l','l','o'

類似數(shù)組的對象都有一個(gè)length屬性,因此還可以對這個(gè)屬性解構(gòu)賦值

let {length:len} ='hello'; console.log(len) //5

5、數(shù)組和布爾值的解構(gòu)賦值

解構(gòu)時(shí)，如果等號的右邊是數(shù)組和字符串，則會先轉(zhuǎn)換為對象

let {toString:s} = 123; s === Number.prototype.toString //truelet {toString:s} = true; s === Boolean.prototype.toString //true

總結(jié)

以上是生活随笔為你收集整理的02 解构赋值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。