es6展开运算符
数组的展开合并
现在有两个数组[1, 2, 3, 4]和[5, 6, 7],想要将两个函数拼接成一个新的函数。
//es5的写法
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7];
let arr = arr1.concat(arr2);
console.log(arr)//[ 1, 2, 3, 4, 5, 6, 7 ]
//es6的写法
let arr = [...arr1, ...arr2];
console.log(arr)//[ 1, 2, 3, 4, 5, 6, 7 ]
对象的展开合并
现在有两个对象,一个是{name:'sam'}一个是{age:8} 想要将两个对象合并。
//es5 中的合并
let obj1 = { name: '张三' }
let obj2 = { age: 9 };
let obj = {}
Object.assign(obj, obj1, obj2)
console.log(obj)//{ name: '张三', age: 9 }
//es6 中的合并
let obj1 = { name: '张三' }
let obj2 = { age: 9 };
let obj = { ...obj1, ...obj2 }
console.log(obj)//{ name: '张三', age: 9 }
展开运算符是浅拷贝
浅拷贝的值在改变原来对象内容的时候也会影响新的对象值的变化。
let obj1 = { name: {name:'张三'} }
let obj2 = { age: 9 };
let obj = { ...obj1, ...obj2 }
obj1.name.name='李硕';
console.log(obj)//{ name: { name: '李硕' }, age: 9 }
如果要想查看实现深拷贝的方法,请移步我的另一篇随笔:https://www.cnblogs.com/hanqingtao/p/9915886.html
es6展开运算符的更多相关文章
- ES6展开运算符数组合并,函数传参
定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...
- [转] ES6展开运算符
语法 用于函数调用 myFunction(...iterableObj); 用于数组字面量 [...iterableObj, 4, 5, 6] 函数传参 目前为止,我们都是使用Function.pro ...
- ES6展开运算符的3个用法
展开运算符的用法1:传参 // 展开运算符的用法1 : 传参 function test(a,b) { return a + b ; } var arr = [1,2]; console.log(te ...
- es6 ...展开运算符
展开运算符,目前应用在数组上,对象展开运算符,将在es7 提案 1.两个对象连接返回新的对象 let a = {aa:'aa'} let b = {bb:'bb'} let c = {...a,. ...
- ES6展开运算符(...)
数组字面量中使用展开运算符 我们可以这样合并数组: var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e' ...
- ES6 展开运算符 三个点实际功能
1.数组中使用let defaultColors = ['red', 'greed'] let favoriteColors = ['orange', 'yellow'] let fallColors ...
- es6 初级之展开运算符
1.1 先看一个求最大值的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- javascript es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
随机推荐
- python之垃圾回收机制
一.前言 Python 是一门高级语言,使用起来类似于自然语言,开发的时候自然十分方便快捷,原因是Python在背后为我们默默做了很多事情,其中一件就是垃圾回收,来解决内存管理,内存泄漏的问题. 内存 ...
- myeclipse svn 在线安装
https://www.cnblogs.com/sxdcgaq8080/p/6000446.html http://subclipse.tigris.org/update_1.8.x
- jquery json实现省市级级联
java后台程序: import java.util.HashMap;import java.util.List;import java.util.Map; import javax.servlet. ...
- Javascript专题(一)严格模式
严格模式是干什么的?它从哪里来? ECMAScript5中引入了严格模式.它为JS定义了一种不同的解析和执行模型. 摘自阮一峰博客:http://www.ruanyifeng.com/blog/201 ...
- bitnami-redmine Apache服务启动不起来
方法一: 通过 netstat -a -o 查看端口占用情况,关闭调用相关端口的进程. c:\> netstat -a -o Active Connections Proto Local ...
- Storm概念学习系列 之数据流模型、Storm数据流模型
不多说,直接上干货! 数据流模型 数据流模型是由数据流.数据处理任务.数据节点.数据处理任务实例等构成的一种数据模型.本节将介绍的数据流模型如图1所示. 分布式流处理系统由多个数据处理节点(node) ...
- Hibernate基础案例1
使用到的是MySQL数据库 1.在项目中先引入jar包,并添加引用 <dependencies> <dependency> <groupId>junit</g ...
- KBEngine warring项目源码阅读(一) 项目简介和注册
首先介绍下warring项目,是kbe自带的一个演示示例,大部分人了解kbe引擎也是从warring项目开始的. 项目地址:https://github.com/kbengine/kbengine_u ...
- 2 cmd中startup显示运行不了显示“不是内部或外部命令”
解决方案: 1 在C:\Windows\System32中检查cmd.exe是否存在(如果存在的话)(检查cmd.exe是否被误删) 2 在我的电脑——属性——环境变量——在系统变量找到Path编辑前 ...
- Life here can be a dream come true!
Life here can be a dream come true!美梦迟早会成真的!