函數(shù)的擴展分為以下3個部分:
1 為函數(shù)參數(shù)指定默認值
2 函數(shù)的 rest 參數(shù)
3 箭頭函數(shù)
- 為函數(shù)參數(shù)指定默認值随常,在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可以在函數(shù)聲明時定義默認值:
function fn(a = 10, b = 20){
console.log(a + b);
}
fn(); //30
fn(0, 10);//10
- rest 參數(shù)形式為(“...變量名”)懒震,用于獲取函數(shù)的多余參數(shù)罩息,這樣就不需要使用arguments對象了。rest 參數(shù)搭配的變量是一個數(shù)組个扰,該變量將多余的參數(shù)放入數(shù)組中瓷炮。
舉例來說明:
在ES5中我們獲取所有傳入的參數(shù)需要使用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參數(shù)來獲取,并且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參數(shù)支持在前面增加參數(shù)娘香,
function sum( a, ...arr){。办龄。烘绽。}
sum( 10,1, 2, 3, 4, 5);
這樣寫也是沒有問題的。
注:后面是不允許添加參數(shù)的俐填,js會直接報錯安接。
- 使用“箭頭”(=>)定義函數(shù)
const fn = a => a; //箭頭函數(shù)寫法
const fn2 = function (a){ //ES5原有寫法
return a;
};
console.log(fn(1)); //1
console.log(fn2(2)); //2
上面代碼演示了一個最基本的箭頭函數(shù)的寫法。
如果需要傳入多個參數(shù)英融,執(zhí)行多行代碼時盏檐,我們需要將參數(shù)用()括起來,代碼塊部分用{}括起來:
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}
箭頭函數(shù)的簡單應(yīng)用:
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); // 箭頭函數(shù)寫法
console.log(arr);// [1,2,3,4,5]
箭頭函數(shù)用起來是不是很簡單驶悟,可以少寫不少代碼胡野。但是使用時需要注意一下幾點:
-
箭頭函數(shù)體內(nèi)沒有自己的this對象,所以在使用的時候痕鳍,其內(nèi)部的this就是定義時所在環(huán)境的對象硫豆,而不是使用時所在環(huán)境的對象
舉例說明:function fn(){ setTimeout(function (){ console.log(this); //window對象 }, 1000); setTimeout(() => { console.log(this); //obj },1000); } var obj = {a: 1}; fn.call(obj);
說的直白一點在上面fn函數(shù)中,fn的this就是箭頭函數(shù)內(nèi)的this。
所以不能給箭頭函數(shù)使用 call apply bind 去改變其內(nèi)部的this指向够庙。
2 箭頭函數(shù)體內(nèi)沒有arguments對象恭应,如果要用,可以用Rest參數(shù)代替耘眨。
function fn(){
setTimeout(() => {
console.log(arguments); //[1, 2, 3, callee: function, Symbol(Symbol.iterator): function]
}, 1000)
}
fn(1, 2, 3);
打印出來的是fn函數(shù)arguments,
如何使用rest參數(shù)代替:
const fn = (...arr) => arr;
console.log(fn(1, 2, 3, 4)); //返回一個數(shù)組[1,2,3,4]
3.不可以當作構(gòu)造函數(shù)境肾,不可以使用new命令剔难,否則會拋出一個錯誤。
const Fn = (a, b) => a + b;
const f = new Fn(1, 2); //報錯 Fn is not a constructor
注意以上3點我們就應(yīng)該能愉快的使用箭頭函數(shù)了奥喻。
以上都是個人理解如有不對之處還望指正交流偶宫!