当从排列符号..访问对象时，如何通过Javascript对象的名称访问嵌套属性

Question

这个https://stackoverflow.com/a/4255480/1375882is关于使用bracked表示法通过名称访问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正在修改底层数据，这是我试图概括的代码。

所以-你可以看到使用扩散。。。对我来说并不奢侈，这是用于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']);

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