ES6 模块不变性

Question

我认为 ES6 模块导出总是不可变的，所以我对我得到的行为感到非常困惑。我有一个简单的颜色数组，我想在我的 Vue 应用程序的多个组件中使用它们。它在它自己的文件中，如下所示：

export const colors = [
  '#ffb3ba',
  '#ffdfba',
  '#ffffba',
  '#bae1ff',
]

然后我将它导入到我想像这样使用它的组件中：

import { colors } from '../assets/colors';

我有一个选择随机颜色然后从列表中删除它的功能，这样就不会为同一个组件再次选择它。它是这样的。

descriptions.forEach(item => {
      const colorIndex = Math.floor(Math.random() * colors.length);
      item['color'] = colors[colorIndex];
      colors.splice(colorIndex, 1);
    });

这里的想法是从列表中随机选择一种颜色，为其分配描述，然后将其从列表中删除，以便在forEach.

问题是它似乎从列表中永久删除了颜色。因此，当我导入并尝试在另一个组件中使用该数组时，其中没有颜色。我怎样才能让colors每个组件都有一个新的数组实例？

Answer 1

导入的绑定不可分配，仅此而已。它们类似于const- 你不能改变变量，但你可以改变它持有的对象。为防止出现这种情况，请在导出对象时冻结对象：

export const colors = Object.freeze([
  '#ffb3ba',
  '#ffdfba',
  '#ffffba',
  '#bae1ff',
]);

我怎样才能让colors每个组件都有一个新的数组实例？

看看在 JavaScript 中按值复制数组：只是colors.slice(). 您还想查看如何随机化（洗牌）一个 JavaScript 数组？关于如何有效地为您的描述获取随机颜色 - 甚至有些答案不会改变输入。

import { colors } from '../assets/colors';
import { shuffle } from '…';
const randomColors = shuffle(colors.slice());
console.assert(descriptions.length <= randomColors.length);
for (const [i, description] of descriptions.entries())
  description.color = randomColors[i];