函数的扩展分为以下3个部分:
1 为函数参数指定默认值
2 函数的 rest 参数
3 箭头函数
- 为函数参数指定默认值,在ES5中只能变通的写法:
function fn(a, b){
a = a || 10;
b = b || 20;
console.log(a + b);
}
fn(); //30
fn(0, 10); //20
当传入0是js会将a解析为false,直接将默认值赋给了a,这也给代码留下了隐藏bug;
ES6可以在函数声明时定义默认值:
function fn(a = 10, b = 20){
console.log(a + b);
}
fn(); //30
fn(0, 10);//10
- rest 参数形式为(“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
举例来说明:
在ES5中我们获取所有传入的参数需要使用arguments对象
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);
ES6中我们可以使用rest参数来获取,并且ES6不推荐使用arguments对象。
function sum( ...arr){
var res = a;
for(var i=0; i<arr.length; i++){
res += arr[i];
}
console.log(res); //15
}
sum( 1, 2, 3, 4, 5);
rest参数支持在前面增加参数,
function sum( a, ...arr){。。。}
sum( 10,1, 2, 3, 4, 5);
这样写也是没有问题的。
注:后面是不允许添加参数的,js会直接报错。
- 使用“箭头”(=>)定义函数
const fn = a => a; //箭头函数写法
const fn2 = function (a){ //ES5原有写法
return a;
};
console.log(fn(1)); //1
console.log(fn2(2)); //2
上面代码演示了一个最基本的箭头函数的写法。
如果需要传入多个参数,执行多行代码时,我们需要将参数用()括起来,代码块部分用{}括起来:
const fn = (a, b) => {
a = a * 2;
b = b * 2;
return a + b;
};
如果需要返回一个对象或者是多个值得时候我们需要把返回值()括起来:
const fn = (a, b) => ({a, b});
console.log(fn(1, 2)); //{a: 1, b: 2}
箭头函数的简单应用:
var arr = [5, 2, 3, 4, 1];
arr.sort(function (a, b){ //ES5原有写法
return a - b;
});
console.log(arr); // [1,2,3,4,5]
arr.sort((a, b) => a - b); // 箭头函数写法
console.log(arr);// [1,2,3,4,5]
箭头函数用起来是不是很简单,可以少写不少代码。但是使用时需要注意一下几点:
-
箭头函数体内没有自己的this对象,所以在使用的时候,其内部的this就是定义时所在环境的对象,而不是使用时所在环境的对象
举例说明:function fn(){ setTimeout(function (){ console.log(this); //window对象 }, 1000); setTimeout(() => { console.log(this); //obj },1000); } var obj = {a: 1}; fn.call(obj);
说的直白一点在上面fn函数中,fn的this就是箭头函数内的this。
所以不能给箭头函数使用 call apply bind 去改变其内部的this指向。
2 箭头函数体内没有arguments对象,如果要用,可以用Rest参数代替。
function fn(){
setTimeout(() => {
console.log(arguments); //[1, 2, 3, callee: function, Symbol(Symbol.iterator): function]
}, 1000)
}
fn(1, 2, 3);
打印出来的是fn函数arguments,
如何使用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 constructor
注意以上3点我们就应该能愉快的使用箭头函数了。
以上都是个人理解如有不对之处还望指正交流!