(1)基本用法
解构不仅可以用于数组,还可以用于对象。
- // 如果变量名与属性名不一致,必须写成下面这样。
- let {foo:fj} = {foo:'aaa', bar:'bbb'};
- console.log(fj);
-
-
- let {foo:f1,bar:b1} = {foo:'aaa', bar:'bbb'};
- console.log(f1);
- console.log(b1);
console输出效果
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
- // 对象的解构赋值 (正确的解构)
- let {foo, bar} = {foo:'aaa', bar:'bbb'}
- console.log(foo)
- console.log(bar)
-
- // 对象的解构赋值 (正确的解构)
- let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
- foo // "aaa"
- bar // "bbb"
console输出效果
- // 取出对象的某一个属性,解构赋值到左边的变量中 (正确的解构)
- let {bar} = {foo:'aaa', bar:'bbb'}
- console.log(bar)
console输出效果
// 对象的解构赋值 (错误的解构)
let {foo1, bar1} = {foo:'aaa', bar:'bbb'}
console.log(foo1) // undefined
console.log(bar1) // undefined
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
- // 对象的解构赋值
- // 解构目标 = 解构的源
- {
- let {foo, bar}= {foo:'小名', bar:'lili'};
- console.group('对象的解构赋值:')
- console.log(foo)
- console.log(bar);
-
- }
-
- {
- // 对象的解构赋值 (正确的解构)
- // 对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
-
- // 变量与属性同名,只是位置不同,它是可以取到值的。
- let {bar, foo}= {foo:'小名', bar:'lili'};
- console.group('对象的解构赋值:')
- console.log(bar);
- console.log(foo);
-
- // 变量与属性不同名,是 取不到值的。
- let {ba, fo}= {foo:'小名', bar:'lili'};
- console.group('对象的解构赋值:')
- console.log(ba);
- console.log(fo);
-
- }
console输出效果
上面代码的第二个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第五个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。
如果解构失败,变量的值等于undefined。
let {foo} = {bar: 'baz'};
foo // undefined
上面代码中,等号右边的对象没有foo属性,所以变量foo取不到值,所以等