在 React/Redux 中使用 Object.assign 或 Spread Operator？这是一个更好的做法

Question

我对将 Object.assign 用于 React 和 Redux 感到有些困惑。

我读了这篇 文章。

它说 ES6 Does not supported by all browsers 但我已经开始使用它了。

我有两个问题：

1. 继续 Object.assign 是正确的决定吗？
2. 有什么选择？

我的代码

export const selectDiameter = (scaleData, size) => {
  return {
    type: SELECT_DIAMETER,
    payload: Object.assign({}, scaleData, {
         diameter: Object.assign({}, scaleData.diameter, {
             selected_tube_diameter: size,
             is_clicked: true,
             audio: Object.assign({}, scaleData.diameter.audio, {
               is_played: true
             })
         })
      })
   }
}

上面代码的替代方案是什么？

原文由 Gopinath Kaliappan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Redux 文档建议您使用扩展运算符方法而不是 Object.assign

根据文档：

另一种方法是使用为下一版本的 JavaScript 提出的对象扩展语法，它允许您使用扩展 (…) 运算符以更简洁的方式将可枚举属性从一个对象复制到另一个对象。对象展开运算符在概念上类似于 ES6 数组展开运算符

当您编写复杂的对象时，使用对象展开语法的优势会变得更加明显

使用 Spread 运算符语法

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: {...scaleData,
                 diameter: {
                          ...scaleData.diameter,
                           selectedTube: size,
                           isClicked: true,
                           audio: {
                                ...scaleData.diameter.audio,
                                isPlayed: true
                           }
                 }

             }
   }
}

它仍然使用 ES6。请参阅 Redux 文档 以获取有关为相同的代码配置代码的更多信息

但是，当您处理嵌套数据时。我更喜欢使用 immutability-helpers

对于您的代码，它就像

import update from 'immutability-helpers';

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: update(scaleData, {
         diameter: {
            selectedTube: { $set: size},
            isClicked: { $set: true},
            audio: {
                isPlayed: {$set: true}
            }
         }
    })
   }
}

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

好吧，也许我不是真的正确，但这是来自 Dan Abramov (redux creator)

最后，您需要记住 Object.assign 是 ES6 中的新方法，因此并非所有浏览器都原生可用。您应该使用 polyfill，无论是 Babel 附带的还是独立的 Object.assign polyfill，都可以在不冒使您的网站崩溃的风险的情况下使用它。

另一个不需要 polyfill 的选项是使用新的对象展开运算符，它不是 ES6 的一部分。但是，建议用于 ES7。它相当受欢迎，如果您使用第二阶段预设，它会在 Babel 中启用。

原文由 Son Dang 发布，翻译遵循 CC BY-SA 3.0 许可协议