当从传播符号访问对象时，如何访问 Javascript 对象的嵌套 属性-by-name ...？

Question

这个 关于使用方括号表示法按名称访问 Javascript object/array 的属性的好答案，它还显示了如何访问嵌套属性或元素的示例来自嵌套数组。

我正在尝试使用相同的方法在使用 spread ... 运算符的结构中访问 properties/elements，例如：

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 中）。

我的问题是 - 如何访问嵌套的 properties/elements 传播？也许其他需要括号的结构？

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

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

但我应该可以在这里访问状态的单个属性和嵌套属性。此 是我要概括的代码。

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

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']);

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