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

Posted 2023-02-22

【中文标题】当从扩展符号访问对象时如何访问 Javascript 对象的嵌套按名称属性...？

【英文标题】：How to access the nested property-by-name of the Javascript object when the object is accessed from the spread notation ...?

【发布时间】：2021-01-14 20:27:59

【问题描述】：

这个https://***.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)，那么您的减速器应该是正确的。

【参考方案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);