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, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
随机推荐
- 项目 08 WebSocket
项目班 08 WebSocket app.py 更新 添加两个路由 handlers = [ ('/', main.IndexHandler), ('/explore', main.ExploreHa ...
- BZOJ 4892 [Tjoi2017]dna 哈希+二分
自己简直是傻死了...对于位置想错了... 二分出来的是LCP长度$+1$,即每一次二分出来的最后一个点都是失配的,而就算失配也会跳过这个点:所以当$k<=3$且模式串$s2$的指针$>l ...
- 1095 Cars on Campus(30 分
Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...
- Java面向对象_继承——基本概念以及管理化妆品实例分析
一.继承的基本概念: 1.继承是面向对象三大特征之一 2.被继承的类成为父类(超类),继承父类的类成为子类(派生类) 3.继承是指一个对象直接使用另一个对象的属性和方法 4.通过继承可以实现代码重用 ...
- 记一次内存溢出java.lang.OutOfMemoryError: unable to create new native thread
一.问题: 春节将至,系统访问量进入高峰期.随之系统出现了异常:java.lang.OutOfMemoryError: unable to create new native thread.在解决这个 ...
- Java反射详解(Spring配置)
1. 反射原理 a).运行时通过 Class c = Class.forName("com.hua.xx.DynTest")加载类文件 b).通过 DynTest t = c.ne ...
- AOP的XML实现方式
与注解方式类似,只不过所有设置是通过xml来设置 // 切面类 public class Aop { public void around(ProceedingJoinPoint pjp) throw ...
- 使用jQuery实现文本框input定位到文字最后(兼容所有浏览器)
$.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSele ...
- vue3.0学习笔记(二)
一.选择合适的ide 推荐使用vs code编辑器,界面清晰.使用方便,控制台功能很好用.webstorm也可以,看个人喜好. 二.ui框架选择 目前,pc端一般是选择element ui(饿了么), ...
- 韦东山笔记之用busybox构建根文件系统
1 百度搜索busybox进入busybox官网(https://busybox.net/)作者:恒久力行 QQ:624668529 点击左侧DownloadSource下载最新稳定版的busybo ...