假设我有一个选项变量我想设置一个默认值。
这两种选择的优点/缺点是什么?
使用对象扩展
options = {...optionsDefault, ...options};
或者使用Object.assign
options = Object.assign({}, optionsDefault, options);
这是让我疑惑的承诺。
当前回答
(1)创建对象的浅副本和(2)将多个对象合并为单个对象的方法在2014年至2018年之间有了很大的发展。
下面概述的方法在不同时期变得可用并广泛使用。这个答案提供了一些历史视角，但并不详尽。
如果没有库或现代语法的帮助，您将使用for-in循环，例如。 var mergedOptions = {} for (var键在defaultOptions) { mergedOptions[key] = defaultOptions[key] ｝ 对于(var键在选项中){ mergedOptions[key] = options[key] ｝ options = mergedOptions
2006
jQuery 1.0有jQuery.extend(): 选项= $。extend({}， defaultOptions, options)
⋮
2010
下划线。js 1.0有_.extend() 选项= _。extend({}， defaultOptions, options)
⋮
2014
2ality发布了一篇关于Object.assign()加入ES2015的文章 对象分配发布到npm。 var objectAssign = require('object-assign') options = objectAssign({}， defaultOptions, options) ES2016提出的对象Rest/扩展属性语法。
2015
对象。Chrome (45)， Firefox(34)和Node.js(4)都支持assign。不过，旧的运行时需要Polyfill。 options =对象。assign({}， defaultOptions, options) 对象Rest/Spread Properties提案进入第二阶段。
2016
对象Rest/扩展属性语法没有被包含在ES2016中，但是提案已经到了第三阶段。
2017
对象Rest/Spread属性语法没有包含在ES2017中，但在Chrome (60)， Firefox(55)和Node.js(8.3)中可用。不过，旧的运行时需要一些编译。 选项={…defaultOptions，…选择}
2018
对象Rest/Spread Properties提案达到了第4阶段，语法被包含在ES2018标准中。
其他回答
(1)创建对象的浅副本和(2)将多个对象合并为单个对象的方法在2014年至2018年之间有了很大的发展。
下面概述的方法在不同时期变得可用并广泛使用。这个答案提供了一些历史视角，但并不详尽。
如果没有库或现代语法的帮助，您将使用for-in循环，例如。 var mergedOptions = {} for (var键在defaultOptions) { mergedOptions[key] = defaultOptions[key] ｝ 对于(var键在选项中){ mergedOptions[key] = options[key] ｝ options = mergedOptions
2006
jQuery 1.0有jQuery.extend(): 选项= $。extend({}， defaultOptions, options)
⋮
2010
下划线。js 1.0有_.extend() 选项= _。extend({}， defaultOptions, options)
⋮
2014
2ality发布了一篇关于Object.assign()加入ES2015的文章 对象分配发布到npm。 var objectAssign = require('object-assign') options = objectAssign({}， defaultOptions, options) ES2016提出的对象Rest/扩展属性语法。
2015
对象。Chrome (45)， Firefox(34)和Node.js(4)都支持assign。不过，旧的运行时需要Polyfill。 options =对象。assign({}， defaultOptions, options) 对象Rest/Spread Properties提案进入第二阶段。
2016
对象Rest/扩展属性语法没有被包含在ES2016中，但是提案已经到了第三阶段。
2017
对象Rest/Spread属性语法没有包含在ES2017中，但在Chrome (60)， Firefox(55)和Node.js(8.3)中可用。不过，旧的运行时需要一些编译。 选项={…defaultOptions，…选择}
2018
对象Rest/Spread Properties提案达到了第4阶段，语法被包含在ES2018标准中。
这并不一定详尽无遗。
传播的语法
options = {...optionsDefault, ...options};
优点:
如果在没有本机支持的环境中编写代码以执行，则可以只编译此语法(而不是使用polyfill)。(比如巴别塔。) 可以减少复杂性。
缺点:
当这个答案最初被写出来的时候，这是一个建议，没有标准化。在使用提案时，请考虑如果您现在使用提案编写代码，而它没有得到标准化或在向标准化发展的过程中发生变化，该怎么办。这已经在ES2018中标准化了。 字面的，不是动态的。
Object.assign ()
options = Object.assign({}, optionsDefault, options);
优点:
标准化。 动态的。例子: var sources = [{a: " a "}， {b: " b "}， {c: " c "}]; options = Object.assign。应用(对象,({}).concat(来源)); / /或 options =对象。分配({},…来源);
缺点:
更详细的。 如果在没有本机支持的环境中编写代码执行，则需要填充。
这是让我疑惑的承诺。
这和你问的问题没有直接关系。这段代码没有使用Object.assign()，而是使用用户代码(object-assign)来做同样的事情。他们似乎在用Babel编译代码(并将其与Webpack捆绑)，这就是我所说的:你可以编译的语法。他们显然更喜欢这样，而不是必须将对象赋值作为一个依赖项包含到他们的构建中。
对象扩展操作符(…)在浏览器中不起作用，因为它还不是任何ES规范的一部分，只是一个建议。唯一的选择是用Babel(或类似的东西)编译它。
正如您所看到的，它只是Object.assign({})上的语法糖。
在我看来，这些是重要的区别。
对象。赋值在大多数浏览器中都有效(不需要编译) ．.． For对象不是标准化的 ．.． 防止您意外地改变对象 ．.． 将填充对象。在没有它的浏览器中赋值 ．.． 需要更少的代码来表达相同的思想
我们将创建一个名为identity的函数，它只返回我们给它的任何参数。
identity = (arg) => arg
和一个简单的数组。
arr = [1, 2, 3]
如果用arr求恒等函数，我们知道会发生什么
太多的错误答案……
我搜索了一下，发现了很多关于这方面的错误信息。
总结
既不……扩散也不反对。赋值更快。视情况而定。 对象。如果不考虑副作用/对象突变，Assign几乎总是更快。 除了性能之外，使用这两种方法通常都没有优点或缺点，直到遇到极限情况，例如复制包含getter /setter的对象或只读属性。点击这里阅读更多。
性能
是否对象。Assign或…传播速度更快，这取决于你想要组合的东西，以及你正在使用的运行时(实现和优化不时发生)。对于小的对象，这无关紧要。
对于较大的对象，请使用Object。Assign通常更好。特别是在不需要关心副作用的情况下，只需向第一个对象添加属性就可以节省时间，而不是复制两个对象并创建一个全新的对象。看到的:
async function retrieveAndCombine() {
const bigPayload = await retrieveData()
const smallPayload = await retrieveData2()
// only the properties of smallPayload is iterated through
// whereas bigPayload is mutated.
return Object.assign(bigPayload, smallPayload)
}
如果有副作用的话
在副作用很重要的情况下，例如将一个对象与另一个对象组合作为参数传入。
在下面的例子中，bigPayload将被改变，如果retrieveAndCombine之外的其他函数/对象依赖于bigPayload，这是一个坏主意。在这种情况下，可以交换传递给Object的参数。赋值，或者直接使用{}作为第一个参数来创建一个新对象:
async function retrieveAndCombine(bigPayload) {
const smallPayload = await retrieveData2()
// this is slightly more efficient
return Object.assign(smallPayload, bigPayload)
// this is still okay assuming `smallPayload` only has a few properties
return Object.assign({}, smallPayload, bigPayload)
}
Test
试试下面的代码片段。注意:运行需要一段时间。
const rand = () => (Math.random() + 1).toString(36).substring(7) function combineBigObjects() { console.log('Please wait...creating the test objects...') const obj = {} const obj2 = {} for (let i = 0; i < 100000; i++) { const key = rand() obj[rand()] = { [rand()]: rand(), [rand()]: rand(), } obj2[rand()] = { [rand()]: rand(), [rand()]: rand(), } } console.log('Combine big objects using spread:') console.time() const result1 = { ...obj, ...obj2, } console.timeEnd() console.log('Combine big objects using assign:') console.time() Object.assign({}, obj, obj2) console.timeEnd() console.log('Combine big objects using assign, but mutates first obj:') console.time() Object.assign(obj, obj2) console.timeEnd() } combineBigObjects() function combineSmallObjects() { const firstObject = () => ({ [rand()]: rand() }) const secondObject = () => ({ [rand()]: rand() }) console.log('Combine small objects using spread:') console.time() for (let i = 0; i < 500000; i++) { const finalObject = { ...firstObject(), ...secondObject(), } } console.timeEnd() console.log('Combine small objects using assign:') console.time() for (let i = 0; i < 500000; i++) { const finalObject = Object.assign({}, firstObject(), secondObject()) } console.timeEnd() console.log('Combine small objects using assign, but mutates first obj:') console.time() for (let i = 0; i < 500000; i++) { const finalObject = Object.assign(firstObject(), secondObject()) } console.timeEnd() } combineSmallObjects()
