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

【问题标题】：How to access the nested property-by-name of the Javascript object when the object is accessed from the spread notation ...?当从扩展符号访问对象时如何访问 Javascript 对象的嵌套按名称属性...？
【发布时间】：2021-01-14 20:27:59
【问题描述】：

这个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'] 不适用于 spread（但它适用于 spread 之外） - 代码根本无法编译，有关于不匹配的{ 的错误消息和其他晦涩的消息（例如在 jsfiddle 中）。

我的问题是 - 如何访问扩展中的嵌套属性/元素？也许其他括号是必要的？

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

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

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

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

【问题讨论】：

虽然您收到的答案是正确的，但我不清楚您的“一般示例”代码（带有foo 和foo1 的代码）是否与你的减速机。如果没有看到初始状态的代码，就无法确定，但如果 invoiceDate 是您所在州的叶子 (state.invoiceDate)，那么您的减速器应该是正确的。

标签： javascript react-redux ag-grid spread-syntax

【解决方案1】：

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

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

【讨论】：

如果它是您问题中问题的最合适的解决方案，您可以接受自己的答案。

【解决方案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);

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

【讨论】：

【解决方案3】：

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

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

【讨论】：