【深入淺出ES6】函式

Eric_zhang發表於2019-03-04
函式

【深入淺出ES6】函式

函式

函式的形參帶預設值

function demo(url, timeout = 500, callback = function(){}){
    //....函式體
}
複製程式碼

當函式呼叫時傳入的實參是undefined或不傳遞時，會取預設值；null值是有效值，不會取預設值

function demo(url, timeout = 500, callback = function(){}){
    console.log('timeout:',timeout)
}
demo('url',null) // timeout: null

function demo(url, timeout = 500, callback = function(){}){
    console.log('timeout:',timeout)
}
demo('url',undefined) // timeout: 500
複製程式碼
  • 函式形參預設值可以為表示式
      function getValue(value){
      return value+5
  }
  function add(first, second=getValue(first)){
      return first + second
  }
  console.log(add(1,2)) // 3
  console.log(add(1)) // 7
複製程式碼
  • 函式形參區域有自己獨立的塊級作用域及暫時性死區，與函式體的作用域相分離，所以函式形參區域不能訪問函式體中的變數並且由於暫時性死區的原因，不能訪問沒初始化的變數
      function getValue(value){
      return value+5
  }
  function add(second=getValue(first), first){
      return first + second
  }
  console.log(add(undefined,2)) // Uncaught ReferenceError: first is not defined
複製程式碼

剩餘引數

在函式形參的最後一位，使用...具名引數名字 表示除了其他前面的引數，剩下的引數都存放在這個具名引數的陣列中

function add(first, ...rest){
    // rest為陣列
}
複製程式碼

函式構造器的增強能力

使用Function構造器動態建立函式

var add = new Function('first','second','return first + second')
console.log(add(1,2)) // 3

//使用預設引數
var add = new Function('first','second = first','return first + second')
console.log(add(1)) // 2
複製程式碼

擴充套件運算子

在陣列前面加上...，將陣列分割成單個引數依次傳入

var arr = [-10,-23,0,12]
console.log(Math.max(...arr)) // 12
複製程式碼

箭頭函式

特點
  • 常用來替代匿名函式表示式
  • 箭頭函式中沒有this繫結，內部繼承外部函式的this指向，因此使用call()\apply()\bind()不能修改內部的this指向
  • 箭頭函式不能用作構造器，所以不能使用new來定義新的型別、沒有原型
    let ArrowType = () => {}
let obj = new ArrowType() // ArrowType is not a constructor
複製程式碼
使用

單一引數，函式體只包含單一表示式

var getValue = value => value 
//等價於
var getValue = function(value){
    return value
}
複製程式碼

多個引數，函式體只包含單一表示式

var add = (first, second) => first + second
//等價於
var add = function(first, second){
    return first + second
}
複製程式碼

多個引數，函式體包含多個表示式

var compare = (num1, num2) => {
    let result = num1 > num2
    return result
}
複製程式碼

花括號表示函式體，如果想返回一個物件，則使用()將物件括起來

var obj = () => ({a:123, b:234})
//使用()括號包起來，來告訴js引擎這是返回一個物件字面量
複製程式碼

相關文章