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

masturbator 發(fā)布于2019-08-23 17:59 / 3106人閱讀

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

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

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

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

1. 按序取值

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

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

func(1, 2, ...)

2. 按名取值

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

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

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

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

3. js 的按名取值

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

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

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

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

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

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

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

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

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

比如：

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

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

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

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

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

現(xiàn)在，大部分情況下我只用 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;
  }
  
  ...
}

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

后續(xù)

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

作者：深予之 (@senntyou)

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

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

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

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

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

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

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

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

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

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

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

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

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

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