rest参数与扩展运算符
rest参数与扩展运算符
rest参数
当遇上这样一种需求:对于输入的参数,求和返回,但传入的参数个数并不确定。
// 在es5中,通常是使用函数自身的arguments对象实现的
function sum () {
let sum = 0;
for(let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
// 使用Array.from将其转化为数组,就可以使用数组的方法
function sum () {
// arguments对象是一个伪数组,必须转化为数组才能使用reduce方法
return Array.from(arguments).reduce((temp, value) => temp + value, 0);
}
// 使用Array.prototype.call()方法返回一个数组对象 --> 将伪数组转换为数组
function sum () {
return Array.prototype.call(arguments).reduce((temp, value) => temp +value, 0);
}
// ES6中还可以通过rest参数接收函数参数,并转换成一个数组
function sum (...plus) {
return plus.reduce((temp, value) => temp + value, 0);
}注意:rest参数只能作为函数的最后一个参数,否则会报错
function func (a, ...rest, b) {
// do something
}
// Rest Parameter must be last formal paramter扩展运算符
扩展运算符与rest参数恰好是一个逆过程,rest参数是将多个参数转换成一个数组,而运算符扩展则是将一个数组扩展成多个参数的形式。
// 现有一个数组
let arr = [1, 2, 3, 4, 5];
// 有一个求和函数
function sum (...rest) {
return rest.reduce((temp, value) => temp + value, 0);
}
// 现在需要通过sum函数对数组进行求和操作,但是函数需要的参数不是数组
// 在es5中是不容易实现的
// 但是使用扩展运算符,恰好可以解决问题
sum(...arr);
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [6, 7, 8];
// 求arr1和arr2所有元素的和
sum(...arr1, ...arr2);扩展运算符还可以用于数组的复制
let arr1 = [1, 2, 3, 4];
// ...arr1 扩展运算符就相当于 1, 2, 3, 4 --> 即数组的展开
let copy = [...arr1];对于任何实现了遍历器接口(Iterator)的对象都可以使用扩展运算符
let lis = document.querySelectorAll('li');
console.log(...lis); // <li>a</li> <li>b</li> <li>c</li>
// querySelectorAll()函数返回的是一个NodeList对象(注意:与document.get...系列返回的HTML集合是不一样的)
let lisList = [...lis];
// 内部的...后的参数是一个NodeList对象,NodeList对象实现了遍历器接口,因此能够用扩展运算符进行扩展,而后形成一个新数组,使用该方法可以将伪数组转化为数组
rest参数与扩展运算符的更多相关文章
- rest 参数和扩展运算符
rest 参数和扩展运算符 rest 参数的形式为 ...变量名:扩展运算符是三个点 .... rest 参数 function add(...values) { console.log(values ...
- rest 参数与扩展运算符
rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组 ...
- ES6 rest参数和扩展运算符
rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...
- es6 默认参数、rest参数、扩展运算符
1.默认值 现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了. function sayHello(name){ //传统的指定默认参数的方式 var name ...
- ES6学习笔记(一)——扩展运算符和解构赋值
前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...
- es6中参数【默认值,扩展运算符】
参数默认值 1.普通参数 function info(age,name="grace"){ console.log(name); } info(); //输入:grace 2.对象 ...
- es6可变参数-扩展运算符
es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...
- ES6躬行记(2)——扩展运算符和剩余参数
扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...
- ...扩展运算符+rest参数+call/apply/bind
之前在set,map里面有提过扩展运算符的概念,但是今天偶然遇到一个问题,类似于扩展运算符的经典用法,突然发现对其了解不是很深,所以再来整理一下扩展运算符的相关知识. 重点:扩展运算符内部调用的是数据 ...
随机推荐
- hdu-1536 S-Nim SG函数
http://acm.hdu.edu.cn/showproblem.php?pid=1536 给出能够取的方法序列,然后求基本石子堆问题. 只要用S序列去做转移即可. 注意has初始化的一些技巧 #i ...
- Headless Service 和Service
定于spec:clusterIP: None 还记得Service的Cluster IP是做什么的吗?对,一个Service可能对应多个EndPoint(Pod),client访问的是Cluster ...
- 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示,但是在微信pc端上显示空白
原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...
- jquery等待特定元素加载再执行相关函数
jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次 _interval = in ...
- MySQL Packets larger than max_allowed_packet are not allowed
MySQL的一个系统参数:max_allowed_packet,其默认值为1048576(1M), 查询:show VARIABLES like '%max_allowed_packet%'; 修改此 ...
- laravle 整合 thrift
1,安装thrift https://www.cnblogs.com/sunlong88/p/9965522.html 2,生成 RPC文件 thrift -r --out ./app --gen p ...
- xshell6 同时操作多个终端
当我们使用Xshell的时候,有时候需要同时建立多个会话,连接不同的服务器或者不同的用户,如何同时向所有会话发送同一指令呢?方法如下: 1.依次点击 查看 ---> 撰写 ---> 撰写 ...
- 二分查找方法和printk打印级别
人生就是一个茶几,上面摆满了杯具.内核也是一个大茶几,不过它上面的杯具是一个个的bug.确定bug什么时候被引入是一个很关键的步骤,在这个定位bug的过程中,不论有意或无意,都会很自然地用到二分查找的 ...
- MFC界面分割以及挂载
MFC中文档与视图(二) Last Edit 2013/11/19 这篇主要是介绍一下怎么去分割视图. 视图的分割分为:动态分割,静态分割.所谓的静态分割是指软件一启动视图就分割完成,而动态分割是在 ...
- Centos 安装dhcp及简单配置
install yum -y install dhcp file /etc/dhcp/dhcpd.conf eg:-------------------------------- ddns-updat ...