JS Day 36: ES6 函式參數的解構賦予值

Function Argument Default 函式參數預設值

在 ES6 之前傳進來的參數必須要透過判斷才可以確定有沒有存在，無法直接設定預設值。現在可以直接在參數後面定義 function checkBMI(bmi = 0) { ... }。

範例：

function funcName(foo = 'x', bar = 'y') {
    console.log(foo, bar);
};

funcName('喔')
// => 喔 y

funcName('喔', undefined)
// => 喔 y

funcName('喔', '椰')
// => 喔 椰

// 如果沒有傳入參數，bmi 為 0
function checkBMI(bmi = 0) {
  if (bmi.value === 0) {
    // ... 略過
  }
};

Object Destructuring Assignment 解構賦值

const data = [
  {
    name: '小傑',
    height: 175,
    weight: 70,
    properties: {
      bmi: 22.9,
      state: '理想'
    }
  },
  {
    name: 'Daniel',
    height: 200,
    weight: 68,
    properties: {
      bmi: 17,
      state: '體重過輕'
    }
  },
];

// for...of 迭代陣列
// person ＝ 每筆物件
for (const person of data) {
  renderData(person);
  render(person);
};

// 方法一
function render(person) {
    // 如果層次太多，會變得落落長一串
  console.log('物件： ' + person.name, person.properties.bmi, person.properties.state);
};

// 方法二
// 跟解構變數賦予值方式ㄧ樣
function renderData(
  {
    name, 
    height, 
    weight, 
    properties: { 
      bmi: bmiValue,
      state: stateText
    }
  }) {
  console.log('物件解構： ' + name, bmiValue, stateText); // 變得簡潔
};

解構變數賦予值

const data = {
  name: '小傑',
  height: 175,
  weight: 70,
  properties: {
    bmi: 22.9,
    state: '理想'
  }
};

let { name, height, weight, properties: {bmi: bmiValue, state: stateText} } = data;
console.log(name, bmiValue, stateText);

Reference:
ECMAScript 6 入門
解構賦值