作为基于@Ibu(当前接受且完全有效)答案的更“最新”的方法,您可以forEach
在 JavaScript 中使用该方法,如下所示:
let select_elem = document.createElement('select');
langArray.forEach((element, index) => {
let option_elem = document.createElement('option');
// Add index to option_elem
option_elem.value = index;
// Add element HTML
option_elem.textContent = element;
// Append option_elem to select_elem
select_elem.appendChild(option_elem);
});
使用forEach
方法跟踪它自己的索引,这意味着您不需要手动跟踪您的索引(使用类似的东西var i=0; [...] i++
)并且 - 我认为 - 比for
循环更整洁,更易于维护。毕竟,您不需要在循环外创建任何变量,也不需要手动增加这些变量,因此,如果索引变量(例如,var i
)在其他地方使用(例如,如果您有循环内循环)。
应该注意的是,此建议是在上下文中提出的 - 最终将存在for
循环何时是最佳选择以及何时循环是最佳选择的上下文forEach
。由于我个人优先考虑可维护性而不是速度,因此默认情况下我会选择forEach
循环。但这并不是说它是正确或唯一正确的答案。始终,始终,始终考虑您的个人使用要求,而不是 Internet 上任何人的建议。
我也换innerHTML
了textContent
。最终,选项中的内容将始终是文本(您不能将 HTML 添加到选项中),因此使用textContent
更能描述您最终要做的事情。并且textContent
比innerHTML
不解析输入的数据性能更高。事实上,基准测试表明,只需更改innerHTML
为textContent
就可以将性能提高 x2.5 以上。
因此这很可能是更好的性能和更高的可维护性对于那些阅读你的代码的未来。在这种情况下,与for
循环不同,我认为不使用textContent
over没有任何好处innerHTML
。
表现
需要注意的一件事是for-in
循环比forEach
循环更高效。尽管这有点微不足道(尤其是考虑到上下文),但在我看来,您应该始终将可维护性置于单纯的速度之上……除非性能是您所做工作的重要标准(例如,如果您要迭代 1000 多次值定期并遇到瓶颈)。不过,正如老话说的那样,“过早的优化是万恶之源”。
最终,JS 的维护者将努力提高最常用结构的性能,并且在大多数情况下,性能损失可以忽略不计,并且随着设备变得更强大和解析器不断优化,性能可能会随着时间的推移而减少。
然而,一个不容易维护的应用程序的性能确实可以非常高。并且只会上升,因为随着时间的推移,可维护性差会导致更多的错误被引入。现在将循环减少 0.002 毫秒不会对未来产生任何明显影响。未来的开发人员试图为元素添加<strong>
标签,<option>
因为他们阅读innerHTML = ...
并假设他们可以添加 HTML将对未来产生影响。
旧浏览器的旁注
该forEach
方法适用于所有常绿浏览器,但不适用于 IE11 或更低版本。为此,您需要使用 polyfill 或使用Babel 之类的服务将代码编译为 ES6 之前的格式。
对于旧版浏览器,您可能还需要将let
关键字更改var
为。该let
关键字在 IE11 中确实有效,但它有许多问题。但是,如果您不需要对旧浏览器的支持,那么使用关键字let
和const
是很好的习惯。