javascript es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义:
- 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... )
- 用在数组前面,可以把数组的值全部打散,展开,叫展开运算符. 语法格式: 在数组面前加三个点( ... )
求不定参数的和,以前可以用arguments来做,现在可以用不定参数来做,如下:

1 function add( ...values ){
2 console.log( values ); // [10, 20, 30]
3 let sum = 0;
4 for( let i = 0, len = values.length; i < len; i++ ){
5 sum += values[i];
6 }
7 return sum;
8 }
9 var res = add( 10, 20, 30 );
10 console.log( res ); //60

1 function add( ...keys, last ) { //报错,不定参数只能放在最后面
2
3 }
1 // function add( ...key1, ...key2 ){ //报错,一个函数不能出现多个不定参数
2
3 // }
筛选拷贝对象的属性,之前我们是这样子做的:

1 function pick( src ){
2 let target = Object.create( null );//创建一个空对象,跟new Object不同
3 for( let i = 1, len = arguments.length; i < len; i++ ){
4 target[arguments[i]] = src[arguments[i]];
5 }
6 return target;
7 }
8 let user = {
9 name : 'ghostwu',
10 age : 22,
11 sex : 'man',
12 };
13 var obj = pick( user, 'name', 'age' ); //拷贝user对象的name和age属性
14 console.log( obj ); //{name: "ghostwu", age: 22}

这样做没有什么问题,读取属性我们始终要记得从1开始, 因为arguments对象的索引0 被 src这个参数占据了. 用不定参数修改如下:

1 function pick( src, ...keys ){
2 console.log( keys ); //['name','age'];
3 let target = Object.create( null );
4 for( let i = 0, len = keys.length; i < len; i++ ){
5 target[keys[i]] = src[keys[i]];
6 }
7 return target;
8 }
9
10 let user = {
11 name : 'ghostwu',
12 age : 22,
13 sex : 'man',
14 };
15
16 var obj = pick( user, 'name', 'age' );
17 console.log( obj );

以上方式,更符合数组操作习惯, 拿来就用,不要老是记着从1开始
不定参数与arguments类似,当初设计的目的就是为了取代arguments,那不定参数会不会影响arguments呢?

1 function show( ...keys ){
2 console.log( keys.length ); //3
3 console.log( arguments.length ); //3
4 keys[0] = 1000;
5 console.log( keys[0], keys[1], keys[2] ); // 1000,20,30
6 console.log( arguments[0], arguments[1], arguments[2] ); //10,20,30
7 }
8 show( 10, 20, 30 );

不定参数修改之后,arguments并不会受到影响
展开运算符:
1 let a = 10, b = 20;
2 console.log( Math.max( a, b ) ); //20
1 let arr = [ 1, 3, 0, -1, 20, 100 ];
2 console.log( Math.max( arr ) );//NaN, max不能接收数组参数
我们可以借助apply的语法,把数组传递进去
1 let arr = [ 1, 3, 0, -1, 20, 100 ];
2 console.log( Math.max.apply( Math, arr ) );//100
有了展开运算符之后,更简单
1 let arr = [ 1, 3, 0, -1, 20, 100 ];
2 console.log( Math.max( ...arr ) ); //100 ...: 把数组展开
3 console.log( Math.max( ...arr, 1000 ) ); //1000
javascript es6系列教程 - 不定参数与展开运算符(...)的更多相关文章
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...
- [js高手之路]es6系列教程 - 解构详解
解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...
- 《JavaScript语言入门教程》记录整理:运算符、语法和标准库
目录 运算符 算数运算符 比较运算符 布尔运算符 二进制位运算符 void和逗号运算符 运算顺序 语法 数据类型的转换 错误处理机制 编程风格 console对象和控制台 标准库 Object对象 属 ...
- [js高手之路] es6系列教程 - 函数的默认参数详解
在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...
- 《无所不能的JavaScript编程系列:arguments 参数对象》
前言:无所不能的JavaScript JavaScript起源于Netscape公司的LiveScript语言,这是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验HTML表单输入的正确性 ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
随机推荐
- 牛客OI周赛4-提高组 A K小生成树(kmst)
K小生成树(kmst) 思路: 暴力+并查集 枚举边的子集,用并查集判断两个点联不联通 代码: #include<bits/stdc++.h> using namespace std; # ...
- jquey 小记
1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象. 回调函数拥有两个参数: 第一个为对象的 ...
- Bayesian generalized linear model (GLM) | 贝叶斯广义线性回归实例
一些问题: 1. 什么时候我的问题可以用GLM,什么时候我的问题不能用GLM? 2. GLM到底能给我们带来什么好处? 3. 如何评价GLM模型的好坏? 广义线性回归啊,虐了我快几个月了,还是没有彻底 ...
- java---->Itellij idea报错:错误: 找不到或无法加载主类 main
没有设置好正确的类路径 点击上面圈红色处,在点击Edit Configuration,进入下面设置界面 切换到下面这个界面 红色×消失,运行正常,截图如下
- 详解 Solidity 事件Event - 完全搞懂事件的使用
很多同学对Solidity 中的Event有疑问,这篇文章就来详细的看看Solidity 中Event到底有什么用? 写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊. ...
- linux文件系统(一)
linux的文件系统以及文件类型一.linux 文件系统: 根文件系统(rootfs) rootfilesystem /etc,/usr,/var,/home,/dev 系统自我运行必须用到的路径:( ...
- [python] 查找列表中重复的元素
a = [1, 2, 3, 2, 1, 5, 6, 5, 5, 5] b = set(a) for each_b in b: count = 0 for each_a in a: if each_b ...
- leetcode-algorithms-14 Longest Common Prefix
leetcode-algorithms-14 Longest Common Prefix Write a function to find the longest common prefix stri ...
- 剑指offer-整数中1出现的次数
题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...
- Windows下Python3.6安装第三方模块
一 安装pip 一般需要用pip进行安装,不过我安装p3.6的时候pip已经有了. 如果没有的话,可以用在以下http://www.lfd.uci.edu/~gohlke/pythonlibs/#pi ...