ES6计算属性在解构中的应用 - 解构整个对象

Question

我有一个变量:

var a = {b:1, c:2, d:'rawr', rawr:10};

我想将这些结构分解到本地作用域，所以我这样做：

var {b, c, d} = a;

这个代码很好用，但是我需要去掉 rawr。我尝试了以下方法:

var {b, c, d, [a.d]} = a;

但是这个代码给出了我一个missing : after property id错误，所以我尝试：

因此，我想进行两步操作：

var {b, c, d} = a;
var {[d]} = a;

然而这会给我带来 SyntaxError: missing : after property id 的错误。有没有办法在ES6中实现这个目标？

期望的结果是：

var b = 1;
var c = 2;
var d = 'rawr';
var rawr = 10;

- Noitidart

---

我不确定，但我怀疑你无法在本地作用域中动态创建一个基于属性名称的变量。 - user1106925

假设这是可能的，你将如何访问那个变量（rawr）？ - Felix Kling

XY问题？你最终需要做什么？ - user1106925

@Noitidart 如果没有使用过 react，不确定确切的预期结果是什么，但 {b, c, d, rawr} 看起来相当方便？ - guest271314

@guest271314: 我确信原始对象可以被使用。不过，ECMAScript6之所以添加了这种解构语法糖是有原因的。有时候人们希望能够访问某个对象的局部变量。有时候这是为了性能考虑，因为从变量中读取一个值通常比从变量中读取一个对象然后查找其属性要快。或者他们可能希望在本地改变一个值而不改变对象本身。解构对于这个目的来说很方便，但并非必需。 - user1106925

Answer 1

你可以像这样解构它：

var {b, c, d, [d]: q} = a;

因此，无论名称为d的属性中包含什么内容都将分配给q。

更新：

您在更新中所要求的是不可能的。*

- zerkms

---

a.rawr 的值将会在本地变量 q 中。 - Sean Vieira

在展示的两个尝试中，他都使用了变量声明语法，同时试图使用a.d的值。因此很明显他是在尝试创建变量rawr。 - user1106925

非常感谢，我已经将期望的结果添加到问题中。我正在尝试将var rawr = 10放入本地作用域中。这种方法非常棒，因为它可以获取q.rawr = 10，也许可以用this替换q吗？ - Noitidart

@Noitidart：在本地范围内创建动态变量的唯一方法是通过“eval”。但在严格模式下无法使用... - Felix Kling

Answer 2

你需要为它指定一个变量以进行赋值。你不能使用“计算出来的”变量名¹，因为这会违反标识符的静态作用域解析规则。所以你应该这样做：

var {b, c, d, [a.d]: rawr} = a;

要获取变量 rawr 中名为 a.d 的属性值。

_{1: 虽然可以使用 eval 或在非严格模式下使用 with 语句来实现，但正是因为这两种方法都存在安全问题，所以它们被广泛反对。}

- Bergi

---

@zerkms 我也给你点了赞。不过这是我的错，问题很傻，我只是在探索es6，请原谅。在你试图帮助我的时候，却被某人踩了下来:( - Noitidart

感谢@Bergi提供关于eval和with为什么不受青睐的说明。这是非常有帮助的注释！ - Noitidart

值得一提的是，在严格模式下，eval和with都无法使用（eval“可以”使用，但不能在同一作用域中声明变量）。我假设如果代码是用ES6编写的，那么更有可能处于严格模式。 - Felix Kling

@FelixKling：我正要添加那个 :-) - Bergi

Answer 3

在处理计算对象的属性解构时，字符串字面值的值需要与您在对象中引用的键名相对应：例如

// string literal
const getRawr = 'd'
const { [getRaw]: rawr } = {b:1, c:2, d:'rawr', rawr:10};
console.log(raw);

- Friday Onojah

Answer 4

您可以使用Object.keys()，Function.prototype.bind()，但是需要注意的是变量的值在数组中；尚未确定如何仅返回变量。

var a = {
  b: 1,
  c: 2,
  d: 'rawr',
  rawr: 10
};

function de(val, key) {
  var [val] = window[val] = [a[val]];
}

Object.keys(a).forEach(de.bind(this));

console.log(b, c, d, rawr);

jsfiddle https://jsfiddle.net/ravkgzjb/2/

的内容与编程有关。

- guest271314

---

var [val] = [a[val]] 和 var val = a[val] 是相同的。 - zerkms

数组解构...没错。我被动态属性搞混了，看起来你也是；）因为var [val]会创建一个名字为val的变量...这是你想要的吗？ - Felix Kling

不，尝试在.forEach()之外使用console.log(b, c, d)。为什么变量可以在forEach之外访问？你将它们（因为var）设为了forEach的本地变量。这些变量必须来自于你之前的实验中。 - Felix Kling

现在尝试在函数内部完成相同的操作，而不会污染全局对象。 - zerkms

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - guest271314