【ES6系列】Function

一、ES5中如何處理函數參數的默認值？ES6是如何做的呢？

// ES5 參數默認值處理
function f(x, y, z) {
  if (y === undefined) {
    y = 7
  }
  if (z === undefined) {
    z = 42
  }
  return x + y + z
}
console.log(f(1)) //50

// ES6 參數默認值處理
function f(x, y = 7, z = 42) {
  // function f(x, y = 7, z = x + y) { //參數的默認值可以是含有其它參數的表達式

  return x + y + z
}
console.log(f(1)) //50
//console.log(f(1, 8, 43)) //52
//console.log(f(1, undefined, 43)) // 傳入undefined跳過賦值，使用默認值

二、ES5中如何處理不確定參數的問題？ES6如何處理？

// ES5中用 arguments 獲取函數執行時的參數方法
function sum() {
  let num = 0
  // ES5 僞數組轉換方法
  // Array.prototype.forEach.call(arguments, function (item) {
  //   num += item * 1
  // })
  // ES6 僞數組轉換方法
  Array.from(arguments).forEach(function (item) {
    num += item * 1
  })
  return num
}

// ES6 中獲取函數執行時的參數方法
function sum(...nums) { // 剩餘參數 Rest parameter
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return num
}
console.log(sum(1, 2, 3, 5)) // 10

// 業務延伸，第一個參數乘以2再加上剩餘參數的累加
function sum(base, ...nums) { // 剩餘參數 Rest parameter
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return base * 2 + num
}
console.log(sum(1, 2, 3)) // 7

 關於函數參數的實際應用業務場景延伸

//業務場景：求三角形邊長
function sum(x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 6]
// console.log(sum.apply(this, data)) // ES5 允許把函數參數收斂到一個數組中調用，並一一對應
console.log(sum(...data)) // ES6 擴展/展開運算符 spread 

二、ES6中的箭頭函數是什麼？

箭頭函數參數和代碼塊寫法：

// 箭頭函數無參數時 () 不能省略 有且只有一個參數時可以省略
//let hello = () => { //箭頭函數無參數時 () 不能省略
let hello = name => { // 有且只有一個參數時可以省略
  // let hello = (name, city) => {
  console.log('hello world', name)
}
hello('zoe')

// 當代碼塊只有一個返回值且返回值爲一個表達式時可省略{}和return
// let sum = (x, y, z) => x + y + z 
// 如果返回的是一個字面量對象,可省略 return但是對象要用()包裹
let sum = (x, y, z) => ({
  x: x,
  y: y,
  z: z
})
console.log(sum(1, 2, 3))

ES5 函數中的this 和ES6 箭頭函數中的 this

// ES5 中的this
let test = {
  name: 'test',
  say: function () {
    console.log(this.name)
  }
}
test.say(); //test 因爲say被test調用，所以this指向test

//ES6 中的this
let test = {
  name: 'test',
  say: () => {
    console.log(this.name) // 箭頭函數的this是代碼this所在位置的對象，而不是調用的對象，這裏是window
  }
}
test.say(); 

思考：

1、如何用箭頭函數來實現一個數組排序的問題？

2、箭頭函數對 this 的處理還有什麼妙用？