对象的扩展运算符(...),用于取出参数对象中的所有可遍历属性,然后拷贝到当前对象之中

对象扩展运算符:

1. 复制对象

let obj1 = { x: 1, y: 2, z: 3 }

let obj2 = { ...obj1 }

obj2 = { x: 1, y: 2, z: 3 }

2. 合并对象

let obj1 = { x: 1, y: 2, z: 3 }

let obj2 = { x: 4, y: 5, z: 6 }

let obj3 = { ...obj1, ...obj2 }

obj3 = { x: 1, y: 2, z: 3, x: 4, y: 5, z: 6 }

3. 自定义属性

let obj1 = { x: 1, y: 2, z: 3 }

let obj2 = { ...obj1, a: 4, b: 5, c: 6 }

obj2 = { x: 1, y: 2, z: 3, a: 4, b: 5, c: 6 }

注意:若自定义属性在扩展运算符的后面,且与扩展运算符内的属性同名,则扩展运算符内的属性会被覆盖掉

数组扩展运算符

1. 复制数组

let arr1 = [1, 2, 3]

let arr2 = [ ...arr1 ]

arr2 = [1, 2, 3]

2. 合并数组

let arr1 = [1, 2, 3]

let arr2 = [4, 5, 6]

let arr3 = [ ...arr1, ...arr2 ]

arr3 = [1, 2, 3, 4, 5, 6]

3. 字符串变数组

let arr1 = [1, 2, 3]

let str1 = 'hello'

let arr2 = [...arr1, ...str1]

arr2 = [ 1, 2, 3, "h", "e", "l", "l", "o" ]

关于ES6的对象扩展运算符的更多相关文章

  1. ES6学习笔记-扩展运算符(...)

    扩展运算符的定义: es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列. 它常用在不定参数个数时的函数调用,数组合并等情形. 用法一:不定参数个数时的函数调用 <scr ...

  2. 对象扩展运算符(…)与rest运算符

    对象扩展运算符(…) 当编写一个方法时,我们允许它传入的参数是不确定的.这时候可以使用对象扩展运算符来作参数,看一个简单的列子: function xzdemo(...arg){ console.lo ...

  3. react中对象扩展运算符使用问题

    看别人代码看到 render() { return <Modal {...this.props}> {this.props.children} </Modal> } 对其中的{ ...

  4. es6 学习小记 扩展运算符 三个点(...)

    参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...

  5. ES6数组的扩展运算符

    一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...

  6. (...)ES6三点扩展运算符

    扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(...[a, b, c]) // a b c 用于: 1 将一个数组,变为参数序列 let add = (x, y) => ...

  7. Vue的三个点es6知识,扩展运算符

    Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2 ...

  8. es6可变参数-扩展运算符

    es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...

  9. JavaScript:学习笔记(8)——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

随机推荐

  1. clion 查看代码 多次查看后如何一步一步回退到最初查看的代码位置

    在settings->keymap里面搜索navigate,然后就有蓝色字体的Back.Forward,这个两个有自己对应的快捷键,但是你有可能不能使用这个功能,因为在不同的操作系统里面,有可能 ...

  2. linux 的 两种磁盘扩容

    当LVM分区空间不足的时候,可以进行扩容.主要的扩容方法有两种: 通过空余的磁盘进行扩容,这个方法比较简单,不会对原有数据有影响.将其他LVM分区空间取出一部分给需要扩容的LVM分区.下面就分别具体介 ...

  3. http各类型请求方法工具总结

    本文为博主原创,未经允许不得转载: 在项目中会用到各种类型的http请求,包含put,get,post,delete,formData等各种请求方式,在这里总结一下 用过比较好的请求工具,使用serv ...

  4. post 发送方式

    /** * post 方式 解码 */ public static String getWebContentByPost(String urlString, String data, final St ...

  5. Puppeteer最大化显示,分辨率自适应

    Puppeteer自适应分辨率,可以将defaultViewport设为null, 启动的时候还是半屏显示,点击最大化按钮,可以最大化显示. 这样分辨率能够自适应操作系统. 具体可看:https:// ...

  6. [译]Pandas列数据展示不全解决方法?

    Pandas数据展示列太多会显示...不显示具体数据. 设置参数可以显示全部数据: pd.set_option('display.expand_frame_repr', False)

  7. LeetCode_405. Convert a Number to Hexadecimal

    405. Convert a Number to Hexadecimal Easy Given an integer, write an algorithm to convert it to hexa ...

  8. 使用Nginx+WordPress搭建个人网站

    背景 很多研究技术的朋友喜欢写博客.如果希望搭建一个完全属于自己的网站,也并不困难.这里简要分享一下我搭建这个博客网站的经验. 关键步骤 购买服务器.域名.DNS云解析服务 网站备案(可选) 安装Ng ...

  9. 存储Flash--NOR flash和 Nand flash

    flash是存储芯片的一种,通过特定的程序可以修改里面的数据.FLASH在电子以及半导体领域内往往表示Flash Memory的意思,即平时所说的“闪存”,全名叫Flash EEPROM Memory ...

  10. typeof与instanceof运算符

    typeof运算符用来判断某个变量的数据类型.typeof()返回值类型有如下几种: 1.number :数值类型 2.string :字符串类型 3.boolean :布尔型 4.function: ...