prefer-object-spread
eslint报错:
Use an object spread instead of `Object.assign` eg: `{ ...foo }`.(prefer-object-spread)
即:
禁止使用以对象字面量作为第一个参数的 Object.assign,优先使用对象扩展。
示例:(注意:对象字面量)
Object.assign({}, foo)
改为:
{ ...foo }
思考一下:
Object.assign常用来浅拷贝,那扩展符赋值的对象是重新开辟的堆内存还是指向的扩展对象的堆内存?
const a = { a: 'a' };
const b = { ...a };
console.log('b=', b); // b= {a: "a"}
a.a = 'c';
console.log('b变了吗', b); // b变了吗 {a: "a"}
答案很明显,我想浅拷贝一个a, 扩展运算符和Object.assign都能浅拷贝对象。
那数组会怎样?
const a = ['a', 'b'];
const b = [...a];
console.log('b=', b); // b= ["a", "b"]
a[1] = 'c';
console.log('b变了吗', b); // b变了吗 ["a", "b"]
很好,数组也能放心的浅拷贝;
等等。。。
如果是数组对象呢?
const a = [{ a: 'a' }];
const b = [...a];
console.log('b=', JSON.stringify(b)); // b= [{"a":"a"}]
a[0].a = 'c';
console.log('b变了吗', JSON.stringify(b)); // b变了吗 [{"a":"c"}]
变了,结果说明展开符只对数组里面的对象进行了展开,对象里面的属性还是指向的原来的内存地址,所以深拷贝行不通,目前来看和Object.assign的浅拷贝作用一样。
那...等等,
Object.assign还有合并的作用,再来试试扩展符合并。
const a = { a1: 'a1', a2: 'a2' };
const b = { b1: 'b1', a2: 'b2' };
const c = Object.assign({}, a, b);
const d = { ...a, ...b };
const e = { ...b, ...a };
console.log('c', c); // c {a1: "a1", a2: "b2", b1: "b1"}
console.log('d', d); // d {a1: "a1", a2: "b2", b1: "b1"}
console.log('e', e); // e {b1: "b1", a2: "a2", a1: "a1"}
结果一样,Object.assign将b和a的属性合并到空对象里,相同属性会覆盖合并取后面的值,扩展符直接合并两个对象的属性,合并关系都是后面的覆盖前面的值。
那么,合并数组呢?
const a = ['a', 'b'];
const b = ['a', 'c'];
const c = Object.assign([], a, b);
const d = [...a, ...b];
console.log('c', c); // c ["a", "c"]
console.log('d', d); // d ["a", "b", "a", "c"]
发生了什么?
Object.assign
处理数组时,会把数组视为对象,然后按顺序覆盖前面的值,所以b中的'a'覆盖了a中的'a', b中的'c'覆盖了a中的'b',而扩展符和concat方法一样合并数组。
合并数组时,Object.assign和扩展符作用不一样了。
那么,复杂数组呢?
const a = [{ x: 'x', y: 'y' }];
const b = [{ z: 'z', y: 'm' }];
const c = Object.assign([], a, b);
const d = [...a, ...b];
console.log('c', JSON.stringify(c)); // c [{"z":"z","y":"m"}]
console.log('d', JSON.stringify(d)); // d [{"x":"x","y":"y"},{"z":"z","y":"m"}]
b[0].z = 'n';
console.log('c', JSON.stringify(c)); // c [{"z":"n","y":"m"}]
console.log('d', JSON.stringify(d)); // d [{"x":"x","y":"y"},{"z":"n","y":"m"}]
Object.assign毫无悬念的后面的覆盖前面了(将数组看做对象时,属性就是下标),引用类型指向的还是原来的内存地址。
最后:
虽然说Object.assign和...扩展符很多时候能混用,但对数组进行操作的时候一定要小心两者的区别,不然合并覆盖变成合并拼接,所以请牢记使用以对象字面量作为第一个参数的 Object.assign,优先使用对象扩展。
prefer-object-spread的更多相关文章
- [Python] Object spread operator in Python
In JS, we have object spread opreator: const x = { a: '1', b: '2' } const y = { c: '3', d: '4' } con ...
- [Python] List & Object spread in Python
def myfunc(x, y, z): print(x, y, z) tuple_vec = (, , ) dict_vec = {, , } >>> myfunc(*tuple_ ...
- js spread object
What’s is the benefit / drawback of these two alternatives? Using object spread options = {...option ...
- ES6之Spread Operater拷贝对象
译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...
- React——教程 && 零基础入门 && 从实践中学习(待续)
Tutorial: Intro to React This tutorial doesn’t assume any existing React knowledge. Tip This tutoria ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- npm-bluebird使用
API 注意 时刻注意return; 使用Promise.promisify简化对test(val, function(err, result){})的处理; 尽量避免使用deferred objec ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
- Javascript.ReactNative-2-javascript-syntax-in-react-native
JavaScript Syntax in React Native Contents: Arrow Function Let+Const Default + Rest + Spread Destruc ...
- groovy-运算符
算术和条件运算符 Groovy支”!”操作符,例如: 1 def expression = false 2 assert !expression 基于集合的运算符: Spread Operator ( ...
随机推荐
- OAuth2.0摘要
一.简介 不使用oauth2.0协议,资源所有者直接给需要使用资源的第三方应用共享凭据时,有这些问题: 需要直接共享给第三方应用凭据 需要服务器支持密码身份验证 凭据的访问权限过大,失去对访问时间和范 ...
- 设计模式笔记(一):Singleton 设计模式
今天开始学习设计模式,借此机会学习并整理学习笔记. 设计模式是一门不区分语言的课程,什么样的编程语言都可以用到设计模式.如果说java语法规则比作武功招式的话,那么设计模式就是心法. 设计模式共有23 ...
- MySQL中对字段内容为Null的处理
使用如下指令,意思就是 select IFNULL(jxjy,0) AS jxjy from yourTable ifnull(a,b) 意思是指:如果字段a为null,就等于b if( sex = ...
- 我用阿里云的虚拟云主机,也能配置https加密吗?
我用阿里云的虚拟云主机,也能配置https加密吗?答案是YES. 整个过程比想象中还要简单,都是一些基本的配置,虚拟主机 Web托管都可以很容易的搞定https. 首先我们要了解一下,阿里云是怎么支持 ...
- Redis数据库之KEY的操作与事务管理
目的 了解并掌握各种数据类型的命令操作方式,以及各种数据类型值的操作方式.同时,主要培养对KEY的操作命令运用的能力.重点掌握对KEY信息的管理.事务常规管理和事务回滚操作. KEYS命令的练习,对K ...
- 【未完成】mysql数据库安全性配置——用户授权
方式一:从服务设置授权 一:用户授权——从服务设置授权 (1)准备测试环境——不同服务器用户 首先,查看数据库连接当前用户情况,当前连接的只有root用户. select user,host,pass ...
- vue中"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序"的报错
在vue项目中发现了这个报错 解决办法将项目里的“node_modules”文件夹删除,然后重新运行cnpm install
- Spark 学习笔记之 distinct/groupByKey/reduceByKey
distinct/groupByKey/reduceByKey: distinct: import org.apache.spark.SparkContext import org.apache.sp ...
- js中try、catch、finally的执行规则
首先一个常识就是,在浏览器执行JS脚本过程中,当出现脚本错误,并且你没有手动进行异常捕捉时,他会在浏览器下面出现黄色的叹号,这是正常的,这也不是最重要的,最重要的是,出错行以下的所有JS代码将中停执行 ...
- Mac 10.14 安装抓包工具Fiddler
环境安装 第一步: 首先,Mac下需要使用.Net编译后的程序,需要用到跨平台的方案Mono(现阶段微软已推出跨平台的方案.Net Core,不过暂时只支持控制台程序).安装程序可以从http://w ...