簡介
解構不僅可以用於陣列,還可以用於物件。
物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。let=;
foo // "aaa"
bar // "bbb"
上面**的第乙個例子,等號左邊的兩個變數的次序,與等號右邊兩個同名屬性的次序不一致,但是對取值完全沒有影響。第二個例子的變數沒有對應的同名屬性,導致取不到值,最後等於let=;
foo // "aaa"
bar // "bbb"
let=
;baz // undefined
undefined
。
如果解構失敗,變數的值等於undefined
。
上面**中,等號右邊的物件沒有let=;
foo // undefined
foo
屬性,所以變數foo
取不到值,所以等於undefined
。
物件的解構賦值,可以很方便地將現有物件的方法,賦值到某個變數。
上面**的例一將// 例一
let= math;
// 例二
const
= console;
log(
'hello'
)// hello
math
物件的對數、正弦、余弦三個方法,賦值到對應的變數上,使用起來就會方便很多。例二將console.log
賦值到log
變數。
如果變數名與屬性名不一致,必須寫成下面這樣。
這實際上說明,物件的解構賦值是下面形式的簡寫(參見《物件的擴充套件》一章)。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;
x // "hello"
y // "world"
p // ["hello", ]
上面**有三次解構賦值,分別是對const node =}}
;let
, loc:}}
= node;
line // 1
loc // object
start // object
loc
、start
、line
三個屬性的解構賦值。注意,最後一次對line
屬性的解構賦值之中,只有line
是變數,loc
和start
都是模式,不是變數。
下面是巢狀賦值的例子。
如果解構模式是巢狀的物件,而且子物件所在的父屬性不存在,那麼將會報錯。let obj =
;let arr =
;(=)
;obj //
arr // [true]
上面**中,等號左邊物件的// 報錯
let}
=;
foo
屬性,對應乙個子物件。該子物件的bar
屬性,解構時會報錯。原因很簡單,因為foo
這時等於undefined
,再取子屬性就會報錯。
預設值物件的解構也可以指定預設值。
預設值生效的條件是,物件的屬性值嚴格等於var=;
x // 3
var=
;x // 1
y // 5
var=
;y // 3
var=
;y // 5
var=
;msg // "something went wrong"
undefined
。
上面**中,屬性var=;
x // 3
var=
;x // null
x
等於null
,因為null
與undefined
不嚴格相等,所以是個有效的賦值,導致預設值3
不會生效。
注意點(1)由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。
上面**對陣列進行物件解構。陣列let arr =[1
,2,3
];let= arr;
first // 1
last // 3
arr
的0
鍵對應的值是1
,[arr.length - 1]
就是2
鍵,對應的值是3
。方括號這種寫法,屬於「屬性名表示式」。 ES6 物件的解構賦值
es6的解構賦值,在我看來是提供了乙個整體賦值的方案。包括陣列和物件的整體賦值。基本原則如下 let x,y 1,2 x 1 y 2 let foo aaa bar bbb 但是物件的解構賦值,允許給賦值的變數重新命名。物件的重新命名解構 我自己去的名字,便於理解 其實在給物件進行解構賦值的時候,有...
ES6 物件的解構賦值
物件的解構賦值 解構不僅可以用於陣列,還可以用於物件。let console.log foo aaa console.log bar bbb這裡的foo,bar一定要對應。物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定 而物件的屬性沒有次序,變數必須與屬性同名,...
ES6 物件的解構賦值
解構不僅可以用於陣列,還可以用於物件。let foo aaa bar bbb 物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定 而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。let foo aaa bar bbb let baz undefined ...