一、函数的默认参数值
1. ES6之前,我们如何实现函数默认参数
1.1 方式一:使用逻辑运算符【||】
function test(x) {
x = x || '默认值' // 使用||设置默认值
console.log(x)
}
test() // '默认值'
但这样做有个非常明显的缺陷
如果x的值为null/+0或-0/NaN/''/false
中的一个,x都会被设置为默认值,但我们的本意是在不传值的时候才设置为默认值
因此有了第二种处理方式
1.2 方式二:对参数是否为undefined进行判断
ES5其实本来就有函数默认参数,只不过这个默认参数只能是undefined,无法设置
function test(x) {
console.log(x)
}
test() // undefined
所以我们只要对传入的值是否为undefined进行判断就可以实现自由设置默认参数了
function test(x) {
if(!(Object.prototype.toString.call(x) === "[object Undefined]")) {
console.log('默认值')
} else {
console.log(x)
}
}
test() // '默认值'
2. ES6实现函数默认参数
2.1 基本用法
其实非常简单,直接在参数后面加个 = 号就行啦,看栗子吧
function test(x = '默认值') {
console.log(x)
}
test() // '默认值'
如果要给多个参数赋值,就像下面这样写
function test(x = '默认值1',y = '默认值2') {
console.log(x,y)
}
test() // 默认值1 默认值2
但这本质上其实还是对undefined
做判断,是1.2小节
的语法糖
function f(x = 1) {
console.log(x)
}
f(undefined) // 1
2.2 参数默认值的惰性求值
参数默认值是不记录值的,每次都会重新计算参数默认表达式的值
// 阮一峰老师 ES6深入浅出 的例子
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo() // 100
x = 100;
foo() // 101 而不是 100
// mdn的例子
function append(value, array = []) {
array.push(value);
return array;
}
append(1); //[1]
append(2); //[2] 而不是 [1, 2]
有同学一定会有疑问,这不是废话吗?其实不然,比如Python
的参数默认值不一定是惰性求值,比如下面这个例子
>>> def f1(data=[]):
... data.append(1)
... return data
...
>>> f1()
[1]
>>> f1()
[1, 1]
>>> f1()
[1, 1, 1]
二、剩余参数
函数剩余参数的英文为 ——Functions Rest Parameters
,一般我们剩余参数为rest参数
1. 基本概念
注:概念摘自阮一峰老师的《ECMAScript 6 入门》
ES6 引入 rest 参数(形式为...变量名
),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
从上面的概念中,我们至少可以知道如下三个信息
-
语法——
...
+变量
。这个变量的数据类型是数组,用来存放多余的参数 -
作用——用于获取函数的
多余参数
- 语法糖——rest参数一定是arguments对象的语法糖
1.1 基本用法
首先我们要搞清楚什么是多余参数
function sum(x, y) {
return x + y
}
sum(1, 2, '多余1', '多余2', '多余3') // 3
从上面的例子我们可以看到,sum函数接受两个参数的传递,但是用户传递了五个参数,后面的三个参数即使传递也是无法被sum函数使用,显得有些多余
这里的多余并不是无用的意思,而是相对于被使用到了的参数显得多余而已
那么,如果我们也想对这些多余参数进行处理的话就需要使用rest参数
了
// 用rest参数改写之后
function sum(x, y, ...paraArr) {
console.log(paraArr)
return x + y
}
sum(1, 2, '多余1', '多余2', '多余3')
// ["多余1", "多余2", "多余3"] 3
1.2 什么时候我们会用到rest参数?
既然rest参数是arguments的语法糖,那么我们只要搞清楚以往arguments的应用场景是什么,那么自然就懂得如何使用rest参数了。
下面看一个使用arguments的例子
// 创建一个sum函数,实现如下功能
// sum() // 0
// sum(1) // 1
// sum(2,10,2) // 14
// sum(0,0,200,1) // 201
// sum(1,10,3,2,100) // 116
function sum() {
let total = 0
for (let i = 0; i < arguments.length; i++) {
total += arguments[i]
}
return total
}
从上面的例子我们可以发现其最大的特点是参数个数不确定
,所以如果遇到函数参数个数不确定
的情况,就要优先考虑使用rest参数
,而且由于rest参数
是真数组,你用起来会比arguments舒服太多
下面是用rest参数进行改写
// 创建一个sum函数,实现如下功能
// sum() // 0
// sum(1) // 1
// sum(2,10,2) // 14
// sum(0,0,200,1) // 201
// sum(1,10,3,2,100) // 116
function sum(...paraArr) {
let total = 0
paraArr.forEach(e => total += e)
return total
}
2. 拓展:把arguments转换为真数组的三种方式
arguments因为能获取到所有参数所以还是有它的不可替代性的,但是其伪数组的特性实在有点恶心,下面教大家三种方法转换,第一种是ES5的方法,剩下两种是ES6的方法
function sum() {
let arr1 = Array.prototype.slice.call(arguments)
let arr2 = Array.from(arguments)
let arr3 = [...arguments] // 这个是展开语法【spread syntax】 我会在ES6指北的下一章讲解,敬请关注~~
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。