javascript - Redux - Data Store - 不懂这个语法

Question

我正在学习 React.js，我在 Redux 部分。

有这段代码，不明白为什么要这样写。它解释了数据存储初始状态的创建。并说明 redux 使用纯 JavaScript。

src/store/initialData.js

import { PRODUCTS, SUPPLIERS } from "./dataTypes";
export const initialData = {
    [PRODUCTS]: [
        { id: 1, name: "Trail Shoes", category: "Running", price: 100 },
        { id: 2, name: "Thermal Hat", category: "Running", price: 12 },
        { id: 3, name: "Heated Gloves", category: "Running", price: 82.50 }],
    [SUPPLIERS]: [
        { id: 1, name: "Zoom Shoes", city: "London", products: [1] },
        { id: 2, name: "Cosy Gear", city: "New York", products: [2, 3] }],
}

src/store/dataTypes.js

export const PRODUCTS = "products";
export const SUPPLIERS = "suppliers";

我的问题是为什么会有这样的语法:

[PRODUCT]: [...]

我只是不明白 PRODUCT 周围的方括号。我以前在定义对象时从未见过这种语法。谁能给我解释一下这个语法？

Answer 1

这是一个特定于 JavaScript/ECMAScript 的问题。当您可以使用点表示法很容易地将常量属性名称分配给对象时:

const initialData = {};
initialData.products = [...];

但是，在那种情况下 PRODUCTS 是一个动态导入值。因此，您必须使用括号表示法来分配这样的属性:

import { PRODUCTS } from './dataTypes';

const initialData = {};
initialData[PRODUCTS] = [...];

你也可以这样做:

const initialData = {};
initialData['pro' + 'ducts'] = [...];