函数的扩展
- 1 为函数参数指定默认值
- 2 函数的 rest 参数
- 3 箭头函数
1 为函数参数指定默认值
在ES5中想为函数指定默认的值,只能通过变通的方法,如:
function fn(a, b){
a = a || 10; //a等于a或者等于10;
b = b || 20; //b等于b或者等于20;
console.log(a + b);
}
fn(); // 30
fn(0, 10); // 20 这是因为这里把0传给了a,这里的"或者"会把0判断为一个false值,就会把a这个参数赋值为一个10;所以得到的就是10+10之后的计算结果
为了解决上述问题,在ES6中,为函数参数指定指定参数的写法,
直接在写参数的时候写上a = 10, b = 20
function fn(a = 10, b = 20){
console.log(a + b);
}
fn(); //30
fn(0, 10); //10
这种ES6 的写法不仅解决了上面的问题,而且写起来更简洁。
2 函数的 rest 参数
rest 参数形式为(“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。
rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。如:
之前我们需要这样写
function sum(){
var args = arguments;
var res = 0;
for(var i=0; i<args.length; i++){
res += args[i];
}
console.log(res);//15
}
sum(1, 2, 3, 4, 5);
如果使用rest参数的时候,我们就不再需要使用argument参数了.
function sum(a, ...arr){
var res = a;
for(var i=0; i<arr.length; i++){
res += arr[i];
}
console.log(res); // 15
}
sum(10, 1, 2, 3, 4, 5);
…arr前面可以添加其他参数,…arr后面不可以添加其他参数,否则会报错
3、使用“箭头”(=>)定义函数。
const fn = a => a;
const fn2 = function (a){
return a;
};
console.log(fn(1)); //1
console.log(fn2(2)); //2
可以发现fn和fn2的写法是一个意思,但是fn1更简洁。
我们再来看看箭头函数在使用过程中的语法点:
1、你想写多个参数的时候,参数部分需要写个小括号.如:
const fn = (a, b) => a + b;
console.log(fn(1, 2)); // 3
const fn = (a, b) => {
a = a * 2;
b = b * 2;
return a + b;
};
console.log(fn(1, 2));
2、当这个箭头函数的返回值是一个对象的时候,需要使用一个小括号将它的返回值包裹起来
如:我们想返回一个对象,里面有一个a还有一个b,这个时候如果不用括号括起来,它就会把这个当做函数体内的代码;如果说我们想返回这个对象,需要使用一个小括号将对象括起来。
const fn = (a, b) => ({a, b});
一般箭头函数都常用于回调函数当中,
比如说数组的sort方法,我们希望这个数组能执行一个从小到大的排序,我们先回顾一下我们传统的写法
console.log(fn(1, 2)); // {a:1,b:2} 可以看到返回值就是一个对象
var arr = [5, 2, 3, 4, 1];
arr.sort(function (a, b){
return a - b;
});
console.log(arr);//[1,2,3,4,5]
我们再看看ES6中箭头函数的排序方法,对比一下我们发现这种写法比上面的写法简洁的多
arr.sort((a, b) => a - b);
console.log(arr); //[1,2,3,4,5]
我们再来看看箭头函数在使用过程中的一些注意事项:
1 箭头函数体内没有自己的this对象,所以在使用的时候,其内部的this就是定义时所在环境的对象,而不是使用时所在环境的对象。
function fn(){
setTimeout(function (){ // 普通函数
console.log(this); //window {...}
}, 1000);
setTimeout(() => { // 箭头函数 Object{a:1} 箭头函数体内没有自己的this对象,这里this就是定义时所在环境的对象
console.log(this);
},1000);
}
var obj = {a: 1};
fn.call(obj); //利用call修改函数体内this的指向
所以这也就说明了不能给箭头函数使用 call apply bind 去改变其内部的this指向
2 箭头函数体内没有arguments对象,如果要用,可以用Rest参数代替。
function fn(){
setTimeout(() => {
console.log(arguments);//打印出的是fn的arguments对象
}, 1000)
}
//这个例子很好的说明了箭头函数不存在anguments对象,这里打印的实际上是通过作用链打印它父级的对象
fn(1, 2, 3);
如果说我们使用箭头函数的时候需要不定参的对象,可以用Rest参数代替
const fn = (...arr) => arr;
console.log(fn(1, 2, 3, 4));// [1,2,3,4]
3 不可以当作构造函数,不可以使用new命令,否则会抛出一个错误。
const Fn = (a, b) => a + b;
const f = new Fn(1, 2); //Fn is not a contructor 报错 这就说明了它不能当做构造函数去调用
4 箭头函数不能当做Generator函数。