尝试访问 javascript 对象值时出现“SyntaxError: Unexpected token, expected ,”

Question

在 aliases.js 中，我试图从导入的 actionTypes 对象访问“SELECT_HOST”属性值。但是，根据 Webpack，这会导致“SyntaxError: Unexpected token, expected ,”错误。我无法确定actionTypes.SELECT_HOST访问对象属性值的标准点符号方式是什么语法错误。

actionTypes.js：

const actionTypes = {
    SELECT_HOST : 'SELECT_HOST',
    INVOKE_ASSESSMENT : 'INVOKE_ASSESSMENT',
    RETRIEVE_ASSESSMENT : 'RETRIEVE_ASSESSMENT',
    RETRIEVE_OPTIONS : 'RETRIEVE_OPTIONS',
    RETRIEVE_RESULTS : 'RETRIEVE_RESULTS',
    UPDATE_OPTIONS : 'UPDATE_OPTIONS'
};

export default actionTypes;

别名.js：

import actionTypes from '../actions/actionTypes';

const selectHost = (host) => {
    chrome.tabs.query({currentWindow: true, active: true}, (tabs) => {
        host = new URL(tabs[0].url).hostname;
    });
    const action = {
        type: actionTypes.SELECT_HOST,
        host
    };
    return action;
};

export default {
    actionTypes.SELECT_HOST: selectHost
};

Webpack 抛出错误：

ERROR in ./src/aliases/aliases.js
Module build failed: SyntaxError: Unexpected token, expected ,     (15:12)

  13 | 
  14 | export default {
> 15 |  actionTypes.SELECT_HOST: selectHost
     |             ^
  16 | };

Answer 1

如果你想使用值的actionTypes.SELECT_HOST在要导出的对象属性的名称，可以使用计算属性的符号来做到这一点（如新的ES2015，但随后，所以有很多的你的其他的东西使用，所以...），请注意[]：

export default {
    [actionTypes.SELECT_HOST]: selectHost
};

例如，如果actionTypes.SELECT_HOST包含 string "foo"，则将生成一个具有名为foo的属性的对象，其值为 的值selectHost。