[译] Object.assign 和 Object Spread 之争, 用谁?
点击上方“秋风的笔记”关注我们
原文链接 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 来进行描述。
$ node -v
v8.9.4
$ node
> const obj = { foo: 1, bar: 1 };
undefined
> ({ ...obj, baz: 1 });
{ foo: 1, bar: 1, baz: 1 }
Object Spread 和 Object.assign 在功能上很相似。你应该使用哪一个? 事实证明,答案比你想象的要微妙许多。
Object Spread 概论
Object Spread 运算符的基本思想是使用现有对象的自身属性来创建新的普通对象。 所以 {...obj}
创建一个和 obj
具有相同属性的对象。 对于普通的旧 JavaScript 对象,你实际上是在创建一个 obj
副本。
const obj = { foo: 'bar' };
const clone = { ...obj }; // `{ foo: 'bar' }`
obj.foo = 'baz';
clone.foo; // 'bar'
与object .assign()类似,Object spread 操作符不复制继承的属性或类的属性。但是它会复制 ES6 的 symbols 属性。
class BaseClass {
foo() { return 1; }
}
class MyClass extends BaseClass {
bar() { return 2; }
}
const obj = new MyClass();
obj.baz = function() { return 3; };
obj[Symbol.for('test')] = 4;
// Does _not_ copy any properties from `MyClass` or `BaseClass`
const clone = { ...obj };
console.log(clone); // { baz: [Function], [Symbol(test)]: 4 }
console.log(clone.constructor.name); // Object
console.log(clone instanceof MyClass); // false
还可以使用 Object spread 操作符混合其他属性。
顺序问题: Object spread 操作符将覆盖在它之前定义的属性。
const obj = { a: 'a', b: 'b', c: 'c' };
{ a: 1, b: null, c: void 0, ...obj }; // { a: 'a', b: 'b', c: 'c' }
{ a: 1, b: null, ...obj, c: void 0 }; // { a: 'a', b: 'b', c: undefined }
{ a: 1, ...obj, b: null, c: void 0 }; // { a: 'a', b: null, c: undefined }
{ ...obj, a: 1, b: null, c: void 0 }; // { a: 1, b: null, c: undefined }
和 Object.assign() 的区别
对于上面的例子, Object.assign()
函数基本上可以与 Object spread 操作符互换。事实上,object spread spec 明确指出 {...obj}
等同于 Object.assign({},obj)
。
const obj = { a: 'a', b: 'b', c: 'c' };
Object.assign({ a: 1, b: null, c: void 0 }, obj); // { a: 'a', b: 'b', c: 'c' }
Object.assign({ a: 1, b: null }, obj, { c: void 0 }); // { a: 'a', b: 'b', c: undefined }
Object.assign({ a: 1 }, obj, { b: null, c: void 0 }); // { a: 'a', b: null, c: undefined }
Object.assign({}, obj, { a: 1, b: null, c: void 0 }); // { a: 1, b: null, c: undefined }
那么你为什么要使用其中一个呢?一个关键的区别是 Object spread 操作符总是给你一个POJO(Plain Ordinary JavaScript Object)。而 Object.assign()
函数却修改其第一个传入对象 obj
:
class MyClass {
set val(v) {
console.log('Setter called', v);
return v;
}
}
const obj = new MyClass();
Object.assign(obj, { val: 42 }); // Prints "Setter called 42"
换句话说, Object.assign()
修改了一个对象,因此它可以触发 ES6 setter。如果你更喜欢使用immutable技术,那么 Object spread 操作符就是你更好的选择。使用 Object.assign()
,你必须确保始终将空对象 {}
作为第一个参数传递。
性能怎么样? 这是一些简单的基准测试。如果将空对象作为第一个参数传递给 Object.assign()
,看起来 Object spread 会更快,但除此之外它们是可互换的。
下面是一个使用 Object.assign()
和in-place赋值的基准测试:
const Benchmark = require('benchmark');
const suite = new Benchmark.Suite;
const obj = { foo: 1, bar: 2 };
suite.
add('Object spread', function() {
({ baz: 3, ...obj });
}).
add('Object.assign()', function() {
Object.assign({ baz: 3 }, obj);
}).
on('cycle', function(event) {
console.log(String(event.target));
}).
on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').map('name'));
}).
run({ 'async': true });
在这种情况下,两者是相似的:
Object spread x 3,170,111 ops/sec +-1.50% (90 runs sampled)
Object.assign() x 3,290,165 ops/sec +-1.86% (88 runs sampled)
Fastest is Object.assign()
但是,一旦向 Object.assign()
输入一个空对象参数,对象扩展运算符就会更快
suite.
add('Object spread', function() {
({ baz: 3, ...obj });
}).
add('Object.assign()', function() {
Object.assign({}, obj, { baz: 3 });
})
这是输出:
Object spread x 3,065,831 ops/sec +-2.12% (85 runs sampled)
Object.assign() x 2,461,926 ops/sec +-1.52% (88 runs sampled)
Fastest is Object spread
ESLint 配置
默认情况下,ESLint在解析层面禁止对象rest / spread运算符你需要在.eslintrc.yml中将parserOptions.ecmaVersion选项设置为至少9,否则你将得到一个解析错误。
parserOptions:
# Otherwise object spread causes 'Parsing error: Unexpected token ..'
ecmaVersion: 9
ESLint添加了一个新的规则prefer-object-spread,它会强制你使用 Object spread 操作符 而不是 Object.assign()
。 要启用此规则,请使用:
parserOptions:
ecmaVersion: 9
rules:
prefer-object-spread: error
现在,如果您使用 object.assign()
而不是Object spread, ESLint将报告一个错误。
Use an object spread instead of `Object.assign` eg: `{ ...foo }` prefer-object-spread
最后
Object rest / spread运算符在语法更加简洁,并且比 Object.assign()
提供了性能优势。 如果你运行的是Node.js 8或更高版本,请尝试使用这些新运算符,使代码更简洁。
更多请关注
友情链接: https://huayifeng.top/
长按二维码,可以关注我哟
万水千山总是情,点个小赞行不行
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第二节:Activiti6.0配置文件的读取
- SpringMvc配置文件上传
- 使用web.xml配置SpringMvc(使用Java加载配置)
- SpringMVC配置字符过滤器的两种方式
- SpringMvc使用Json(Java配置方式)
- 使用IDEA创建SpringMvc并整合Thymeleaf(Java配置版)
- Junit报错:Argument(s) are different! Wanted:
- RocketMQ使用过滤器filterServer(4.3版本后)
- Python+Appium运行简单的demo,你需要理解Appium运行原理!
- 网站日志分析完整实践【技术创造101训练营】
- HTML前端知识
- 掌握 AST,轻松落地关键业务「技术创作101训练营」
- 一文轻松学会linux字符设备驱动
- leetcode树之N叉树的前序遍历
- 2020-09-20:如何判断一个数是质数?