前言
1.介绍ES5与ES6传入默认参数的方式
2.介绍ES5与ES6怎么将多余的参数转换成数组的方式,即获取函数有几个参数和怎么处理参数 rest的运算
3.介绍ES5与ES6怎么将数组打散成参数的操作
一、ES5中函数参数默认值的做法
代码1:
function fn(a, b, c){
b = b || 1;
c = c || 2;
return a + b + c
}
console.log(fn(8)) // 11
说明:函数内部变量不需要用let和const再次声明了,否则会报错误。
代码2:
function fn(a, b, c){
// b == null 相当于b === undefined || b === null
b = b == null ? 2 : b
c = c == null ? 3 : c
return a + b + c
}
console.log(fn(10)) // 15
说明b==null,相当于b === undefined || b === null ,所以当参数输入undefined或者null都会当作默认参数输出。
二、ES6中函数参数默认值的做法
代码1: 直接传入默认值
function fn(a, b = 3, c =4){
return a + b + c
}
console.log(fn(8))// 15
如果说我们只要传入a和c参数,跳过b参数(就是让b变成默认参数传入)该怎么操作呢,其实很简单,只要b这个位置改成undefined就可以了,如下面【代码2】
代码2:省略b参数,只传入a和c参数,是b变成默认值
function fn(a, b = 3, c =4){
return a + b + c
}
// 当想中间跳一个传入默认值,中间则写undefined
console.log(fn(8, undefined, 10)) //21
其实,我们ES6在传入参数可以使用表达式的形式传入,如【代码3】
代码3: 通过表示式的方式传参
function fn(a, b = 3, c = a + b + 2){
return a * 2 + c // 1 * 2 + 6
}
console.log(fn(1, undefined)) // 8
三、获取函数有几个参数
这个部分也分ES5和ES6方式的说明,在 ES5 中可以在函数体内使用 arguments 来判断。然而在 ES6 中不能再使用 arguments 来判断了【ES5的做法】,但可以借助 Function.length 来判断,但是, Function.length 结果和 arguments 的结果不同,Function.length 是统计第一个默认参数前面的变量数【ES6的做法】,那么这里就引入了 ...(剩余运算符)【章节四-2】
1.ES5的做法
//es5获得参数个数
function fn(a, b = 3, c =4){
console.log(arguments.length) //5 个实际参数个数
return a + b + c
}
// test
console.log(fn(1, undefined, 2, 4, 5))
或者里面这一行改成
console.log(Array.from(atguments).length)
也行,因为Array.from就是将伪数组数组,所得的结果就是知道有5个实际的参数。
2.ES6的做法
代码1:获得定义的参数个数(不包括默认值)
// es6判断参数个数
function fn(a, b = 2, c =4){
console.log(fn.length) //只能判断1 个定义的参数a,而b,c是判断不出来的
return a + b + c
}
// test
console.log(fn(1, undefined, 2, 4, 5))
说明:这种方法只能判断有几个定义的参数(但是不包括定义默认值的参数),而且不能获得实际参数的个数,那怎么办呢?接下来就 该 ...(剩余运算符)上场了,如【第四部分代码】所示,其实下面都是把他转为数组的办法。
四、如何处理剩余参数--就是将参数转换成数组的方式
1.ES5的做法
代码1:在写函数的时候,部分情况我们不是很确定参数有多少个,比如求和运算。
//es5判断实际参数个数,与5做对比
function sum () {
let num = 0
Array.prototype.forEach.call(arguments, function (item) {
num += item * 1
})
// console.log(arguments.length) //也可以获得参数个数
return num
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10
说明:
1.通过Array.prototype的方式使用数组的方法,并指向arguments伪数组,然后变成真的数组,既然能将参数转为数组形式,那实际参数个数也就知晓了。
2.其实可以用ES5拼合ES6的语法去写,用Array.from的方式,为什么呢,因为,arguments在ES6已经不存在了,但是如果用babel去解析式没问题的,所以可以这么写,看【代码2】
代码2:
function sum () {
let num = 0
// Array.prototype.forEach.call(arguments, function (item) {
// num += item * 1
// count = count + 1
// })
Array.from(arguments).forEach(function (item) {
num += item * 1
})
// console.log(arguments.length) //也可以获得参数个数
return num
}
console.log(sum(1, 2, 3))// 6
console.log(sum(1, 2, 3, 4))//10
说明:通过Array.from()的方式,将伪数组转化为数组的形式,既然能将参数转为数组形式,那实际参数个数也就知晓了。
2.ES6的做法 ...(剩余运算符 rest运算)
代码1:...(剩余运算符),怎么处理不确定参数
function sum (...nums) {
let num = 0
console.log(nums)
nums.forEach(function(item){
num += item
})
// console.log(arguments.length) //也可以获得参数个数
return num
}
console.log(sum(1, 2, 3))// 6
console.log(sum(1, 2, 3, 4))//10
结果:
说明:通过...的方式,就相当于ES5中将arguments转化为数组,也就是将参数转化为数组的方式,既然能转化为数组,那就什么都好办了。
代码2:固定一个参数,后面的参数个数不固定
function sum (base, ...nums) {
let num = 0
console.log(nums)
nums.forEach(function(item){
num += item
})
// console.log(arguments.length) //也可以获得参数个数
return num
}
console.log(sum(1, 2, 3))// 5
console.log(sum(1, 2, 3, 4))//9
结果:
说明:可以把知道的参数放在base里面,不知道的参数可以放到nums里面
五、Rest的逆操作--就是将数组转换回参数的形式
1.ES5的做法
代码:
// 假设data式后台传回来的数据
let data = [4, 5 ,6]
// 求和
function sum (x = 1, y = 1, z = 1){
return x + y + z
}
console.log(sum.apply(this, data)) //15
说明:通过apply的方式,将数据参数传入sum
2.ES6的做法
代码:通过...的方式,将数组变成参数传入
// 假设data式后台传回来的数据
let data = [4, 5 ,6]
// 求和
function sum (x = 1, y = 1, z = 1){
return x + y + z
}
console.log(sum(...data))// 15
说明:这个...就是rest的你运算了,也叫做扩展运算符
总结:
1.参数默认值是ES6好用【本章一,本章二】
2.ES5能判断实参的个数,但是ES6只能判断定义参数(不包括参数默认值的个数),如果想用ES6去判断,则必需将参数转化为数组才可以【本章三、本章四】
3.如何将数组打散成原来的参数,这里用了ES5和ES6两种方式【本章五】