Javascript 在 React/Redux 中使用 Object.assign 还是 Spread 运算符？哪个是更好的做法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43376849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use Object.assign or Spread Operator in React/Redux? Which is a better practise
提问by Gopinath Kaliappan
I have some confusion about using Object.assignfor React and Redux.
我Object.assign对 React 和 Redux 的使用有些困惑。
I read this article.
我读了这篇文章。
It says ES6 Does not supported by all browsers but I have started using it.
它说 ES6 并非所有浏览器都支持，但我已经开始使用它。
I have two questions:
我有两个问题：
- Is it the right decision to continue with
Object.assign? - What is the alternative?
- 继续这样做是正确的决定
Object.assign吗？ - 什么是替代方案？
My Code
我的代码
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
})
})
})
}
}
What is the alternative for the above code?
上面代码的替代方法是什么？
采纳答案by Shubham Khatri
Redux docs recommends you to use the spread operator approach instead of the Object.assign
Redux 文档建议您使用扩展运算符方法而不是 Object.assign
As per the docs:
根据文档：
An alternative approach is to use the object spread syntax proposed for the next versions of JavaScript which lets you use the spread (...) operator to copy enumerable properties from one object to another in a more succinct way. The object spread operator is conceptually similar to the ES6 array spread operator
另一种方法是使用为下一版本的 JavaScript 提议的对象扩展语法，它允许您使用扩展 (...) 运算符以更简洁的方式将可枚举属性从一个对象复制到另一个对象。对象扩展运算符在概念上类似于 ES6 数组扩展运算符
The advantage of using the object spread syntax becomes more apparent when you're composing complex objects
当您组合复杂对象时，使用对象扩展语法的优势变得更加明显
Using the Spread operator syntax
使用扩展运算符语法
export const selectDiameter = (scaleData,size) => {
return {
type: SELECT_DIAMETER,
payload: {...scaleData,
diameter: {
...scaleData.diameter,
selectedTube: size,
isClicked: true,
audio: {
...scaleData.diameter.audio,
isPlayed: true
}
}
}
}
}
It still uses ES6. See the Redux docsfor more info on configuring your code for the same
它仍然使用 ES6。有关配置相同代码的更多信息，请参阅Redux 文档
However when you are dealing with the nested data. I prefer to use immutability-helpers
但是，当您处理嵌套数据时。我更喜欢使用immutability-helpers
For your code it will be like
对于您的代码，它会像
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}
}
}
})
}
}
回答by Patrick Hund
The alternative to the code you posted is using object spreading:
您发布的代码的替代方法是使用对象传播：
export const selectDiameter = (scaleData, size) => ({
type: SELECT_DIAMETER,
payload: {
...scaleData,
diameter: {
...scaleData.diameter,
selected_tube_diameter: size,
is_clicked: true,
audio: {
...scaleData.diameter.audio,
is_played:true
}
}
}
});
I have also shortened the body of the arrow function in your code to simply returning the object.
我还缩短了代码中箭头函数的主体，以简单地返回对象。
You can use the object rest spread syntax by using the Babel plugin transform-object-rest-spread.
您可以通过使用 Babel 插件transform-object-rest-spread来使用 object rest spread 语法。
Install it like this:
像这样安装它：
npm install --save-dev babel-plugin-transform-object-rest-spread
Configure its use in your .babelrclike this:
像这样在.babelrc 中配置它的使用：
{
"plugins": ["transform-object-rest-spread"]
}
回答by Son Dang
Ok may be I was not really right but this is from Dan Abramov (redux creator)
好吧，我可能不太对，但这是来自丹·阿布拉莫夫（Dan Abramov）（redux 创建者）
Finally, you need to remember that Object.assign is a new method in ES6, so it is not natively available in all the browsers. You should use a polyfill, either the one that ships with Babel or a standalone Object.assign polyfill, to use it without risking crashing your website.
Another option that doesn't require a polyfill is to use the new object spread operator, which is not part of ES6. However, it is proposed for ES7. It is fairly popular, and it is enabled in Babel if you use the stage two preset.
最后，您需要记住 Object.assign 是 ES6 中的一个新方法，因此并非所有浏览器都原生提供它。你应该使用一个 polyfill，无论是 Babel 自带的还是一个独立的 Object.assign polyfill，来使用它而不用冒网站崩溃的风险。
另一个不需要 polyfill 的选项是使用新的对象扩展运算符，它不是 ES6 的一部分。但是，建议用于 ES7。它相当流行，如果您使用第二阶段预设，它会在 Babel 中启用。
回答by Son Dang
Object spread is ES7 syntax, render supported by Babel, Object.assign() is ES6 syntax, it not support in some browser. That's why you should use Object spread instead of Object.assign()
Object spread是ES7语法，Babel支持render，Object.assign()是ES6语法，部分浏览器不支持。这就是为什么你应该使用 Object spread 而不是 Object.assign()
