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

【问题标题】："SyntaxError: Unexpected token, expected , " when trying to access javascript object value尝试访问 javascript 对象值时出现“SyntaxError: Unexpected token, expected ”
【发布时间】：2017-02-04 13:33:45
【问题描述】：

在 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;

aliases.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 | };

【问题讨论】：

相信你可能需要定义out = {}; out[actionTypes.SELECT_HOST] = selectHost; export default out;...
@NiettheDarkAbsol：在 ES2015+ 中不需要这两个步骤，如果那是 OP 想要做的。
你想对actionTypes.SELECT_HOST做什么？是的，这是一个完全正常的属性访问表达式，但是在您执行此操作的地方，属性访问表达式无效（因此出现错误）。
@T.J.Crowder 感谢 cmets 和您的回答。我不知道不能在对象文字中使用属性访问表达式。我将某些常量定义为 actionTypes.js（用作枚举集合）中的对象值，然后导出这些值。然后，在其他文件中，我正在访问这些值。
@Agrim：很好（你确实说过你在最后使用了这个值，我只是想确定一下）。好消息是您现在可以使用这些表达式（在括号中）。 :-)

标签： javascript node.js webpack

【解决方案1】：

如果您尝试使用 actionTypes.SELECT_HOST 的值作为要导出的对象中的属性名称，则可以使用计算属性表示法来执行此操作（从 ES2015 开始，但是，您正在使用的许多其他东西也是如此，所以...），请注意[]：

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

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

【讨论】：

太好了，确实有效！是的，我正在使用 ES2015（虽然还在全面学习它的过程中），所以每天都要学习新东西。

【解决方案2】：

在 Object 字面量内，键名不能包含点 (.)

【讨论】：