解構賦值

1.1 什么是解構賦值

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

1.2 數組解構賦值和對象解構賦值的區別

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

2.1 數組的解構賦值

// 報錯 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {}; //解構數組 let [a,b,c] = [1,2,3] console.log(a,b,c) //1,2,3 //解構Set let [x, y, z] = new Set(['a', 'b', 'c']); console.log(x,y,z)//'a','b','c' //解構 Generator 函數 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 默認值

解構賦值允許指定默認值
只有當一個數組成員嚴格等于undefined，默認值才會生效。

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

如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值。

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

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

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 數組的嵌套結構

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

3.1 對象的解構賦值

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

3.2 對象的嵌套解構

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

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

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

下面是另一個例子。

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}

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

下面是嵌套賦值的例子

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

對象的解構賦值可以取到繼承的屬性

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

3.3 對象解構的默認值

默認值生效的條件是，對象的屬性值嚴格等于undefined

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

3.4 注意點

如果要將一個已經聲明的變量用于解構賦值，必須非常小心。

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

上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，
從而發生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋
為代碼塊，才能解決這個問題。

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

上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，
從而發生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為
代碼塊，才能解決這個問題。

4、字符串的解構賦值

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

類似數組的對象都有一個length屬性,因此還可以對這個屬性解構賦值

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

5、數組和布爾值的解構賦值

解構時，如果等號的右邊是數組和字符串，則會先轉換為對象

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。