javascript - 尝试访问 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 包含字符串 "foo"，则会生成一个具有名为 foo 的属性的对象，其值是 selectHost 的值。