javascript - 分配给新变量，同时使用解构分配

Question

ES6 引入了 destructuring assignment支持从对象中解包值的语法:

let { r = 0, g = 0, b = 0 } = { r: 255, g: 55 };
let color = { r, g, b };
console.log(color, r, g, b);  // prints "{r: 255, g: 55, b: 0} 255 55 0"

但是，以下代码片段不会产生相同的效果:

let color = { r = 0, g = 0, b = 0 } = { r: 255, g: 55 }
console.log(color);  // prints "{r: 255, g: 55}"

如果您颠倒顺序，则相同:

let { r = 0, g = 0, b = 0 } = color = { r: 255, g: 55 }
console.log(color);  // prints "{r: 255, g: 55}"

是否有一种单行解决方案来分配 r、g、b 以及 color？

Answer 1

您可以先使用 Object.assign() 创建全色对象(包括它的所有 3 个部分)，将结果分配给 color 变量并应用析构在上面:

let { r, g, b } = color = Object.assign({ r: 0, b: 0, g: 0 }, { r: 255, g: 55 });
console.log(r, g, b, color); // prints "255 55 0 {r: 255, b: 0, g: 55}"

不幸的是，这种方法在严格模式下会失败，因为它试图分配给未定义的 color 变量。解决此问题的一个方法是，如果您可以将 color 绑定(bind)到 window，则直接分配给 window.color(或者如果您在类/函数中执行此操作，您当然可以绑定(bind)到 this.color。

'use strict';

let { r, g, b } = window.color = Object.assign({ r: 0, b: 0, g: 0 }, { r: 255, g: 55 });

console.log(r, g, b, color); // prints "255 55 0 {r: 255, b: 0, g: 55}"