关于ES6的对象扩展运算符
对象的扩展运算符(...),用于取出参数对象中的所有可遍历属性,然后拷贝到当前对象之中
对象扩展运算符:
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的对象扩展运算符的更多相关文章
- ES6学习笔记-扩展运算符(...)
扩展运算符的定义: es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列. 它常用在不定参数个数时的函数调用,数组合并等情形. 用法一:不定参数个数时的函数调用 <scr ...
- 对象扩展运算符(…)与rest运算符
对象扩展运算符(…) 当编写一个方法时,我们允许它传入的参数是不确定的.这时候可以使用对象扩展运算符来作参数,看一个简单的列子: function xzdemo(...arg){ console.lo ...
- react中对象扩展运算符使用问题
看别人代码看到 render() { return <Modal {...this.props}> {this.props.children} </Modal> } 对其中的{ ...
- es6 学习小记 扩展运算符 三个点(...)
参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...
- ES6数组的扩展运算符
一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...
- (...)ES6三点扩展运算符
扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(...[a, b, c]) // a b c 用于: 1 将一个数组,变为参数序列 let add = (x, y) => ...
- Vue的三个点es6知识,扩展运算符
Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2 ...
- es6可变参数-扩展运算符
es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...
- JavaScript:学习笔记(8)——对象扩展运算符
JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...
随机推荐
- Redis自定义fastJson Serializer
public class FastJsonRedisSerializer<T> implements RedisSerializer<T> { public static fi ...
- mysql用户添加执行存储过程权限
- js写入和读取cookie
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- redis连接池——JedisPool和JedisCluster的介绍与使用
目录 Jedis使用方式的介绍 Redis连接池介绍 创建连接池配置文件 单机版的Redis连接池 集群版的Redis连接池 总结 Jedis使用方式的介绍 Jedis就是Java实现的操作Redis ...
- Javascript 将 console.log 日志打印到 html 页面中
如何将 console.log() 打印的日志输出到 html 页面中 (function () { var old = console.log; var logger = document.getE ...
- 【转】SOA架构和微服务架构的区别
SOA架构和微服务架构的区别 https://blog.csdn.net/zpoison/article/details/80729052
- [转]彻底解决deepin linux的无线网络问题
链接地址:https://bbs.deepin.org/forum.php?mod=viewthread&tid=153154
- [LeetCode] 666. Path Sum IV 二叉树的路径和 IV
If the depth of a tree is smaller than 5, then this tree can be represented by a list of three-digit ...
- [LeetCode] 857. Minimum Cost to Hire K Workers 雇K个工人的最小花费
There are N workers. The i-th worker has a quality[i] and a minimum wage expectation wage[i]. Now w ...
- 下载youtube视频到本地
https://www.clipconverter.cc/ 先通过上面的网站对youtube视频的url 进行解析获得下载链接地址 获得链接地址后 可通过阿里云香港服务器去下载 , 速度比较快 在阿里 ...