如何在 JavaScript 中初始化对象数组

作者

在 JavaScript 中初始化一个对象数组

How to Initialize an Array of Objects in JavaScript

初始化一个对象数组：

  1. 使用Array()构造函数创建一个包含 N 个空元素的数组。
  2. 将数组和map()函数传递给Array.from()方法。
  3. 在函数的每次迭代中返回一个对象map()。
索引.js
const arr = Array.from(Array(2), () => ({
  key: 'value',
}));

// 👇️ [ { key: 'value' }, { key: 'value' } ]
console.log(arr);

您还可以访问函数中的索引map()。

索引.js
const arr = Array.from(Array(2), (_, index) => ({
  id: index,
  key: 'value',
}));

// 👇️ [ { id: 0, key: 'value' }, { id: 1, key: 'value' } ]
console.log(arr);

Array.from方法从提供的可迭代对象创建一个新数组。

我们传递给方法的第二个参数是一个map()函数。

数组中的每个元素都会调用该函数。

在每次迭代中，我们返回一个对象。

该Array.from()方法返回一个新数组，其中包含函数返回的元素
map。

使用对象初始化数组fill()

这是一个三步过程：

  1. 使用Array()构造函数创建一个包含 N 个空元素的数组。
  2. 使用该Array.fill()方法用值填充数组undefined。
  3. 使用该map()方法用对象填充数组。
索引.js
const arr = new Array(2).fill().map(() => ({
  key: 'value',
}));

console.log(arr); // 👉️ [ { key: 'value' }, { key: 'value' } ]

您还可以在使用该方法时访问索引Array.map()。

索引.js
const arr1 = new Array(2).fill().map((_, index) => ({
  id: index,
}));

console.log(arr1); // 👉️ [ { id: 0 }, { id: 1 } ]

我们传递给Array()构造函数的参数

是数组应该包含的空元素的数量。

索引.js
console.log(new Array(2)); // 👉️ [ , ]

构造函数Array()将数组的长度设置为提供的值。

索引.js
const arr = [];
arr.length = 2;

console.log(arr); // 👉️ [ , ]

我们使用Array.fill
方法用值填充数组undefined。

索引.js
// 👇️ [ undefined, undefined ]
console.log(new Array(2).fill());

这是必要的，因为该map()函数不会迭代空元素。

我们可以将一个对象直接传递给Array.fill()方法来用对象填充数组。

但是，请注意数组中的对象将存储相同的引用。

索引.js
const arr = new Array(2).fill({key: 'value'});

// 👇️ [{key: 'value'}, {key: 'value'}]
console.log(arr);

arr[0].anotherKey = 'another value';

// [
//   { key: 'value', anotherKey: 'another value' },
//   { key: 'value', anotherKey: 'another value' }
// ]
console.log(arr);

这就是为什么我们使用该Array.map()方法遍历数组并用存储在内存中不同位置的对象填充它。

或者，您可以使用简单的for循环。

使用 for 循环初始化一个对象数组

这是一个三步过程：

  1. 使用Array()构造函数创建一个包含 N 个空元素的数组。
  2. 使用for循环遍历数组。
  3. 为每个元素分配一个对象。
索引.js
const arr = new Array(2);

for (let i = 0; i < arr.length; i++) {
  arr[i] = {key: 'value'};
}

// 👇️ [{key: 'value'}, {key: 'value'}]
console.log(arr);

We used the Array() constructor to create an array of 2 empty elements.

The for loop allows us to iterate over the array and assign an object to each
empty element.

We can’t use the Array.forEach() method to iterate over the array because it
skips empty elements.

Instead, we used the array’s length in a basic for loop.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: