ES6 預設參數 (Default parameters)

• 過去都要先自行檢查是否為 undefined
• 使用預設參數後 傳入參數 undefined => 使用預設值
• 使用預設參數後 傳入參數 null,0,'' => 使用傳入值

  function foo(x = 100) { console.log(x) }
  foo() // 100
  foo(undefined) // 100
  foo(null) // null

  // babel 版本
  function foo() {
    // 過去都要自行判斷 該值是否為 undefined
    var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
    console.log(x);
  }

• 預設參數可以被後方的預設參數取用

  function foo(bar = 50, baz = bar + 50) {
    console.log(baz)
  }
  foo() // 100

• 亦可搭配 ES6 解構方式來撰寫

  function faz([x, y] = [1, 2], { z } = { z: 3 }) {
    return x + y + z
  }
  faz() // 6

  const [x, y] = [1, 2]
  const { z } = { z: 3 }
  console.log(typeof x) // number
  console.log(typeof z) // number

• 無法將函式設為預設參數

  // 此方法無法執行 會造成 ReferenceError
  function fuk(a = go()) { function go() { return ':P' } }
  fuk()

Rest Operator

• 用於不知道要傳入多少參數
• ESLint 不推薦使用 arguments

  function add(...numbers) {

    console.log(numbers) // [1, 2, 3]
    console.log(typeof numbers) // object 陣列也是物件
    return numbers.reduce((sum, el) => sum + el, 0)
  }
  console.log(add(1, 2, 3)) // 6

Spread Operator

• 用於展開陣列
• 合併組成陣列
• 合併組成物件

  const arrA = ['AAA', 'AA', 'A']
  const arrB = ['BBB', ...arrA]
  // 合併陣列 ["BBB", "AAA", "AA", "A"]
  console.log(arrB)

  //* Array Concat 作法
  const arrC = ['CCC']
  // 合併陣列 ["CCC", "AAA", "AA", "A"]
  console.log(arrC.concat(arrA))

const oldObj = {
  title: 'oldTitle',
  newAttr: 'oldAttr',
}
//* 創造新物件，並加入新屬性
const newObj = { 
  name: 'newObj',
  // 當 newObj 沒有該屬性，則加入新屬性
  // 當 oldObj 沒有該屬性，就會採用此 default
  title: 'default', // default
  ...oldObj, 
}
const newObjCreated = {
  name: "newObj", // 來自 newObj 原本的屬性
  title: "oldTitle", // 來自 oldObj 的覆蓋
  newAttr: "oldAttr" // 來自 oldObj 新屬性
}
console.log(newObj)