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的更多相关文章

  1. [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 ...

  2. [Python] List & Object spread in Python

    def myfunc(x, y, z): print(x, y, z) tuple_vec = (, , ) dict_vec = {, , } >>> myfunc(*tuple_ ...

  3. js spread object

    What’s is the benefit / drawback of these two alternatives? Using object spread options = {...option ...

  4. ES6之Spread Operater拷贝对象

    译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...

  5. React——教程 && 零基础入门 && 从实践中学习(待续)

    Tutorial: Intro to React This tutorial doesn’t assume any existing React knowledge. Tip This tutoria ...

  6. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  7. npm-bluebird使用

    API 注意 时刻注意return; 使用Promise.promisify简化对test(val, function(err, result){})的处理; 尽量避免使用deferred objec ...

  8. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...

  9. Javascript.ReactNative-2-javascript-syntax-in-react-native

    JavaScript Syntax in React Native Contents: Arrow Function Let+Const Default + Rest + Spread Destruc ...

  10. groovy-运算符

    算术和条件运算符 Groovy支”!”操作符,例如: 1 def expression = false 2 assert !expression 基于集合的运算符: Spread Operator ( ...

随机推荐

  1. 为什么使用B+Tree索引?

    什么是索引? 索引是一种数据结构,具体表现在查找算法上. 索引目的 提高查询效率 [类比字典和借书] 如果要查"mysql"这个单词,我们肯定需要定位到m字母,然后从下往下找到y字 ...

  2. LINUX下搭建简单临时的WWW服务器

    首先确定是否安装有python: python -V 如果有: cd 到你要开放的文件夹中,然后使用下面的命令可以把 当前文件夹内的所有文件 发布到 8000 端口. python -m Simple ...

  3. 记录工作中linux相关操作

    在项目部署之后,查看日志能查看部署结果是否正确部署. 最开始查看日志我会使用cat service.log tail -f service.log vim service.log 打开日志之后 /+查 ...

  4. 【linux】linux固定ip

    vi /etc/sysconfig/network-scripts/ifcfg-ens33  ifcfg-ens33为ifconfig显示的网卡名 TYPE="Ethernet"P ...

  5. Redis 主从,哨兵,集群实战

    下载地址及版本说明 Redis 各版本下载地址: http://download.redis.io/releases/ 版本说明:一般来说版本号第二位,偶数是稳定版本,奇数是在开发中的版本 本文基于R ...

  6. 1.html基础知识

    1.html定义: html是一种超文本标记语言,“超文本”是指页面可以包含图片.链接.音乐.程序等非文字元素. Html不是一种编程语言. 2.html5的新特性: 用于绘画的canvas元素: 用 ...

  7. 阿里云ecs安全组端口开放设置

    新买的一些云服务,上面操作都没问题还是无法访问,需要在购买的服务里加上安全规则,如图: 点击配置规则进行操作

  8. JS/Jquery关系

    1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文件中,要用的时候直接调用即可: 2. JS / JQuery对象 1. 定义 (1) ...

  9. 体验StartOS

    旧电脑,原来使用的是win xp.随着win及其支持打软件打“成长”,电脑运行越来越慢了.一个操作需要很长的时间等待,终于,失去了耐心,换了新的电脑. 旧电脑弃置多年,留之无用,弃之可惜.偶发奇想,换 ...

  10. Django之使用haystack+whoosh实现搜索功能

    为了实现项目中的搜索功能,我们使用的是全文检索框架haystack+搜索引擎whoosh+中文分词包jieba 安装和配置 安装所需包 pip install django-haystack pip ...