如何提供 Function 的 Default Object Parameter ?

栏目: JavaScript · 发布时间: 5年前

内容简介:實務上 Function 的 Argument 應盡量以 Object 傳遞,而非 Primitive,但若要對 Property 提供 Default Value,該怎樣實現才優雅呢 ?ECMAScript 5ECMAScript 2015

實務上 Function 的 Argument 應盡量以 Object 傳遞,而非 Primitive,但若要對 Property 提供 Default Value,該怎樣實現才優雅呢 ?

Version

ECMAScript 5

ECMAScript 2015

ECMAScript 5

function func(options) {
  var firstName = '';
  var lastName = '';

  if (!options || !options.firstName)
    firstName = 'Sam';

  if (!options || !options.lastName) {
    lastName = 'Xiao';
  }

  return `${firstName} ${lastName}`;
}

console.log(func());
console.log(func({}));

options parameter 可能為 undefined ,也就是沒傳,或者傳入是 empty object。

因此要判斷 parameter 是否為 undefined ,還要判斷 property 是否為 undefined

由於 ES5 原本風格就是要你在 runtime 判斷並提供 default value,因此無法討避醜陋的寫法。

如何提供 Function 的 Default Object Parameter ?

ECMAScript 2015

function func({firstName = 'Sam', lastName = 'Xiao'} = {}) {
  return `${firstName} ${lastName}`;
}

console.log(func());
console.log(func({}));

ECMAScript 2015 提供了 Object Destructing 之後,我們可以不用宣告 parameter object,直接在 parameter list 加以 destruct variable,並提供 default value。

這種寫法在 ECMAScript 2015 經常看到,但老實說並不是最優雅的寫法。

Parameter 使用 object 的用意為的就是讓 parameter list 能越精簡越好,但使用了 Object Destructing 且提供 default value 之後,就喪失使用 object 的優勢了。

如何提供 Function 的 Default Object Parameter ?

function func(options = {}) {
  const {
    firstName = 'Sam',
    lastName = 'Xiao',
  } = options;

  return `${firstName} ${lastName}`;
}

console.log(func());
console.log(func({}));

比較優雅的寫法是 parameter list 僅提供 empty object,但 Object Destructing 則寫在 function 內,如此 parameter list 維持精簡,也保留了 parameter 使用 object 的初衷,且 destruct variable 寫在 function body 更一目瞭然。

如何提供 Function 的 Default Object Parameter ?

Conclusion

  • Object Destructing 是 ECMAScript 2015 很精彩的功能,但若要提供 default value,建議不要直接寫在 parameter list,而是分開寫

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Build Your Own Web Site the Right Way Using HTML & CSS

Build Your Own Web Site the Right Way Using HTML & CSS

Ian Lloyd / SitePoint / 2006-05-02 / USD 29.95

Build Your Own Website The Right Way Using HTML & CSS teaches web development from scratch, without assuming any previous knowledge of HTML, CSS or web development techniques. This book introduces you......一起来看看 《Build Your Own Web Site the Right Way Using HTML & CSS》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具