[译] Object.assign 和 Object Spread 之争, 用谁?

简介: 在 2018 年 Object Rest/Spread Proposal 达到了 stage 4,这意味着在未来它会将入到 ECMAScript 标准中。它也被加入到Node LTS. Node.js 8 以后的版本你可以使用它,所以你可以放心地开始使用它。

原文链接 http://thecodebarbarian.com/object-assign-vs-object-spread.html


在 2018 年 Object Rest/Spread Proposal 达到了 stage 4,这意味着在未来它会将入到 ECMAScript 标准中。它也被加入到Node LTS. Node.js 8 以后的版本你可以使用它,所以你可以放心地开始使用它。


Object Spread 也可以叫做对象展开符,下文都以 Object Spread 来进行描述。


image.png


Object Spread 和 Object.assign 在功能上很相似。你应该使用哪一个? 事实证明,答案比你想象的要微妙许多。


Object Spread 概论



Object Spread 运算符的基本思想是使用现有对象的自身属性来创建新的普通对象。 所以 {...obj} 创建一个和 obj 具有相同属性的对象。 对于普通的旧 JavaScript 对象,你实际上是在创建一个 obj副本。


image.png


与object .assign()类似,Object spread 操作符不复制继承的属性或类的属性。但是它会复制 ES6 的 symbols 属性。


image.png


还可以使用 Object spread 操作符混合其他属性。


顺序问题: Object spread 操作符将覆盖在它之前定义的属性。


image.png


和 Object.assign() 的区别


对于上面的例子, Object.assign()函数基本上可以与 Object spread 操作符互换。事实上,object spread spec 明确指出 {...obj}等同于 Object.assign({},obj


image.png


那么你为什么要使用其中一个呢?一个关键的区别是 Object spread 操作符总是给你一个POJO(Plain Ordinary JavaScript Object)。而 Object.assign()函数却修改其第一个传入对象 obj


image.png


换句话说,Object.assign()修改了一个对象,因此它可以触发 ES6 setter。如果你更喜欢使用immutable技术,那么 Object spread 操作符就是你更好的选择。使用 Object.assign(),你必须确保始终将空对象 {}作为第一个参数传递。


性能怎么样? 这是一些简单的基准测试。如果将空对象作为第一个参数传递给 Object.assign(),看起来 Object spread 会更快,但除此之外它们是可互换的。

下面是一个使用 Object.assign()和in-place赋值的基准测试:


image.png


在这种情况下,两者是相似的:


image.png


但是,一旦向 Object.assign()输入一个空对象参数,对象扩展运算符就会更快


image.png


这是输出:


image.png


ESLint 配置



默认情况下,ESLint在解析层面禁止对象rest / spread运算符你需要在.eslintrc.yml中将parserOptions.ecmaVersion选项设置为至少9,否则你将得到一个解析错误。


image.png


ESLint添加了一个新的规则prefer-object-spread,它会强制你使用 Object spread 操作符 而不是 Object.assign()。 要启用此规则,请使用:


image.png


现在,如果您使用 object.assign()而不是Object spread, ESLint将报告一个错误。


image.png

image.png


最后



Object rest / spread运算符在语法更加简洁,并且比 Object.assign()提供了性能优势。 如果你运行的是Node.js 8或更高版本,请尝试使用这些新运算符,使代码更简洁。


相关文章
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0
|
JavaScript 开发者
ES6之Object.assign()用法,Object.assign()到底是浅拷贝还是深拷贝?
ES6之Object.assign()用法,Object.assign()到底是浅拷贝还是深拷贝?
9069 1
|
1月前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
114 4
|
2月前
|
Java
Java Object 类详解
在 Java 中,`Object` 类是所有类的根类,每个 Java 类都直接或间接继承自 `Object`。作为所有类的超类,`Object` 定义了若干基本方法,如 `equals`、`hashCode`、`toString` 等,这些方法在所有对象中均可使用。通过重写这些方法,可以实现基于内容的比较、生成有意义的字符串表示以及确保哈希码的一致性。此外,`Object` 还提供了 `clone`、`getClass`、`notify`、`notifyAll` 和 `wait` 等方法,支持对象克隆、反射机制及线程同步。理解和重写这些方法有助于提升 Java 代码的可读性和可维护性。
100 20
|
7月前
|
Java
Java Object 类
5月更文挑战第16天
|
4月前
|
Java
【Java基础面试二十】、介绍一下Object类中的方法
这篇文章介绍了Java中Object类的常用方法,包括`getClass()`、`equals()`、`hashCode()`、`toString()`、`wait()`、`notify()`、`notifyAll()`和`clone()`,并提到了不推荐使用的`finalize()`方法。
【Java基础面试二十】、介绍一下Object类中的方法
|
3月前
|
Python
类与面向对象编程(Object-Oriented Programming, OOP)
类与面向对象编程(Object-Oriented Programming, OOP)
25 0
|
4月前
|
前端开发 Java 编译器
【前端学java】java中的Object类和前端中的Object有什么区别(9)
【8月更文挑战第10天】java中的Object类和前端中的Object有什么区别
47 0
【前端学java】java中的Object类和前端中的Object有什么区别(9)
|
4月前
|
算法 Java
12 Java常用类(一)(内部类+object类+包装类)
12 Java常用类(一)(内部类+object类+包装类)
41 5
|
5月前
|
Java
Java中的Object类 ( 详解toString方法 | equals方法 )
Java中的Object类 ( 详解toString方法 | equals方法 )
下一篇
DataWorks