当前位置:首页 > 日记 > 正文

基于es6三点运算符的使用方法 | 实例讲解

基于es6三点运算符的使用方法 | 实例讲解

先看一个es6规范下三点运算符的使用实例:

let fun=function(a,...list){ console.log(a,list);};fun('0','a','b','c');//0 [a,b,c]

以上可以看到我们现在在定义函数对象时可以动态设置参数的个数了:第一个参数a是普通参数(忽略),

大家可以看到第二个参数list前面有三个点 “...”,这种写法在es6规范中有两个用途

1 . 作为参数使用。

2 . 作为拓展运算符使用。

● 三点--作为参数:

let fun1=function(...args){ for(let arg of args){  console.log(arg); }; console.log(args)};fun1('a','b','c');//a b c,[a,b,c]fun1(1,2);//1 2,[1,2] ...args表示了所有的形参,不管传入多少参数,都可以通过args进行遍历得到,args则集合所有的参数组成参数数组let fun2=function(arr,...args){ console.log(arr); console.log(args);};fun2(1,2,3);//1, [2,3]fun2(1);//1, []当...args有其他参数时,rest参数args数组集合除去前面参数之后的参数。let fun3=function(arr1,..args,arr2){ console.log(args);}//此时报错!切记,三点作为rest参数的时候,其后不能再有任何参数,只能作为最后一个角色出现![x,...y]=[1,2,3];console.log(y);//[2,3][x,...y,z]=[1,2,3];//报错,Rest element must be last element in array//作为参数,三点运算符可以函数,解构赋值等方面发挥重要作用。‘人如其名',rest表示剩下的,//它把剩下的任意数量的参数推入数组,所以也继承了数组的方法。rest参数只能出现在最后一位,//不然会报错,当然以扩展运算的身份出现时另当别论。

● 三点--作为拓展运算符使用:

let arr=[1,2,3];console.log(...arr);//1, 2, 3返回数组中的各项let a=[2,3];console.log(1,...a,4);//1,2,3,4扩展运算符可以放在中间let divs=document.querySelectorAll('div');[...divs];//Array[300],[]可以将divs转为数组解构;console.log(...divs);//div1,div2....遍历divs各项let set=new Set([1,2,3,3]);[...set];//返回数组[1,2,3],可以将set数据结构转化为数组let map=new Map([[1,'a'],[2,'b'],[3,'c']]);[...map.keys];//返回[1,2,3],属性数组;[...map.values];//返回[a,b,c],value数组[...'wbiokr'];//["w", "b", "i", "o", "k", "r"]遍历字符串,返回各个字符;let str='abc';['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]扩展运算符位置比较任性//三点的扩展运算符,把数组或者类数组对象展开成一系列逗号隔开的值序列,它好比rest参数时候的逆运算。

以上这篇基于es6三点运算符的使用方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

js 性能优化之算法和流程控制

js 性能优化之算法和流程控制

性能优化,流程控制,算法,电脑软件,js,循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一。常见的优化方案有:①JavaScript的四种循环(for、do-while、while、for-in)中,for-in循环比其他几种明显要慢。由于每次迭代操作会同时搜…

快速理解 JavaScript 中的 LHS 和

快速理解 JavaScript 中的 LHS 和

查询,快速,电脑软件,LHS,JavaScript,JavaScript 程序中的一段源代码在执行之前会经历三个步骤,统称为 编译分词/词法分析 解析/语法分析 代码生成先看原书对一个赋值操作的拆解说明:变量的赋值操作会执行两个动作,首先编译器会在当前作用域…

PS如何用手拿旧照片制作旧地重游的

PS如何用手拿旧照片制作旧地重游的

照片,如何用,手拿,特效,电脑软件,本教程来自P大点S的Projava!以前也有不少人做过类似的效果,就是一个人拿着一张以前拍的旧照片回到老地方寻找相同的视角,貌似很有意境。但是我找的素材不是很好。将就看看吧。最终效果:主要过程:首先我在百度找…

PHP 获取 ping 时间的实现方法

PHP 获取 ping 时间的实现方法

方法,时间,电脑软件,PHP,ping,PHP 可以通过exec函数执行shell命令,来获取ping时间。代码示例:echo 'PHP_INT_MAX : ' . PHP_INT_MAX . "<br><br>"; $ip = '115.29.237.28'; // IP地址 if (PATH_SEPARATOR==':') // linux{ echo …

bootstrap Table的一些小操作

bootstrap Table的一些小操作

操作,些小,电脑软件,bootstrap,Table,本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*…

基于构造函数的五种继承方法小结

基于构造函数的五种继承方法小结

继承,方法,构造函数,五种,电脑软件,1.使用call或apply绑定构造函数animal.apply(this.arguments)2.使用prototype属性  Cat.prototype = new Animal();  Cat.prototype.constructor = Cat;  var cat1 = new Cat("大毛","黄色");…

ps怎么利用矩形工具制作相册样式?

ps怎么利用矩形工具制作相册样式?

工具,矩形,样式,电脑软件,ps,ps用矩形工具制作相册版式?方法很简单,快来学习一下吧。 软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、、打开ps,点击&ldquo;文件&rdquo;-&ldquo;打开&rdquo;,把背景图片打…

JavaScript标准对象_动力节点Java

JavaScript标准对象_动力节点Java

标准对象,学院,节点,动力,电脑软件,在JavaScript的世界里,一切都是对象。但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串:typeof 123; // 'number'typeof NaN; // 'number…

Photoshop制作精致的灰色圆形质感

Photoshop制作精致的灰色圆形质感

质感,按钮,灰色,精致,电脑软件,最终效果 1、新建一个大小适当的文档,背景填充灰色。2、新建图层,选择&ldquo;椭圆&rdquo;工具进行绘制。3、为&ldquo;形状 1&rdquo;添加图层样式&ldquo;投影&rdquo;效果。 4、更改&ldquo;形状 1&rdquo;的填充为…

清除Win7系统DNS缓存

清除Win7系统DNS缓存

清除,系统,缓存系统,缓存,电脑软件,有些时候,由于某些原因,系统访问网站的时候会提示需要清除本地的dns信息,或者出现dns解析故障就必须清理系统dns缓存。有些用户碰到这些情况的时候不知道该怎么办。别着急,针对这个情况小编今天就来教大家怎…

CorelDRAW X7软件制作一个中国联通

CorelDRAW X7软件制作一个中国联通

教程,标志,电脑软件,CorelDRAW,Logo,效果图:制作步骤:Lo标志具有创意独特性,需要设计师天马行空的想象,在绘制Lo标志时,CorelDRAW X7软件可以提供多种工具方便Lo的造型。本教程将带大家详解用CorelDRAW X7软件制作联通Lo标志的一种方法。选择&…

Angularjs中使用指令绑定点击事件

Angularjs中使用指令绑定点击事件

点击事件,指令,绑定,方法,电脑软件,项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的。如html<ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="…