如何创建定义长度的预填充数组？ [复制]

Question

我正在尝试创建一个具有定义长度的数组并用空数组填充它。我已经尝试使用@stpoa 的答案here 给出的所有可能性，但我的数组行为不正确。

给定代码（为了举例，我对其进行了简化）：

const tasksArray = Array(3).fill([])
const tasksArray2 = [[], [], []]
const tasks = ['task1', 'task2']

const fillWithData = (array) => {
  tasks.forEach(task => {
    array[0].push(task)
  })
}

给我一​​个不正确的tasksArray 输出和一个明显正确的tasksArray2 硬编码

fillWithData(tasksArray) // [['task1', 'task2'], ['task1', 'task2'], ['task1', 'task2']] => not OK, duplicates values!
fillWithData(tasksArray2) // [['task1', 'task2'], [], []] => that's OK

Answer 1

在taskArray 中，您使用的[] 作为引用传递，taskArray 中的元素都引用同一个数组。

在taskArray2 中，您有三个独立的空数组[]，每个都有自己的引用。因此，您不会得到重复的值。

如果您希望以编程方式创建一个空数组数组，请使用Array.from -

const fillEmptyArrays = (count) =>
  Array.from(Array(count), _ => [])

const tasks =
  fillEmptyArrays(3)

console.log(tasks)
// [ [], [], [] ]

请不要在变量名tasksArray 中包含类型名称Array；只需将其命名为tasks。 JavaScript 是一种动态类型的语言，从长远来看，这种想法会伤害你。

Answer 2

fill 将您传递的值放在数组的每个索引处。

所以tasksArray 对同一个数组有三个引用，而tasksArray2 对三个不同数组中的每一个都有一个引用。

如果要在其中放置三个不同的数组，则需要显式创建三个数组。

你可以用计数器来接近它：

const tasksArray2 = [];
let count = 3;
while (count--) {
    tasksArray2.push([]);
}

Answer 3

您需要在数组内部获取独立的对象引用，而不是字面意义上的常量值。

通过将Array.from 与具有长度属性的对象和内置映射函数一起使用，您可以获得一个独立数组的数组。

const tasksArray = Array.from({ length: 3 }, _ => [])
const tasks = ['task1', 'task2']

const fillWithData = (array) => {
  tasks.forEach(task => {
    array[0].push(task)
  })
};

fillWithData(tasksArray);
console.log(tasksArray);