基于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三点运算符的使用方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于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 f

  • 基于TabLayout中的Tab间隔设置方法(实例讲解)

    基于TabLayout中的Tab间隔设置方法(实例讲解)

    TabLayout和ViewPager搭配使用,是有很多方便性,但是TabLayout这东西还是有很多被人吐槽的地方. 这里只讲怎么设置tab之间的间隔,网上找了一堆方法,什么padding和margin的啥都没用,没办法,想用TabLayout只能自己想办法了.效果如下: 一.实现方法,既然这东西不好设置,那就直接在背景上做点事情,布局代码如下: <android.support.design.widget.TabLayout xmlns:app="http://schemas.andr

  • 基于注解的Dubbo服务配置方法(实例讲解)

    基于注解的Dubbo服务配置可以大大减少dubbo xml配置文件中的Service配置量,主要步骤如下: 一.服务提供方 1. Dubbo配置文件中增加Dubbo注解扫描 <!-- 开启dubbo注解支持 --> <!-- 扫描注解包路径,多个包用逗号分隔,不填pacakge表示扫描当前ApplicationContext中所有的类 --> <dubbo:annotation package="com.bounter" /> 2.Service实现

  • Python三种遍历文件目录的方法实例代码

    本文实例代码主要实现的是python遍历文件目录的操作,有三种方法,具体代码如下. #coding:utf-8 # 方法1:递归遍历目录 import os def visitDir(path): li = os.listdir(path) for p in li: pathname = os.path.join(path,p) if not os.path.isfile(pathname): #判断路径是否为文件,如果不是继续遍历 visitDir(pathname) else: print

  • jq源码解析之绑在$,jQuery上面的方法(实例讲解)

    1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • JavaScript事件方法(实例讲解)

    废话不多说,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text

  • Android Studio应用开发集成百度语音合成使用方法实例讲解

    Android Studio应用开发集成百度语音合成使用方法实例讲解

    首先,语音合成是指将文本信息转换成声音.意思就是将文本转化为声音,让你的应用开口说话.国内在业内比较有名的第三方语音合成平台有百度语音和科大讯飞. 本文集成的是百度语音合成,其主要特点是: 完全永久免费 业界首创完全永久免费新形式,为开发者提供最流畅最自然的语音合成服务.完全免费,永久使用,彻底摆脱限制. 离线在线融合模式 SDK可以根据当前网络状况,自动判断使用本地引擎还是云端引擎进行语音合成,再也不用担心流量消耗! 多语言多音色可选 中文普通话.中英文混读.男声.女声任你选,更支持语速.音调

  • 基于substring()和substr()的使用以及区别(实例讲解)

    在JavaScript中,通常会用到截取,那所谓截取呢,其实就是要获得被截取元素的某个位置到某个位置的内容,那么JS给我提供了substring和substr这两种方法: 这两种截取的方式有什么区别呢?直接代码演示: substring(a,b): a:表示起始位置 b:表示结束位置 !但是值得注意的是:截取时,截取内容当中包含了开始位置的元素,但是不包含结束位置的元素! 示例: function sub1(){ var str = 'javascript'; return str.substr

  • 基于java类路径classpath和包的实例讲解

    基于java类路径classpath和包的实例讲解

    类路径(classpath) java编译器编译.java文件和java虚拟机执行.class文件时的路径和写法不一样. 在没有设置任何classpath环境变量的情况下,javac可以编译全路径的.java文件.例如: javac d:\myjava\HelloWorld.java 编译后,在.java同路径目录下生成class文件. 默认java虚拟机要从classpath环境变量的路径中搜索class文件去执行,对于java虚拟机来说,这不是类文件,而是类.它只有类路径,而没有文件系统路径

随机推荐