ES6小技巧 - 使用解構賦值設定函式引數預設值

codexu發表於2018-12-14
賦值函式

本文要說的並不是下面這種ES6的函式引數預設值：

function fn(a = 0, b = 1) {}
複製程式碼

很多時候，我們在寫一個建構函式時，可能需要傳入很多引數，這時候就不可能使用函式引數一個一個的傳入，而是傳入一個物件當作引數。

舉個例子：一個函式，引數傳入一個物件，物件裡可以設定兩個屬性(a, b)，a預設值為1，b預設值為2。

ES5

以前我們是這麼設定函式引數預設值的：

function es5Fn (options) {
  options = options === undefined ? {} : options;
  var a = options.a === undefined ? 1 : options.a;
  var b = options.b === undefined ? 2 : options.b;
  console.log(a, b);
}
複製程式碼
  • 首先判斷函式是否傳入了一個物件，如果沒有建立一個空物件。
  • 然後判斷這個物件中是否含有a、b屬性，沒有將會設定為預設值。

ES6

function es6Fn ({a = 1, b = 2} = {}) {
  console.log(a, b);
}
複製程式碼

使用ES6解構賦值的方式設定預設值是不是簡單了很多？

終於水完了這篇文章，如果有在開發H5（活動專題）頁面的小夥伴看下我的腳手架～

X-BUILD 是針對 H5 開發的一套自動化構建工具，致力於提升開發效率，減小開發難度。它可以讓你在沒有任何構建工具（例如 grunt 、 gulp 或 webpack 等工具）配置經驗的情況下，幫你快速生成一個完整的前端工程，並可以打包程式碼和靜態資源，使你的專案以最優異的效能上線。>>使用文件<<

相關文章