剩余运算符和展开运算符

剩余运算符:rest运算符

        // 1.一定在最后// 2.剩余运算符是数组，arguments是一个伪数组function add(...rest) {console.log(arguments); //[1,2,3]伪数组console.log(rest); //[1,2,3]数组let sum = 0;rest.forEach(function(i) {sum += i;})console.log(sum);}add(1, 2, 3)

案例解析

 function family(company, ...rest) {console.log(arguments); //['百度', '广告', '链接', '网站']console.log(rest); //['广告', '链接', '网站']console.log(`${company}:${rest.join(',')}`); //百度:广告,链接,网站}family('百度', '广告', '链接', '网站')

...rest是剩余运算符有传入参数的话传入参数不会进入...rest中

展开运算符

逆运算参数可以传入数组

{function add(a, b, c) {console.log(a + b + c);}add(1, 2, 3)add(...[3, 4, 5]) //等于add(3,4,5)
}

拷贝对象

{let obj1 = {name: "张三",age: 20,sex: "女",d: new Date()}//可以使用...obj1代替一串代码let obj2 = {/* name:obj1.name,age:obj1.age,sex:obj1.sex, */...obj1,friend: "李四"};//可以改变其中的一个let obj3 = {...obj1,name: "王五"}console.log(obj3); //{age:20,d:时间对象,name:'王五',sex:"女"}//obj4 是obj1拷贝出来的对象，obj4和obj1是独立// ...拷贝对象的时候，value是对象也可以拷贝let obj4 = {...obj1}obj4.name = "小王"console.log(obj1);//{name:"张三"}console.log(obj4);//{name:"小王"}
}

合并数组

{// 合并数组给数组添加内容   let arr1 = [1, 2, 3]let arr2 = [3, 4, 5]let arr3 = [...arr1, ...arr2, 7, 8, 9]console.log(arr3); //[1,2,3,3,4,5,7,8,9]//push let arr4 = ['a', 'b', 'c']arr4 = ['d', ...arr4]console.log(arr4); //["d","a","b", "c"]
}

伪数组转化为数组

//伪数组转化为数组
let btns = document.querySelectorAll("button")
let arrBtns = [...btns]

综合案例

{let workers = [{name: "小王",paid: 3000}, {name: "小李",paid: 4000}, {name: "小明",paid: 3500}, ]//map有返回值let arr = workers.map(function(item) {return {...item,paid: item.paid + 2000}})console.log(arr);}

剩余运算符和展开运算符相关推荐

ES6函数第二篇：剩余参数与展开运算符的练习
上一篇讲了剩余参数和展开运算符,这一篇来几个小练习巩固一下吧首先明确一点,展开运算符实现的克隆是浅克隆,即若克隆引用值,实际克隆的是它的地址,举个栗子叭 [例1] const obj = {name ...
20181210-es6(letconst解构模版字符串原理展开运算符、剩余运算符运用深拷贝原理 reduce原理箭头函数)...
变量声明 var 特点: 1.可以重复声明 2.不能定义常量 3.不支持块级作用域复制代码 let //1.不存在预解释变量提升 //2.暂时性死区 //3.具备块级,同一块内不能重复声明;let ...
06-ES6语法：展开运算符
本文我们介绍ES6的展开运算符.展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方 ...
web前端技术分享：es6展开运算符概念和使用！
对于数组的处理,开发者不断的在创造更好的方式,而在ES2015(ES6) 新增了一种基本运算符--展开运算符.使用三个点 - 表示,它的作用是在调用函数.数组构造时将数组表达式或字符串在语法层面进行展 ...
ES6展开运算符（...）
这是在网上看见的es6展开运算符的总结,原文地址:http://www.jianshu.com/p/c5230c11781b 作者:可木Changer 链接:http://www.jianshu.co ...
6. 函数参数与展开运算符
1.函数参数 a. function test(word){ console.log(word); }test('hello word'); b. function test(word = 'hell ...
es6笔记2之解构赋值,rest和展开运算符
1.数组解构 var arr=[1,2,3] var [a,b,c]=arr 然后就可以给abc分别赋对应的值应用场景: 1.1 var [x,y]=[y,x] 变量互换 1.2 字符串解构 ...
es6 ...展开运算符
展开运算符,目前应用在数组上,对象展开运算符,将在es7 提案 1.两个对象连接返回新的对象 let a = {aa:'aa'} let b = {bb:'bb'} let c = {...a,... ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...

剩余运算符和展开运算符

剩余运算符:rest运算符

展开运算符

剩余运算符和展开运算符相关推荐

最新文章

热门文章