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

【问题标题】：Create Javascript Array with known size / performance创建具有已知大小/性能的 Javascript 数组
【发布时间】：2020-08-03 23:29:07
【问题描述】：

我已经重构了这段代码，但仍然觉得这可以写得更好（没有外部库）。有什么建议？

  // 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 循环会更好，尤其是在性能方面。感谢您的建议。

【问题讨论】：

第一个比较初级，better
将getStartDate(item, new Date().getFullYear()) 保存在一个变量中，而不是重复两次
你的外部库在哪里？您的代码示例不完整。
为什么第一个例子使用getDateDisplay 而第二个没有？ getStartDate 究竟返回了什么？如果它是一个对象，它是否应该是对text 和value 属性的同一对象的共享引用？
如果您只创建处理数组内的 53 个对象，则不必担心性能。选择您更容易理解的内容，然后然后担心它会成为您应用程序的瓶颈。

标签： javascript arrays ecmascript-6 ecmascript-2016

【解决方案1】：

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

const filters2 = new Array(53).fill({
  text: getStartDate(0, new Date().getFullYear()),
  value: getStartDate(0, new Date().getFullYear())
});

【讨论】：

这不起作用，因为Array.prototype.fill 方法用于用相同的值填充数组的每个元素。从getStartDate函数中使用item（在他的例子中实际上是索引）的使用来看，每个元素应该有不同的值。

【解决方案2】：

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

通过首先调用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())
}));

【讨论】：

对于.map()，也修复了它
Array#map 不像稀疏数组那样工作。
有趣，不知道这个

【解决方案3】：

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

另外，根据测试oldvariant is faster：

const filters = [];
for (let i = 1; i < 54; i += 1) {
    const currentDateDisplay = getStartDate(i, new Date().getFullYear());
    filters.push({ text: currentDateDisplay, value: currentDateDisplay });
}

【讨论】：

是的，老派的方法还不错。

【解决方案4】：

您喜欢哪种风格最终取决于品味。如果您更喜欢第二种（更类似于函数式）的样式，您可以将其简化如下：

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，并且不会多次评估相同的值。这种简单情况下的性能差异可以忽略不计，您应该使用对您和您的团队更具可读性的代码。

【讨论】：