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

对象扩展运算符:

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. Ubuntu 16.04与Win10双系统双硬盘安装图解

    一.先做准备工作.建议:在当前系统所在的硬盘上,留一片空的主分区安装Ubuntu系统. 2.划分多大的空间够?安装的过程中需要涉及到分区,为了以免日后重装,我的建议是如下分区:1).5G,主分区,空间 ...

  2. 【转】怎么去阅读Chromium的源码?

    同样路过一下. 从初学者角度的话,如果是刚开始研究chromium,建议找个老版本chromium来看.新版太大太复杂了. 我建议从github搜下chromium.bb这个项目,是个chromium ...

  3. On-line fusion of trackers for single-object tracking

    On-line fusion of trackers for single-object tracking Pattern Recognition, 2018 - Elsevier 2019-08-1 ...

  4. NLP自然语言处理

    转:https://blog.csdn.net/qq_17677907/article/details/86448214 1.有哪些文本表示模型,它们各有什么优缺点?   文本表示模型是研究如何表示文 ...

  5. 取消本地文件夹与SVN服务器的关联

    我们在开发项目中用SVN作为版本管理工具时,从服务器下载到本地的项目是有.svn文件夹的,这个代表是与svn服务器代码相关联的,如果我们想取消本地文件夹与svn服务器的关联,那么有多种方法,这里介绍导 ...

  6. C# HtmlDecode、HtmlEncode、UrlEncode、UrlDecode

    不用System.Web 对 Content进行编码,De编码 string content = "<br/>"; string s1 = WebUtility.Htm ...

  7. [LeetCode] 651. 4 Keys Keyboard 四键的键盘

    Imagine you have a special keyboard with the following keys: Key 1: (A): Print one 'A' on screen. Ke ...

  8. [LeetCode] 803. Bricks Falling When Hit 打击砖块掉落

    We have a grid of 1s and 0s; the 1s in a cell represent bricks.  A brick will not drop if and only i ...

  9. javaScript Es6数组与对象的实例方法

     个人心得 我们在没有接触Es6方法之前,做一些算法之类的事情是就比较麻烦,在做的过程中也要考虑很多的问题,比较麻烦,而Es6的方法正是来方便我们在平常运用时能够将问题简便化,大大的减少我们的日常代码 ...

  10. java获取当前项目路径System.getProperty("user.dir")

    System.getProperty("user.dir") 就是项目的文件夹绝对路径