es6 默认参数、rest参数、扩展运算符
1、默认值
现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name){
//传统的指定默认参数的方式
var name = name||'hubwiz';
document.write('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='hubwiz'){
document.write(`Hello ${name}`);
}
sayHello(); //输出:Hello hubwiz
sayHello('汇智网'); //输出:Hello 汇智网
sayHello2(); //输出:Hello hubwiz
sayHello2('汇智网'); //输出:Hello 汇智网
2、rest参数
rest参数(形式为“...变量名”)可以称为不定参数,用于获取函数的多余参数,这样就不需要使用arguments对象了。
rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) {
let sum = ;
for (var val of values) {
sum += val;
}
return sum;
}
add(, , ) //
不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如以上示例中,...values 代表了所有传入add函数的参数。
3、扩展运算符
扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。
它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
var people=['张三','李四','王五'];
//sayHello函数本来接收三个单独的参数people1,people2和people3
function sayHello(people1,people2,people3){
document.write(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people); //输出:Hello 张三,李四,王五
//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people); //输出:Hello 张三,李四,王五
4、扩展运算符的应用(常用)
a、合并数组
扩展运算符提供了数组合并的新写法。
var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5 的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6 的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
b、与解构赋值结合
扩展运算符可以与解构赋值结合起来,用于生成数组。
const [first, ...rest] = [, , , , ]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // []: const [first, ...rest] = ["foo"]; first // "foo" rest // [] 如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。 const [...butLast, last] = [, , , , ]; // 报错 const [first, ...middle, last] = [, , , , ]; // 报错
es6 默认参数、rest参数、扩展运算符的更多相关文章
- rest 参数与扩展运算符
rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组 ...
- ...扩展运算符+rest参数+call/apply/bind
之前在set,map里面有提过扩展运算符的概念,但是今天偶然遇到一个问题,类似于扩展运算符的经典用法,突然发现对其了解不是很深,所以再来整理一下扩展运算符的相关知识. 重点:扩展运算符内部调用的是数据 ...
- es6 学习小记 扩展运算符 三个点(...)
参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...
- ES6学习笔记(一)——扩展运算符和解构赋值
前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...
- ES6 入门系列 - 函数的扩展
1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...
- ES6 学习6 数组的扩展
本章学习要点: 扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实 ...
- es6中参数【默认值,扩展运算符】
参数默认值 1.普通参数 function info(age,name="grace"){ console.log(name); } info(); //输入:grace 2.对象 ...
- ES6躬行记(2)——扩展运算符和剩余参数
扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...
- es6可变参数-扩展运算符
es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...
随机推荐
- 10.30NOIP集训总结
1.第一眼是优先队列,然后发现n很大. 然后再观察一下,发现就可以二分,然后套用莫比乌斯反演里面的分块. 然后卡卡常就过了. 发现一个严肃的事情,就是说long long相除(相模)都会占用很多时间. ...
- hbase phoenix char may not be null
在使用phoenix做hbase的相关測试的时候.会出现 char may not be null 的错误. 这是因为建表和导入的数据不匹配导致的.主要是char的定义,假如一个字段定义为char类型 ...
- HDU3078 Network [2016年6月计划 树上问题05]
Network Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- 使用Cmder 安装 Composer 出现 "attempt to call a nil value"
原因: 不是这个原因,也不是那个原因,而是采用了中文路径, 把comder 整个搬到其他目录就行了
- 那些年,我们见过的Java服务端乱象
导读 查尔斯·狄更斯在<双城记>中写道:“这是一个最好的时代,也是一个最坏的时代.”移动互联网的快速发展,出现了许多新机遇,很多创业者伺机而动:随着行业竞争加剧,互联网红利逐渐消失,很多创 ...
- loadrunner录制脚本时登录密码转md5
在录制用户注册登录脚本时,常常会遇到web程序对用户密码进行加密处理.在很多时候采用的加密方式为MD5. 这时有两种处理方式: 一.所有用户采用同一密码 例如:每个用户名的密码都为e10adc3949 ...
- chrome浏览器 新打开的页面覆盖当前页面
chrome浏览器 本应该新打开一个页面,却覆盖了当前页面. 解决办法:使用鼠标中键打开一次,后续即可正常使用.
- ASP.NET+C#面试题
1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? 尽可能用约束(包括CHECK.主键.唯一键.外键.非空字段)实现,这种方式的效率最好:其次用触发器,这种方式可以保证无论何种业 ...
- 2017年浙工大迎新赛热身赛 A 毕业设计选题 【结构体排序】
时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 65536K,其他语言131072K64bit IO Format: %lld 题目描述 又到了一年一度,大四老学长们毕业设计选题的时候, ...
- Kafka 集群安装
Kafka 集群安装 环境: Linux 7.X kafka_2.x 在linux操作系统中,kafka安装在 /u04/app目录中 1. 下载 # wget https://mirrors.cnn ...