ES6对函数的拓展(2018-05-10)
参数的默认值
在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求,我们先来回顾一下传统的实现方式,对比着看更好理解:
function person(n,a){
var name = n || 'Zhangsan';
var age = a || 25;
}
上面是传统的实现方式,通过或运算实现,原理:如果运算符 || 左侧为true,直接返回左侧的值,否则返回右侧的值; 在person函数内,如果参数n没有传参,那么变量name得到的值就是“Zhangsan”,如果传参了,变量name的值就为参数n的值。
但是,前提是参数对应的布尔值不能false(比如:数字0,空字符串等转换成布尔值就是false),这就使得这种传统的实现方式存在一定的不足和缺陷。
function person(name = 'Zhangsan',age = 25){
console.log(name,age);
}
person();
//结果:Zhangsan 25person('Lisi',18);//结果:Lisi 18
rest参数
rest参数,这是一个新的概念,rest的中文意思是:剩下的部分。
//求和函数,得到的结果赋值到result
function sum(result,...values){
//打印values看看是什么
console.log(values);
//结果:[1,2,3,4]
//进行求和values.forEach(function (v,i) {
//求和得到的结果存到result
result += v;
});//打印出求和的结果看看
console.log(result);
//结果:10
}//存储求和结果的变量res
var res = 0;
//调用sum函数
sum(res,1,2,3,4);
在实参中,除了第一个参数以外,剩余的参数都会被...values获取到。
rest参数并不是适合所有的函数使用,只在特定的情境下会比较适用,比方说刚刚案例中的求和函数,就十分适合要rest参数把实际的参数收集起来放在数组中进行求和,在适当的情况下使用它可以事半功倍,减少代码量,提高开发效率。
扩展运算符
结合数组使用,把数组的元素用逗号分隔开来,组成一个序列。
function sum(a,b) {
return a+b ;
}let arr = [2,3];
//用扩展运算法将数组[2,3]转换成2,3sum(...arr);
//结果:5
它可以将一个数组转成一个对应的参数数列。在实际开发中,你可以根据扩展运算符的作用,可以灵活运用,实现各种效果。
箭头函数
ES6给我们介绍一种全新的定义函数的方式,就是用箭头符号(=>),故得名为箭头函数。
//传统写法
var sum = function(a) {
return a ;
};//箭头函数写法
var sum = a => a;
多个参数运算:
//箭头函数写法
var sum = (a,b) => {return a+b}
sum(1,2);//结果:3
如果参数超过1个的话,需要用小括号()括起来,函数体语句超过1条的时候,需要用大括号{ }括起来。
箭头函数的最大作用就是简化函数的实现,大大地减少代码量。来举个例子对比一下,假设我们现在要对一个数组 [ 1,2,3,4 ] 里面的数求和,我们分别用传统的方式和箭头函数都实现一次:
//传统的写法
var sum = 0;
[1,2,3,4].forEach(function(v){
sum+= v;
});//箭头函数的写法
var sum = 0;
[1,2,3,4].forEach(v => sum+=v);