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

问题描述

这个https://stackoverflow.com/a/4255480/1375882is关于使用斜线符号按名称访问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中都会发生，通常使用点差...来减少状态的正确更新，例如惯用代码是：

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

但是我应该能够在这里访问状态的各个属性和嵌套属性。这个agGrid in react + redux app is modifying underlying data是我要概括的代码。

所以-您可以看到使用点差...对我而言不是奢侈，这是在Redux减速器中使用的最佳实践，这就是为什么我有这个问题。

>

解决方法

您可以使用自己的扩展名来分隔所需的嵌套属性。

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

,

对于嵌套属性，您也应该使用传播运算符：

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

alert(foo1.c.y);

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

,

感谢Tasos和Nina的建议，但我特别要求通过名称访问属性的情况，这就是为什么正确答案是这样的原因：

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

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

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