对象的解构赋值（基本用法1）

（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取不到值，所以等