创建具有已知大小/性能的 Javascript 数组

Question

我已经重构了这段代码，但仍然觉得这可以写得更好（没有外部库）。有什么建议么？  // Old  const filters = [];  for (let i = 1; i < 54; i += 1) {    const currentDateDisplay = getStartDate(i, new Date().getFullYear());    filters.push({ text: currentDateDisplay, value: currentDateDisplay });  }  // New  const filters2 = [...Array(53).keys()].map((item) => ({    text: getStartDate(item, new Date().getFullYear()),    value: getStartDate(item, new Date().getFullYear()),  }));编辑：看起来有时最好使用旧的 for 循环，尤其是在性能方面。感谢您的建议。

Answer 1

我不得不同意您编写的第一个实现看起来更直观，但是，第二个方法可以用不同的方式编写。

通过第一次调用new Array(53)，您创建了一个包含 53 个元素的数组。通过然后调用.map((_, index) => {})，您可以访问索引变量（使用_，item因为它是undefined无论如何）。您不必通过传播来克隆新数组，因此只需使用此代码即可：

const filters = new Array(53).map((_, index) => ({

  text: getStartDate(index, new Date().getFullYear()),

  value: getStartDate(index, new Date().getFullYear())

}));

Answer 2

你喜欢哪种风格最终是一个品味问题。如果你更喜欢第二种——更像函数式——的风格，你可以将其简化如下：

const year = new Date().getFullYear();

const filters2 = Array.from(new Array(53), (_, i) => {

  const startDate = getStartDate(i, year);

  return {text: startDate, value: startDate};

});

它替换[...Array(53).keys()].map()为更合适Array.from的值，并且不会多次评估相同的值。这种简单情况下的性能差异可以忽略不计，您应该使用对您和您的团队更易读的代码。

Answer 3

你想用一个初始值来初始化一个数组吗？这就是Array.fill()的用例

const filters2 = new Array(53).fill({

  text: getStartDate(0, new Date().getFullYear()),

  value: getStartDate(0, new Date().getFullYear())

});

Answer 4

我更喜欢您的old变体，因为它对我来说更具可读性。在我看来，代码应该更具可读性而不是更短。

此外，根据测试，old 变体更快：

const filters = [];

for (let i = 1; i < 54; i += 1) {

    const currentDateDisplay = getStartDate(i, new Date().getFullYear());

    filters.push({ text: currentDateDisplay, value: currentDateDisplay });

}