js 函數參數推薦書寫方式 ({ param1, param2, ... })

masturbator 發布于2019-08-23 17:59 / 3101人閱讀

摘要：函數參數推薦書寫方式編程語言函數包括對象的方法參數的取值方式大致可以分為兩種按序取值與按名取值。按名取值按照名稱取值，可以任意安排各個參數的順序。

js 函數參數推薦書寫方式 ({ param1, param2, ... })

編程語言函數（包括對象的方法）參數的取值方式大致可以分為兩種：按序取值與按名取值。

一般編程語言都是按序取值，比如 C、Java、JavaScript 等，少數語言支持按名取值，比如 Groovy。

1. 按序取值

按照順序，挨個取值，每個參數的順序是固定的。

const func = (param1, param2, ...) => { ... }

func(1, 2, ...)

2. 按名取值

按照名稱取值，可以任意安排各個參數的順序。

以下語法并不存在，只是作為講解生造的

const func = (param1: value1, param2: value2, ...) => { ... }

func(param1: 1, param2: 2); // ok 
func(param2: 2, param1: 1); // ok again

3. js 的按名取值

JavaScript 語言本身并不支持按名取值，但結合 ES6 的解構賦值，可以模擬函數參數的按名取值。

const func = ({ param1, param2, ... }) => { ... }

func({ param1: 1, param2: 2, ... });

但這種方式如果不傳參數調用 func() 就會報錯，需要 func({}) 這樣調用才表示什么參數都不傳。

為了兼容這種方式，可以這樣做：

const func = ({ param1, param2, ... } = {}) => { ... }

func();   // ok
func({}); // ok again

4. 為什么推薦使用按名取值的方式

按名取值最大的好處是可以隨意安排參數的順序，有利于擴展，特別是對 API 接口來說。

比如：

export const dialog = (title, content, confirmCallback, cancelCallback) => { ... }

比如上面的函數中，大部分情況下我只用 content, confirmCallback，那么我就需要這樣做：

dialog(null, "content", () => { ... });

如果我需要擴展一個參數 icon，那么為了兼容以前的版本，我只能加在最后面：

export const dialog = (title, content, confirmCallback, cancelCallback, icon) => { ... }

現在，大部分情況下我只用 content, confirmCallback, icon，那么我就需要這樣做：

dialog(null, "content", () => { ... }, null, "icon");

如此，便很麻煩，不利于擴展。

如果使用按名取值的方式，便迎刃而解：

export const dialog = ({title, content, confirmCallback, cancelCallback} = {}) => { ... }

// 擴展 icon
export const dialog = ({title, content, icon, confirmCallback, cancelCallback} = {}) => { ... }

dialog({content: "content", confirmCallback: () => { ... }});

dialog({content: "content", icon: "icon", confirmCallback: () => { ... }});

5. 大家可能的反駁

有人可能會說，可以這樣做：

export const dialog = (title, content, confirmCallback, cancelCallback) => { 
  if (typeof content === "function") {
    cancelCallback = confirmCallback;
    confirmCallback = content;
    content = title;
  }
  
  ...
}

對于這種方式，我只想說：兄弟，簡潔一點不好嗎？

后續

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

云服務器 GPU云服務器 js 函數參數拼接 js 無參數函數 js函數默認參數 js中函數參數的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104485.html

[譯] ES6 中 Arguments 和 Parameters 用法解析

摘要：默認參數有了我們不需要再去檢測哪些值為并且給它們設定默認值了。我們甚至可以使用函數去找回默認參數的值注意這個函數只有在第二個參數省略時才會被調用。瀏覽器對默認參數的支持情況桌面瀏覽器移動端瀏覽器解構賦值解構賦值是的新特性。原文地址：https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters...

msup 2019-08-21 10:56 評論0 收藏0
Js apply()使用詳解

摘要：方法詳解我在一開始看到的函數和時非常的模糊看也看不懂最近在網上看到一些文章對方法和的一些示例總算是看的有點眉目了在這里我做如下筆記希望和大家分享如有什么不對的或者說法不明確的地方希望讀者多多提一些意見以便共同提高主要我是要解決一下幾個問題和 Js apply方法詳解我在一開始看到javascript的函數apply和call時,非常的模糊,看也看不懂,最近在網上看到一些文章對apply...

iOS122 2019-08-26 10:22 評論0 收藏0
Laravel 獲取 Route Parameters (路由參數) 的 5 種方法

摘要：獲取路由參數的方式有很多，并且有個小坑，匯總如下。例如結果為結果為以上就是獲取路由參數的種方法。所有文章均已收錄至項目。 Laravel 獲取路由參數的方式有很多，并且有個小坑，匯總如下。假設我們設置了一個路由參數： /** * 定義路由參數名稱分別為： param1，param2 */ Route::get(/{param1}/{param2}, TestController@in...

seasonley 2019-06-28 13:53 評論0 收藏0
Javascript定時器那些事兒

摘要：一什么是定時器提供了一些原生方法來實現延時去執行某一段代碼，下面來簡單介紹一下設置一個定時器，在定時器到期后執行一次函數或代碼段定時器延遲后執行的函數延遲后執行的代碼字符串，不推薦使用原理類似延遲的時間單位毫秒，默認值為向延遲函數傳遞而外的一、什么是定時器 JS提供了一些原生方法來實現延時去執行某一段代碼，下面來簡單介紹一下 setTimeout: 設置一個定時器，在定時器到期后執行...

Riddler 2019-08-21 15:26 評論0 收藏0
js計數器方法setInterval()、clearInterval()、setTimeout()和

摘要：方法描述周期性地調用一個函數或者執行一段代碼。方法可取消由方法設置的。語法詳解是該延時操作的數字此隨后可以用來作為方法的參數。需要注意的是，不支持第一種語法中向延遲函數傳遞額外參數的功能。該值標識要取消的延遲執行代碼塊。方法描述 setInterval 周期性地調用一個函數(function)或者執行一段代碼。 clearInterval 取消掉用setI...

keithxiaoy 2019-08-21 10:24 評論0 收藏0