JavaScript - 展开运算符

在ES6中,使用 … 来表示展开运算符,它可以展开数组/对象。

一、展开运算符…在数组中的使用

展开一个数组

        const arr = [1,2,3] ;console.log(...arr);  //输出： 1 2 3

复制一个数组，也称深拷贝数组

        const arr = [1,2,3] ;//深拷贝，拷贝的是数组中的值const arr3 = [...arr] ;console.log(arr3);  //输出 [1, 2, 3]

连接数组

        const arr = [1,2,3] ;const arr4 = [...arr , 5 ,6 ,7] ;console.log(arr4);  //输出：[1, 2, 3, 5, 6, 7]const arr5 = [...arr , ...arr4] ;console.log(arr5); //输出： [1, 2, 3, 1, 2, 3, 5, 6, 7]

二、展开运算符…在函数中的使用

对于不确定传多少个值也可以使用扩展运算符。这样在你传值的时候可以一直增加，不用再关心形参的多少！

        function add(...numbers) {return numbers}console.log(add(1, 2, 3, 4, 5));   //输出：[1, 2, 3, 4, 5]

三、展开运算符…在对象中的使用

注意：展开运算符…不能展开一个对象（console.log(…obj);）会报错。

深拷贝一个对象

        let ajaxData = {name:'小花猫',age: 18};let reactPropsAPI = {...ajaxData};console.log(reactPropsAPI)  //输出：{name: '小花猫', age: 18}reactPropsAPI.sex = '男' ;console.log(reactPropsAPI);  //输出：{name: '小花猫', age: 18, sex: '男'}console.log(ajaxData);  //输出：{name: '小花猫', age: 18}

合并对象

        const obj = {a: 1,b: 2,c: 3};const obj2 = {...obj,name: 'cc'};console.log(obj2); //输出：{a: 1, b: 2, c: 3, name: 'cc'}

JavaScript - 展开运算符相关推荐

展开运算符解构赋值_解构式展开式搜索栏
展开运算符解构赋值 View demo 查看演示Download Source 下载源 Maybe you have noticed the little adjustments that we di ...
6. 函数参数与展开运算符
1.函数参数 a. function test(word){ console.log(word); }test('hello word'); b. function test(word = 'hell ...
（4）javascript的运算符以及运算符的优先级
运算符的使用方法在javascript的程序中要完成各种各样的运算,是离不开运算符的. 在javascript中,按运算符类型可以分为算术运算符.赋值运算符.比较运算符.逻辑运算符.条件运算符等. ...
JavaScript instanceof 运算符深入剖析
简介: 随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验.而前端开发的主要语言则是 JavaScript.学好 JavaScript 对开发前端应用已经越来越重要.在开发复杂产 ...
es6笔记2之解构赋值,rest和展开运算符
1.数组解构 var arr=[1,2,3] var [a,b,c]=arr 然后就可以给abc分别赋对应的值应用场景: 1.1 var [x,y]=[y,x] 变量互换 1.2 字符串解构 ...
20181210-es6(letconst解构模版字符串原理展开运算符、剩余运算符运用深拷贝原理 reduce原理箭头函数)...
变量声明 var 特点: 1.可以重复声明 2.不能定义常量 3.不支持块级作用域复制代码 let //1.不存在预解释变量提升 //2.暂时性死区 //3.具备块级,同一块内不能重复声明;let ...
es6 ...展开运算符
展开运算符,目前应用在数组上,对象展开运算符,将在es7 提案 1.两个对象连接返回新的对象 let a = {aa:'aa'} let b = {bb:'bb'} let c = {...a,... ...
web前端技术分享：es6展开运算符概念和使用！
对于数组的处理,开发者不断的在创造更好的方式,而在ES2015(ES6) 新增了一种基本运算符--展开运算符.使用三个点 - 表示,它的作用是在调用函数.数组构造时将数组表达式或字符串在语法层面进行展 ...
ES6函数第二篇：剩余参数与展开运算符的练习
上一篇讲了剩余参数和展开运算符,这一篇来几个小练习巩固一下吧首先明确一点,展开运算符实现的克隆是浅克隆,即若克隆引用值,实际克隆的是它的地址,举个栗子叭 [例1] const obj = {name ...

JavaScript - 展开运算符

一、展开运算符…在数组中的使用

二、展开运算符…在函数中的使用

三、展开运算符…在对象中的使用

JavaScript - 展开运算符相关推荐

最新文章

热门文章