为了账号安全,请及时绑定邮箱和手机立即绑定

对象传播与Object.assign

对象传播与Object.assign

青春有我 2019-11-05 10:36:05
假设我有一个options变量,并且想要设置一些默认值。这两种选择的优点/缺点是什么?使用对象传播options = {...optionsDefault, ...options};或使用Object.assignoptions = Object.assign({}, optionsDefault, options);这就是让我感到奇怪的承诺。
查看完整描述

3 回答

?
aluckdog

TA贡献1847条经验 获得超7个赞

这并不一定是详尽无遗的。


传播语法

options = {...optionsDefault, ...options};

好处:

如果编写代码以在没有本机支持的环境中执行,则可以仅编译此语法(与使用polyfill相对)。(例如,使用Babel。)


不太冗长。


缺点:

最初编写此答案时,这只是一个建议,而不是标准化的。使用投标时,请考虑一下如果现在用它编写代码会做什么,并且在朝着标准化的方向发展时,它不会变得标准化或更改。此后已在ES2018中标准化。


从字面上看,不是动态的。


Object.assign()

options = Object.assign({}, optionsDefault, options);

好处:

标准化。


动态。例:


var sources = [{a: "A"}, {b: "B"}, {c: "C"}];

options = Object.assign.apply(Object, [{}].concat(sources));

// or

options = Object.assign({}, ...sources);

缺点:

更详细。

如果编写代码以在没有本机支持的环境中执行,则需要polyfill。

这就是让我感到奇怪的承诺。


这与您的要求没有直接关系。该代码未使用Object.assign(),它正在使用object-assign执行相同操作的用户代码()。他们似乎正在使用Babel编译该代码(并将其与Webpack捆绑在一起),这就是我所说的:您可以编译的语法。他们显然更喜欢将其包含object-assign在其构建中作为依赖项。


查看完整回答
反对 回复 2019-11-05
?
慕斯709654

TA贡献1840条经验 获得超5个赞

作为参考,对象的休息/传播在ECMAScript 2018中最终确定为阶段4。可以在此处找到建议。


大多数情况下,对象重置和散布都以相同的方式进行,主要区别在于散布定义属性,而Object.assign()设置属性。这意味着Object.assign()触发设置器。


值得记住的是,除此之外,对象休息/传播1:1映射到Object.assign()并以不同的方式作用于数组(可迭代)传播。例如,在扩展数组时,将扩展空值。但是,使用对象扩展时,空值会默默地扩展为零。


数组(可迭代)传播示例


const x = [1, 2, null , 3];

const y = [...x, 4, 5];

const z = null;


console.log(y); // [1, 2, null, 3, 4, 5];

console.log([...z]); // TypeError

对象传播示例


const x = null;

const y = {a: 1, b: 2};

const z = {...x, ...y};


console.log(z); //{a: 1, b: 2}

这与Object.assign()的工作方式一致,两者都无提示地无提示地排除了null值。


const x = null;

const y = {a: 1, b: 2};

const z = Object.assign({}, x, y);


console.log(z); //{a: 1, b: 2}


查看完整回答
反对 回复 2019-11-05
?
拉莫斯之舞

TA贡献1820条经验 获得超10个赞

我认为,散布运算符与Object.assign当前答案中似乎未提及的一个大区别是,散布运算符不会将源对象的原型复制到目标对象。如果要向对象添加属性,并且不想更改它的实例,则必须使用Object.assign。下面的示例应证明这一点:


const error = new Error();

error instanceof Error // true


const errorExtendedUsingSpread = {

  ...error,

  ...{

    someValue: true

  }

};

errorExtendedUsingSpread instanceof Error; // false


const errorExtendedUsingAssign = Object.assign(error, {

  someValue: true

});

errorExtendedUsingAssign instanceof Error; // true


查看完整回答
反对 回复 2019-11-05
  • 3 回答
  • 0 关注
  • 369 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信