es6-函式擴充套件

函式新增特性

• 引數預設值
• rest引數
• 擴充套件運算子
• 箭頭函式
• this繫結
• 尾呼叫

引數預設值

注意：預設值後面必須都是帶預設值的變數

{
  function test(x, y = 'world'){ // 預設值後面必須都是帶預設值的變數
    console.log('預設值',x,y);
  }
  test('hello'); // hello world
  test('hello','kill'); // hello kill
}
複製程式碼

引數預設值的作用域問題

{
  let x='test';
  function test2(x,y=x){
    console.log('作用域',x,y); 
  }
  test2('kill'); // kill kill
  test2() // undefined undefined，形參x只宣告未賦值

  function testTwo(c,y=x){
    console.log('作用域',c,y); 
  }
  testTwo('kill') // kill test，這裡取到外級作用域了
}
複製程式碼

rest引數

{
  function test3(...arg){ // ...把引數轉成陣列，和es5中的arguments相似，但不會有arguments[0]的問題
    for(let v of arg){ // rest引數後不能有其他引數，會報錯
      console.log('rest',v); 
    }
  }
  test3(1,2,3,4,'a'); // 1 2 3 4 a
}
複製程式碼

擴充套件運算子

rest 引數逆運算

{
  console.log(...[1,2,4]); // 1 2 4，把陣列轉成離散的值
  console.log('a',...[1,2,4]); // a 1 2 4
}
複製程式碼

箭頭函式

{
  let arrow = v => v*2;
  let arrow2 = () => 5;
  console.log('arrow',arrow(3)); // 6
  console.log(arrow2()); // 5
}
複製程式碼

注意 this 繫結的問題

尾呼叫

尾呼叫，函式的最後一句話是函式 作用，提升效能 場景，函式巢狀時

{
  function tail(x){
    console.log('tail',x);
  }
  function fx(x){
    return tail(x)
  }
  fx(123) // 123
}
複製程式碼