es6函数的rest参数和拓展运算符(...)的解析
es6的新特性对函数的功能新增加了rest参数和...的拓展运算符。这是两个什么东西呢?
先来看一个问题:如何获取一个函数除了定义的参数之外的其他参数?传统的做法是借助函数的arguments关键字来获取的。
方法如下:
function add(a,b){
var i=2,rest=[];
if(arguments.length>2){
for(i;i<arguments.length;i++){
rest.push(arguments[i]);
}
}
return rest;
}
console.log(add(5,6,7,8));//7,8
//这种方法饶了一个弯子,需要排除前面两个参数,i从2进行循环。 es6的方法:
采用...“变量名”的方法,这个就是es6的rest参数,rest将函数多余的参数转化为一个数组,无需借助arguments参数了。
function sum(a,b,...rest) {
let sum = a + b;
console.log('获取出ab之外的其他参数:'+rest);
for(var val of rest){
sum += val;
}
return sum;
}
var arr = [];
for(var i = 0;i < 100;i++){
arr.push(i);
}
console.log(sum(4,5,9,10,11,12,13));
console.log(sum(...arr));
如上我们用rest参数就可以获取到除了a,b参数之外的参数。
再来看看什么是es6的拓展运算符...?
...是一个将数组转为用逗号分隔的参数序列,与rest参数恰恰相反。
思考问题?如何求一个数组中的最大值?
//es5的方法,需要借助apply将数组转化为参数给Math.max()方法使用。
var maxArr=[10,20,35];
var max = Math.max.apply(null,maxArr);//apply()第一个参数指定为null 或 undefined 时this会自动指向全局对象(浏览器中就是window对象);
//es6方法。借助...拓展运算符。
var max2 = Math.max(...maxArr);
console.log(max2);//是不是比es5的方法方便多了。
...拓展运算符还可以用来合并两个数组:
//使用...合并数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
//es5
var arr3 = arr1.concat(arr2);
//es6
var arr4 = [...arr1,...arr2];
console.log(arr3);[1,2,3,4,5,6]
console.log(arr4);[1,2,3,4,5,6]
es6函数的rest参数和拓展运算符(...)的解析的更多相关文章
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- javascript es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- ES6函数的拓展
ES里面现在支持在函数的参数直接给参数赋一个默认值,ES6支持拓展运算符(...)三个英文的点,这个形式如function(...a)这个里面...a可以接受若干的值,这个拓展运算符也可以把若干的值转 ...
- es6入门6--数组拓展运算符,Array.from()基本用法
本文只是作为ES6入门第九章学习笔记,在整理知识点的同时,会加入部分个人思考与解答,若想知道更详细的介绍,还请阅读阮一峰大神的ES6入门 一.拓展运算符 ES6中新增了拓展运算(...)三个点,它的作 ...
- ES6 rest参数和扩展运算符
rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...
- ES6 函数的拓展(四)
一.参数带默认值函数1.在函数形参可以赋予函数默认值[即实参严格匹配undefined时,在函数内部使用形参时调用它的默认值]2.函数name属性 [返回函数名称,无名的函数返回空字符串]3.函数le ...
- ES6 函数参数的默认值
基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...
- ES6 - 函数扩展(函数参数默认值)
函数参数默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); ...
- 函数——es6函数扩展(二)
一.声明 1. let(变量) 可以只声明不给值(默认为undefined),或者是先声明后给值,但是必需声明后再使用,可以重复赋值,可以防止变量泄露: 同一作用域里不能重复的声明,不同作用域里可以, ...
随机推荐
- nvm版本控制以及node.js
nvm node.js版本控制工具 下载 nvm 包 地址:https://github.com/coreybutler/nvm-windows/releases 我们选择第一个:nvm-noinst ...
- pomelo 安装 windows 下
最近一直在捣鼓这个东西,看着个的先记录下发帖时间, pomelo 现在最新版是2.0 的,和之前的版本的启动时有区别的(命令行)的,可以进pomelo官网去看下基本的信息, 在pomelo官方论坛上的 ...
- MySQL(一)之MySQL简介与安装
大家可能都在用MySQL,其实我也是在用MySQL的,但是你知道吗?大部分人都是在windows中使用,这里将介绍一下在windows中的安装分为安装包安装与MSI包安装,以及在linux中的在线安装 ...
- javaScript手记(01)
--------------------javaScript基础1.嵌入页面的方式 1.行间事件(主要用于事件): <input type="button" name=&qu ...
- HTML5新结构标签和移动端页面布局
--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...
- memcached常用命令
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt104 一.Memcache面向对象的常用接口包括:Memcache::con ...
- iBatis的一个问题
写了一段查询语句,条件中有一条alarmtype<>'1004'这样的条件,原来是这样写的 <![CATA[ and alarmtype<>'1004']]> 然后 ...
- 2D命令行小游戏Beta1.0
前提: 遇到许多问题,没有参考大佬一些方法是敲不出来的...Orz using System; using System.Collections.Generic; using System.Linq; ...
- Swing-GridBagLayout用法-入门
注:本文内容转自:Java Layout总结-GridBagLayout.内容根据笔者理解稍有整理. GridBagLayout布局管理器:这就是最复杂的一个布局管理器了,网格包布局.在此布局中,组件 ...
- 201521123076 《JAVA程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容 初步了解了接口的概念,学会使用接口,强化面向对象思想 Comparable,Com ...