当从扩展符号访问对象时，如何访问 Javascript 对象的按名称嵌套的属性...？

Question

这个https://stackoverflow.com/a/4255480/1375882 是关于使用带括号的表示法通过名称访问 Javascript 对象/数组的属性的好答案，它还显示了如何从嵌套访问嵌套属性或元素的示例数组。

我正在尝试使用相同的方法来访问使用 spread ... 运算符的构造中的属性/元素，例如：

var foo = { a: 1, b: 2, c: {x: 999, y:998, z: 997}};
var foo1 = {...foo,
               ['a']: 2,
               ['c']['y']: 1000,
            };

alert(foo1['c']['y']);

但是此代码无法编译 - 虽然一级访问['a']按预期工作，但嵌套访问['c']['y']不适用于传播（但它可以在传播之外工作）-代码根本无法编译，有关于不匹配{和其他晦涩消息（例如在 jsfiddle 中）的错误消息。

我的问题是 -如何访问传播中的嵌套属性/元素？ 也许其他需要括号的结构？

上下文：我正在尝试编写通用代码来监听 AgGrid 中单元格值的变化并相应地更新 Redux 存储：网格显示数组或记录，在我的更新代码中，我应该找到正确的记录和其中的正确单元格 -所有这一切都发生在 Redux reduce 中，通常使用 spread... 来正确更新状态，例如惯用代码是：

case GET_INVOICES_SUCCESS: {
              return {...state,
                 invoiceDate: action.response.data.invoiceDate,
              }
            }

但是我应该能够在这里访问状态的各个属性和嵌套属性。 react + redux 应用程序中的这个agGrid 正在修改底层数据是我试图概括的代码。

所以 - 你可以看到使用 spread... 对我来说并不奢侈，它是在 Redux 减速器中使用的最佳实践，这就是我有这个问题的原因。

Answer 1

您可以将想要的嵌套属性与自己的扩展分开。

 const foo = { a: 1, b: 2, c: { x: 999, y: 998, z: 997 } }, foo1 = { ...foo, a: 2, c: { ...foo.c, y: 1000 }, }; console.log(foo1['c']['y']); console.log(foo1);

Answer 2

您还应该对嵌套属性使用扩展运算符：

var foo = { a: 1, b: 2, c: {x: 999, y:998, z: 997}};
var foo1 = {...foo,
               a: 2,
               c: { ...foo.c, y: 1000 },
            };

alert(foo1.c.y);

此外，如果属性名称不是变量，则不需要方括号。

Answer 3

感谢 Tasos 和 Nina 的建议，但我特别询问了按名称访问属性的情况，这就是为什么正确答案是这样的：

var foo = { a: 1, b: 2, c: {x: 999, y:998, z: {aa: 5, bb: 6}}};
var foo1 = {...foo,
               ['a']: 2,
               ['c']: {...foo['c'], 
                    ['y']: 1000, 
               },
               ['c']: {...foo['c'],
                    ['z']: {...foo['c']['z'],
                          ['bb']: 777,
                           }
               }
            };

alert(foo1['c']['z']['bb']);

我不知道我是否应该接受我自己的答案，因为如果没有上一个答案的输入，就不会有我的答案。