看起來像Array函數的JavaScript語法：[variable]（{key}，arg）{}

Question

我被要求研究雇主的代碼，在代碼中，雇主做了這樣的事情：

export const actions = {
  [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {
    const type = payload

現在，在這里，我無法糾正這一行代碼

 [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {

喜歡它是一個功能還是什么？ 有人能解釋一下上面的語法嗎？

Answer 1

New-ish JavaScript允許對象文字表達式中的屬性名稱（ { }阻止初始化actions被調用）通過允許[ ]獲取屬性名稱而不是過去的標識符或字符串常量來計算表達式中的屬性名稱。

那么這意味着應該評估ACTIONS.ITEM_LIST.LOAD.name ，並將最終結果的字符串值用作對象的函數屬性的名稱。 （這也是該語言的新功能;以前的屬性必須是name : value嚴格限定name : value ）。

現在在該函數的形式參數列表中， {commit}是一個解構形式參數。 這意味着函數期望第一個參數是一個對象，因此在函數內部，參數（變量） commit應綁定到該對象的“commit”屬性的值（如果沒有這樣的屬性，則為undefined ）。

因此，如果我們假設ACTIONS.ITEM_LIST.LOAD.name計算結果為字符串“xyz”，則可以調用：

var result = actions.xyz({ foo: "bar", commit: "everything" }, somePayload);

在函數中，字符串“everything”將是commit參數的值。

Answer 2

它使用對象方法語法結合計算屬性名稱和參數列表中的解構 。

ACTIONS.ITEM_LIST.LOAD可能會計算到一個對象：訪問對象的.name屬性可能會計算為一個字符串。 例如，如果字符串是“foo”，則那里的行相當於：

const actions = {
  'foo': function(arg1, payload) {
    let commit = arg1.commit; // using "let" because parameters can be reassigned
    const type = payload
    // ...
};
export actions;

（從技術上講，它並不完全等效 ，但它幾乎是 - 對象方法不能用作構造函數。）

Answer 3

[ACTIONS.ITEM_LIST.LOAD.name]（{commit}，payload）{

將解析函數聲明語法：

functionName（arguments）{statements}

這里有幾件事情在起作用。 首先， 行動是一個對象。 接下來，它使用新的計算屬性名稱語法。 即[ACTIONS.ITEM_LIST.LOAD.name]將提供我們語法的functionName部分。 注意，這不是一個數組，它是一個計算屬性 ，也是我們的動作字典的一個關鍵。 最后，它使用速記方法名稱語法在對象操作中創建函數，而不將其寫為“key：value”表示法。 這也是ECMAScript2015中的新功能。

此鏈接在這里會給你明確的想法，如果我不清除所有的疑慮。