forEach和NodeList
这是基于W3_School示例之一的松散的：
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates forEach() function</p>
<script>
var x=Array.prototype.slice.call(document.getElementsByTagName("p"));
x.forEach(function(value, index)
{
document.write(value.innerHTML);
document.write("<br>");
});
</script>
</body>
</html>如果需要对脚本做任何改进，请告诉我。
回答 2
Code Review用户
发布于 2014-03-16 21:35:55
这个脚本的唯一目的似乎是说明如何使用Array.prototype.slice.call“成语”和forEach函数。因此，当代码的目的不是它的实际结果(这是微不足道的)时，很难进行“改进”。
代码实际所做的事情可以通过多种方式来完成，其中一些方法不会(直接)使用forEach和/或NodeList和/或slice.call。在这种情况下，这是否仍是一个改进？相反，坚持forEach等并不能为更改留出很大的空间，因为代码似乎是作为这些事情的最小示例而设计的。
我对编写任何代码犹豫不决，因为我不知道重点是什么。
这么说，
- 不要依赖W3学校(本站列出了几个原因和更好的选择)
- 避免使用
document.write()--或者睁大眼睛使用它(参见这里的原因) - 我还会避免使用
forEach来支持标准的for循环，因为浏览器中并不普遍支持forEach(参见caniuse.com)。 - 这一页的文字似乎有些混乱。是的，DOM很有用，是的，代码演示了
forEach。但是forEach不是DOM的一部分。要点是，NodeList对象是DOM对象，而不是普通数组。因此，必须通过Array.prototype.slice.call将其转换为一个。然后可以使用forEach，它是一个数组函数，但它本身与DOM无关。
阅读@PM77-1's评论后更新：
这段代码本身并没有什么问题。这是真的，
( A) for...in的行为不像它在Java中的行为，不应该在这里使用，而且
getElementsByTagName不返回“真实”数组。slice.call技巧确实是将“类似数组”的对象(不幸地发现很多)转换为真正数组的“标准”方法。一个非常有用的诀窍。
总之，代码基本上没问题。是的，可以改进，@Palacsint在他的回答中指出，但是没有什么可怕的事情发生。
但是，虽然NodeList对象不是真正的数组，但仍然可以使用常规的旧for循环：
var nodes, i;
nodes = document.getElementsByTagName("p");
for(i = 0 ; i < nodes.length ; i++) {
document.write(nodes[i].innerHTML);
document.write("<br>");
}这消除了对slice.call技巧的需求，它可以在旧浏览器(不存在forEach )上工作。
不过，一般来说，在使用DOM时，使用库消除浏览器之间令人沮丧的差异是很有用的。如今，jQuery是大山之王，您可以这样做来查找和迭代一些元素：
$("p").each(function () {
document.write(this.innerHTML);
document.write("<br>");
});(当然，jQuery也使得在不诉诸document.write的情况下进行“适当的”DOM插入很容易，但这只是为了说明)
但是，我确实认为学习JS的本质是非常明智的，而不仅仅是直接为jQuery或它的类似类运行。处理那些类似数组的事情确实是其中之一。
Code Review用户
发布于 2014-03-16 21:52:55
添加@Flambino的回答时，只需注意两个小音符：
- 不要使用
x，而是使用意图显示的名称。这个变量的目的是什么？根据这个名字。在这里，paragraphs是一个更好的名称，它解释了变量的用途，并避免了心理映射(读者/维护人员不必每次都对其进行解码)。(这只是一个小问题，每个人都有一个x的短期内存空间，但是在一个更大的项目中使用几个缩写可能会使理解代码变得非常困难。)(罗伯特·C·马丁的“清洁代码”，使用意图揭露的名字，p18；避免心理映射，p25) - W3C校验器创建了一个错误和至少一个警告。您可以通过设置一个
title和一个编码来修复这些问题： DOM测试页 <meta charset="UTF-8"> .
https://codereview.stackexchange.com/questions/44529
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号