ES6入門之函數(shù)的擴展

函數(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ù)用起來是不是很簡單驶悟,可以少寫不少代碼胡野。但是使用時需要注意一下幾點:

  1. 箭頭函數(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ù)了奥喻。

以上都是個人理解如有不對之處還望指正交流偶宫!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市环鲤,隨后出現(xiàn)的幾起案子纯趋,更是在濱河造成了極大的恐慌,老刑警劉巖冷离,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吵冒,死亡現(xiàn)場離奇詭異,居然都是意外死亡西剥,警方通過查閱死者的電腦和手機痹栖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瞭空,“玉大人揪阿,你說我怎么就攤上這事∨匚罚” “怎么了南捂?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長旧找。 經(jīng)常有香客問我溺健,道長,這世上最難降的妖魔是什么钦讳? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任矿瘦,我火速辦了婚禮,結(jié)果婚禮上愿卒,老公的妹妹穿的比我還像新娘缚去。我一直安慰自己,他們只是感情好琼开,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布易结。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪搞动。 梳的紋絲不亂的頭發(fā)上躏精,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天,我揣著相機與錄音鹦肿,去河邊找鬼矗烛。 笑死,一個胖子當著我的面吹牛箩溃,可吹牛的內(nèi)容都是我干的瞭吃。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼涣旨,長吁一口氣:“原來是場噩夢啊……” “哼歪架!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起霹陡,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤和蚪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后烹棉,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攒霹,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年峦耘,在試婚紗的時候發(fā)現(xiàn)自己被綠了剔蹋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡辅髓,死狀恐怖泣崩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情洛口,我是刑警寧澤矫付,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布,位于F島的核電站第焰,受9級特大地震影響买优,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜挺举,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一杀赢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧湘纵,春花似錦脂崔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脖咐。三九已至,卻和暖如春汇歹,著一層夾襖步出監(jiān)牢的瞬間屁擅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工产弹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留派歌,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓取视,卻偏偏與公主長得像硝皂,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子作谭,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前,不能直接為函數(shù)的參數(shù)指定默認值奄毡,只能采用變通的方法折欠。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,363評論 0 1
  • 三,字符串擴展 3.1 Unicode表示法 ES6 做出了改進吼过,只要將碼點放入大括號锐秦,就能正確解讀該字符。有了這...
    eastbaby閱讀 1,521評論 0 8
  • 1.函數(shù)參數(shù)的默認值 (1).基本用法 在ES6之前盗忱,不能直接為函數(shù)的參數(shù)指定默認值酱床,只能采用變通的方法。
    趙然228閱讀 686評論 0 0
  • 一趟佃、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,065評論 8 25
  • 結(jié)果偏見的基本概念是以結(jié)果為導(dǎo)向闲昭,當一個人獲得成功后我們會覺得他之前做得什么都變得那么有道理罐寨,可是他的成功經(jīng)驗真的...
    鵬鵬YH閱讀 831評論 0 2