扩展运算符(...)的用途

1.合并数组
一直以来,有很多方法合并数组,但是扩展运算符给了我们全新的方法去实现合并数组:

arr1.push(...arr2) // 把arr2合并到arr1的后面
arr1.unshift(...arr2) //把arr2合并到arr1的前面
如果你想在数组内合并数组,你可以像下面这样做:

var arr1 = [‘two‘, ‘three‘];
var arr2 = [‘one‘, ...arr1, ‘four‘, ‘five‘];
2.复制数组
复制数组是我们常常要做的工作,在过去,我们会使用Array.prototype.slice去实现,但现在我们可以使用扩展运算符去得到一个复制后的数组:

var arr = [1,2,3];
var arr2 = [...arr]; // 就像 arr.slice()
arr2.push(4)
3.结构赋值
结构赋值是一个十分有趣的实践,我在自己的React项目中大量的使用了这种技巧。你可以使用扩展运算符配合其他运算符一起,从变量中提取有用的信息,就像这样:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

---------------------
作者:yi_xiuge
来源:CSDN
原文:https://blog.csdn.net/yi_xiuge/article/details/76576211
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/aslxwjh/p/10319797.html

时间: 2024-11-08 21:24:15

扩展运算符(...)的用途的相关文章

ES6扩展运算符的用途

ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点“...”,就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用. 看这个例子: console.log(...[3, 4, 5]) 结果: 3 4 5 调用其实就是: console.log(3, 4, 5) 合并数组 可以使用扩展运算符将多个数组进行合并. let arr1 = [1, 2, 3] let a

ES6躬行记(2)——扩展运算符和剩余参数

扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对象(iterable).虽然两者之间有诸多类似,但它们的功能和应用场景却完全不同.扩展运算符能把整体展开成个体,常用于函数调用.数组或字符串处理等:而剩余参数正好相反,把个体合并成整体,常用于函数声明.解构参数等.此处的整体可能是数组.字符串或类数组对象等,个体可能是字符.数组的元素或函数的参数等.

day46homework常量字符串拼接结构赋值扩展运算符for-of循环map函数默认值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定义常量.html</title> <!--常量--> <script> //常量:1.一旦定义 不能更改 const PI = 3.14;  // console.log(PI); // PI = 3.1415; error 

... 扩展运算符

1  含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. [javascript] view plain copy console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]

关于扩展运算符中i++和++i,以及基本类型和引用类型的综合应用

首先说一下扩展运算符中的i++和++i i++和++i在单独使用的时候是一样的. var i=1; //i++; //console.log(i);//2 ++i console.log(i);//2 但是当它参与其他运算是就会发生改变 var i=1;var b=i++ + i++ + i++;//2+3+4 console.log(i);//4 console.log(b)//9 所以总结一下关于i++和++i,即i++是在加号前面,所以向赋值在加1,而++i是先运算再赋值 下面这个案例会涉

ES6 rest参数和扩展运算符

rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0; for(var val of values){ sum+=val; } return sum; } add(1,2,3)//6 值得注意的是rest参数之后不能再有其他参数(只能是最后一个参数)否则会报错. 例: function rest(a,...b,c){ }//报错 函数的length属

妙用ES6解构和扩展运算符让你的代码更优雅

Javascript ES6/ES2015尘埃落定,其中许多特性其实是为了简化代码.解构运算符,扩展运算符,和rest运算符就是其中很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳.现在各浏览器及node.js都加快了部署ES6的步伐.ES6的学习正当其时. 解构 解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 数组解构赋值: var arr = ['this is

(...)ES6三点扩展运算符

扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(...[a, b, c]) // a b c

ES6的扩展运算符和rest参数

1.扩展运算符(spread)是三个点(...).它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. 比如 var list=['大家好']: list.length=1.list[0]=大家好: var list2=[...'大家好']: list2.length = 3:list2[0]=大:list2[1]=家:list2[2]=好: 扩展运算符最有用之一是:Math.max(...arr);比较数组中的最大值. 2.rest参数 rest参数(形式为"...变量名"