2 2.2 对象的解构赋值

解构不仅可以用于数组，还可以用于对象。对象的解构与数组的解构有一个重要的不同：数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

示例13

let { hzh, hcq } = { hzh: "黄子涵", hcq: "黄春钦" };
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

输出hcq：
hcq = 黄春钦

[Done] exited with code=0 in 0.197 seconds

let { cly} = { hzh: "黄子涵", hcq: "黄春钦" };
console.log("输出cly：");
console.log("cly = " + cly);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出cly：
cly = undefined

[Done] exited with code=0 in 0.173 seconds

示例 13 代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于 undefined 。

现在就有一个问题了，如果变量名与属性名不一致，该如何书写呢？必须写成示例
14 这样。

示例14

let brother = { hzh: '黄子涵', hcq: '黄春钦' };
let { hzh: h, hcq: q } = brother;
console.log("输出h：");
console.log("h =" + h);
console.log("");
console.log("输出q：");
console.log("q =" + q);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出h：
h =黄子涵

输出q：
q =黄春钦

[Done] exited with code=0 in 0.307 seconds

通过示例 14，实际上说明示例 13 中的对象解构赋值可以简写为下面的形式。

let { hzh: hzh, hcq: hcq } = { hzh: "黄子涵", hcq: "黄春钦" };

经验

对象的解构赋值的内部机制，是先找到同名属性，再赋给对应的变量。真正被赋值的是后者，而不是前者 。

示例15

let { hzh: cly } = { hzh: "黄子涵", hcq: "黄春钦" };
console.log("输出cly：");
console.log("cly =" + cly);
console.log("");
console.log("输出hzh：");
console.log("hzh =" + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出cly：
cly =黄子涵

输出hzh：
e:\HMV\JavaScript\JavaScript.js:6
console.log("hzh =" + hzh);
                      ^

ReferenceError: hzh is not defined
    at Object.<anonymous> (e:\HMV\JavaScript\JavaScript.js:6:23)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47

[Done] exited with code=1 in 0.344 seconds

示例 15 代码中，hzh 是匹配的模式，cly 才是变量。真正被赋值的是变量 cly ，而不是模式 hzh。

对象的解构也可以指定默认值，如示例 16 代码所示 。默认值生效的条件是对象的属性值严格等于undefined。和之前数组解构一致，如果对象解构失败，变量的值也等于 undefined。不再赘述。

示例16

let { hzh:hcq='黄春钦' } = {};
console.log("输出hcq：");
console.log("hcq =" + hcq);
console.log("");

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hcq：
hcq =黄春钦


[Done] exited with code=0 in 0.198 seconds

let { hzh:hcq='黄春钦' } = { hzh:'黄子涵'};
console.log("输出hcq：");
console.log("hcq =" + hcq);
console.log("");

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hcq：
hcq =黄子涵


[Done] exited with code=0 in 0.222 seconds