ES6 默认参数及...操作符——举例说明

 

在现在的前端项目中,你一定见过 ... 这样的符号,如果你还没了解过ES6也许会很奇怪,在ES6中,这是一种操作符号,本章我们来结合例子讲解ES6中默认参数和 ... 操作符号的使用和意义。

一、默认参数

JS中函数是可以带参数的,然而如果想给函数设置默认参数怎么写呢,ES6中就可以在设置参数的时候也顺便设置默认参数。如果在使用函数时,没有传入参数侧会返回默认参数,如果传入了参数则不会再显示默认参数。用${ }表示。 例如:

function run(name = 'name',age = 0){
return `${name} ${age}`;
}
console.log(run()) // name 0 默认值
console.log(run("Luara",20)) // Luara 20

二、...操作符

...有两种含义,分别表示: 展开操作符-Spread 和 剩余操作符-Rest。使用的时候书写在变量的前面。

1、展开操作符-Spread

一开始看见...操作符可能会很奇怪,怎么有这么一个操作符?不是我们聊天经常使用的吗?使用…表示还没说完的话,省略号。在ES6中,...可以表示展开操作符,可以称为Spread。怎么展开呢,如下。 例如:


let color = ['red','blue','green'];
let color1 = ['black',...color]
console.log(color) // ["red", "blue", "green"] 输出数组
console.log(...color) // red blue green 展开输出
console.log(color1) // ["black", "red", "blue", "green"]

2、剩余操作符-Rest

...表示剩余操作符的时候,称为Rest操作符,表示剩余的参数,元素等全部放到这个...这个操作符表示的变量里面去,表示的是一个数组。 例如:

function func(name,age,...man){ // `...`表示的是Rest剩余操作符。
console.log(name,age,man); // lucy 18 (2) ["150cm", "北京"]
console.log(name,age,...man); // lucy 18 150cm 北京 在这里`...`表示的是Spread操作法,展示剩余的参数
}
func('lucy',18,'150cm','北京'); 

推荐阅读: ES6剪头函数及对象表达式

vue中的增加删除修改接口请求数据操作

JavaScript-window对象常用属性和方法全集

本文为博主原创文章,知识共享,开源精神,转载注明出处。