如何使用变量键在一个语句中声明嵌套的 Javascript 对象答案

【问题标题】：How to declare a nested Javascript object in one statement with variable keys如何使用变量键在一个语句中声明嵌套的 Javascript 对象
【发布时间】：2014-10-19 07:07:23
【问题描述】：

这可能是 Ruby 做得更好的事情，但有没有更好的方法来编写这段 Javascript 代码（用于 React）：

handleCellChange: function(rowIdx, prop, val) {
    var updateObj = {};
    updateObj.data = {};
    updateObj.data[rowIdx] = {};
    updateObj.data[rowIdx][prop] = { $set: val };

    var newState = React.addons.update(this.state, updateObj);

【问题讨论】：

这是否符合您的要求：stackoverflow.com/questions/13498330/… ?
不完全——键是变量，而不是常量。
是的，再看看那个 set 函数——键可以是变量：set(foo,[data,rowIdx,prop],5)

标签： javascript reactjs

【解决方案1】：

Javascript 的对象文字表示法（ES6 之前）没有提供变量键。不过，您可以稍微减少分配的数量：

handleCellChange: function(rowIdx, prop, val) {
  var updateObj = { data: {} };
  (updateObj.data[rowIdx] = {})[prop] = { $set: val };

您可能会或可能不会考虑任何改进 - 更简洁，但可能不太可读。我全心全意地建议您将嵌套的data 对象添加到updateObj 的初始分配中（应该用var 声明，顺便说一句），就像我在上面所做的那样。但是，使用 data[rowIdx] 的初始化结果作为然后在同一行上索引的值是相当值得怀疑的。

【讨论】：

【解决方案2】：

在 ES6 中，您可以使用计算属性名称：

updateObj = { data: { [rowIdx]: { [prop]: {$set: val} } } };

您可以在 Traceur 或 Firefox nightly 等中使用它（但尚未在节点 --harmony 中使用）。

这里有一个东西会为你转换这个语法：https://www.npmjs.org/package/es6-computed-property-keys。

有关更多信息，请参阅http://wiki.ecmascript.org/doku.php?id=harmony:object_literals#object_literal_computed_property_keys。另请参阅http://kangax.github.io/compat-table/es6/# 中的“计算属性”项。

【讨论】：

我仍然希望他们为此使用粗箭头，而不是将其用于箭头功能。这样，语法不仅与 Perl、Ruby、Erlang 映射和 Julia 一致，而且甚至与 Ruby 1.9+ 的文字符号语法很好地对齐：{ foo: 1 } 与 { foo => 1 } 的含义基本相同（字符串与符号除外）两种语言。啊，好吧。
不知道该决定的背景，但我认为保留冒号的语义或避免出现属性名称后面的情况（: 与 @ 987654328@) 将其含义从文字变为表达式。
谢谢。括号的有趣使用（对于我的红宝石眼睛）。