1. 形參默認值:

• 說明: 就是在聲明函數時, 給形參設置默認值, 當函數調用時, 如果沒有傳入實參值, 就會使用默認值;

• 示例:

  let demo = function (x = 4, y = 5) {
      return x + y;
  }
  demo();  // => 9 當設置了形參默認值, 調用時 如果沒有傳入實參值, 則會使用形參默認值
  demo(10, 15);  // => 25 當調用時 傳入了實參值, 就使用傳入的實參值
  

2. 解構賦值和形參默認值的結合使用:

• 說明:

  • 在定義函數的時候, 將形參設置為對象的形式;
  • 然后在函數調用時, 實參的 key 必須要和 形參的參數名一致即可;

• 注意: 請詳細查看示例中的 不同點

• 示例1: 解構賦值默認值與形參默認值結合使用:

  function add({x = 0, y = 0} = {x: 4, y: 5}) {
      console.log(x + y);
  }
  /** 參數部分解讀: 可這樣理解
    *    1. {x = 0, y = 0} 這部分使用了對象的結構賦值(解構接收 - 參數: {x: 3, y: 4}), 并設置了 解構默認值;
    *    2. {x: 3, y: 4} 這部分是函數的形參, 并設置了默認值
    */ 
  add({x: 10});  // => 10;  調用時, 實參值為{x: 10}, 解構時, 右邊形參部分 y為 undefind, 此時 x = 10, y 使用解構默認值 0
  add({x: 10, y: 20});  // => 30;  x, y 都傳入了實參值, 形參接收{x: 10, y: 20} 然后解構, x = 10, y = 20 
  add({});  // => 0;  調用傳入空對象, 解構 傳入的 {}, 此時 形參{}中的 x, y 嚴格等于 undefined, 所以 使用解構默認值: x = 0, y = 0
  add();  // => 9;  沒傳參, 此時解構 形參默認值: {x: 4, y: 5}, 因此 x = 4, y = 5
  

• 示例2: 只設置解構賦值默認值, 不設置形參默認值時:

  function add({x = 4, y = 5}) {
      console.log(x + y);
  }
  /** 
     * 只設置了解構賦值默認值, 如果調用時, 不傳參, 那么 無法解構生成變量 x, y(因為是對象解構賦值, 你需要有能解構的對象才行); 
     * 此時只有傳入一個空對象, 解構空對象, 空對象中 x, y 嚴格為undefined, 會使用解構默認值: x = 4, y = 5;
  */
  add();  // => 報錯;  Cannot read property 'x' of undefined
  add({});  // => 9;  解構空對象, x, y 為 undefined, 此時使用解構默認值
  add({x: 10});  // => 15;  解構{x: 10}, y 為 undefined, 所以y 使用解構默認值: 5
  add({x: 10, y: 20});  // => 30;  解構{x: 10, y: 20}, x = 10, y = 20  
  

• 示例3: 只設置解構賦值, 且不設置解構默認值:

    function add1({x, y}) {
        console.log(x, y);
    }
    add1();  // => 報錯;  同示例2
    add1({});  // undefined, undefined; =>  解構調用傳入的實參: {}, x, y 都為undefind, 
    add1({x, 1})  // 1, undefined;  => 解構調用傳入的實參: {x: 1}, x = 1, y為undefined
    add1({x: 1, y, 2})  // 1, 2;  => 解構調用傳入的實參: {x: 1, y: 2}, x = 1, y = 2
  

  綜上: 當只設置了解構賦值, 調用時要傳入對象形式的參數

3. rest參數: (...args)可變參數, 相當于 arguments

• 說明: arguments是偽數組對象結構, 用于獲取 函數在本次調用時 傳入的全部實參值;

• 使用方法:

  • 實質: 是將所有的參數全部保存在 一個變量(args)當中了;
  • 相當于 用于接收本次傳入的所有實參, 因此, 這個變量是一個數組結構;
  • 即使 沒有傳入實參, 或者傳入了一個實參值, args也是一個數組結構;

• 例如:

  function rest(...args) {
      console.log(args);
      args.forEach((item, index) => {
          console.log(`第${index}個變量是${item}`);
      })
  }
  /** 
    依次打印: ['托兒索', '小學僧', '魚尾雯']
    第0個變量是托兒索
    第1個變量是小學僧
    第2個變量是魚尾雯
   */
  rest('托兒索', '小學僧', '魚尾雯');  // => 會將本地調用的全部實參值 傳給 ...args
  

4. 箭頭函數:

• 定義方式說明:

  • 箭頭函數的用法與普通函數的用法幾乎一致;

  • 寫法: 去掉 function 然后在 () 與 {} 之間增加 => ;

  • 例如:

    let getName = (name) => {
        console.log('名字是' + name);    
    }
    getName('菊花信');
    /** 箭頭函數可以使用形參默認值 */
    let getName = (name = '菊花信') = {
        console.log(`名字是${name}`);
    }
    getName();  // 名字是菊花信; => 沒傳實參值, 使用形參默認值; 
    getName('橘右京');  // 名字是橘右京; => 使用傳入的實參值
    

• 箭頭函數特點:

  1. 箭頭函數不能作為 構造函數使用

     • 即不能通過 new 關鍵字 創建實例對象

  2. 箭頭函數沒有 arguments, 但可使用 rest參數 的方式, 接收函數調用時 傳入的全部實參值

     • 即形參位置為: ...args

  3. 箭頭函數沒有 this對象, 在箭頭函數中的 this, 指向的是函數外層的對象

     btn.onclick = () => {
        console.log(this);
     } 
     // 箭頭函數沒有this, 因此事件的 回調函數中, this指向的是函數外層的對象
     

  4. 如果函數體只設置了一行代碼, 且設置了返回值, 那么不需要設置 {} 和 return

     let noReturn = (x, y) => x + y;
     noReturn(10, 20); // => 30
     

  5. 如果函數中只有一個 參數, 那么可以不設置小括號: ()

     let test = x => x
     test(1);   // => 1
     

• 注意: 由于箭頭函數的可讀性太低, 不推薦過多使用箭頭函數(依據個人實際能力參考)