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

 更新时间:2017年10月12日 08:45:34   作者:前端阿小  
下面小编就为大家带来一篇基于三点运算符的使用方法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

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

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

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

1 . 作为参数使用。

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

● 三点--作为参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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参数只能出现在最后一位,
//不然会报错,当然以扩展运算的身份出现时另当别论。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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三点运算符的使用方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://www.cnblogs.com/zhuxiaoweb/archive/2017/10/11/7651103.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • js弹性势能动画之抛物线运动实例详解

    js弹性势能动画之抛物线运动实例详解

    这篇文章主要为大家详细介绍了js弹性势能动画之抛物线运动的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • js实现最短的XML格式化工具实例

    js实现最短的XML格式化工具实例

    这篇文章主要介绍了js实现最短的XML格式化工具,实例分析了基于jquery-latest.js实现XML代码格式化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 带你用原生js写一个简单的注册登录页面

    带你用原生js写一个简单的注册登录页面

    这篇文章主要给大家介绍了关于如何使用原生js写一个简单的注册登录页面的相关资料,文中介绍了一个以js验证表单的简洁的注册登录页面,需要的朋友可以参考下
    2023-06-06
  • 微信小程序伪类选择器的使用详解

    微信小程序伪类选择器的使用详解

    这篇文章主要介绍了微信小程序伪类选择器的使用详解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • JavaScript如何禁止Backspace键

    JavaScript如何禁止Backspace键

    这篇文章主要介绍了JavaScript如何禁止Backspace键,可以帮助大家解决“只读输入框在IE下按下Backspace键回退到前一个页面”的问题,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • uniapp @click事件冒泡问题解决示例

    uniapp @click事件冒泡问题解决示例

    这篇文章主要为大家介绍了uniapp @click事件冒泡问题解决示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 基于js实现微信发送好友如何分享到朋友圈、微博

    基于js实现微信发送好友如何分享到朋友圈、微博

    微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友、分享到朋友圈、分享到微博等功能,本篇文章给大家介绍基于js实现微信发送给朋友如何分享到朋友圈、微博,感兴趣的朋友一起学习吧
    2015-11-11
  • JavaScript实现微信红包算法及问题解决方法

    JavaScript实现微信红包算法及问题解决方法

    这篇文章主要介绍了JavaScript实现微信红包算法及遇到的问题解决方法,需要的朋友可以参考下
    2018-04-04
  • JavaScript Promise启示录

    JavaScript Promise启示录

    近几年随着JavaScript开发模式的逐渐成熟,CommonJS规范顺势而生,其中就包括提出了Promise规范,Promise完全改变了js异步编程的写法,让异步编程变得十分的易于理解
    2014-08-08
  • js实现手表表盘时钟与圆周运动

    js实现手表表盘时钟与圆周运动

    这篇文章主要为大家详细介绍了js实现手表表盘时钟与圆周运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论