在 [x] 个元素上循环 javascript 函数答案

【问题标题】：looping javascript function on [x] number of elements在 [x] 个元素上循环 javascript 函数
【发布时间】：2017-03-25 08:43:16
【问题描述】：

function openAll() {
  document.getElementsByTagName("details")[4].setAttribute("open", "true");
  document.getElementsByTagName("details")[5].setAttribute("open", "true");
  document.getElementsByTagName("details")[6].setAttribute("open", "true"); 
}

我想我想扩展所有 details 标签，所以我在这里按照 zer00ne 的回答：Expanding all details tags。效果很好，但显然我需要跳过一些标签。 Javascript 循环让我发疯。如何重构上面的代码，使其以非愚蠢的方式运行？我需要从 4 点到 27 点。提前致谢。

【问题讨论】：

等等，所以你之前问过基本上同样的事情，你的原始问题有一个for 循环，答案显示了Array.from(details).forEach(... 的情况，所以如果这个答案对你不起作用，你为什么不跟进而不是问另一个问题？
解决方案已经在你之前的问题中了。

标签： javascript loops

【解决方案1】：

使用for 循环。

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 4; i <= 27; i++){
    elems[i].setAttribute("open", "true");
  }
}

【讨论】：

.getElementsByTagName("details") 首先在一个变量中，对吧？然后循环？
您只需调用一次 getElementsByTagName 即可进一步改进。

【解决方案2】：

步骤分解：

1) 获取所有 <details> 元素的类数组对象：
2) 从类数组对象中获取一个_actual_ 数组。获取给定索引范围的数组子集
3) 运行过滤数组，适当设置open 属性。

ES6 版本：

function openAll() { 
  Array.from(document.getElementsByTagName("details"))
    .slice(4, 27)
    .forEach(detail => detail.setAttribute("open", "true"));
}

ES 5.1 版本：

function openAll() { 
  [].slice.call(document.getElementsByTagName("details"), 4, 27)
    .forEach(function(detail){
      detail.setAttribute("open", "true");
    })
}

【讨论】：

您的过滤器正在重新实现.slice()。
@squint：谢谢你，看起来有点复杂。我已对其进行了修改以反映您的建议。

【解决方案3】：

您可以借用Array#slice 来获取类似对象的数组，并仅获取您需要更改的项目。

function openAll() {
    Array.prototype.slice.call(document.getElementsByTagName("details"), 4, 27).forEach(el => el.setAttribute("open", "true"));
}

ES5

function openAll() {
    Array.prototype.slice.call(document.getElementsByTagName("details"), 4, 27).forEach(function (el) {
        el.setAttribute("open", "true");
    });
}

【讨论】：

如果你打算使用箭头函数，不妨使用其他 ES6 构造，让你避免 Array.prototype.slice.call(，如 Array.from 或在数组文字中传播语法，或 for-of循环。
我认为你的函数每次迭代都会为文档全局变量调用全局、全局、全局、范围链。最好参考一次文档？
@RonRoyston，它调用document.getElementsByTagName的结果，这是一个类似对象的数组，只过滤需要的对象。

【解决方案4】：

这是一个有效的答案。

var doc = document;
var details = doc.getElementsByTagName("details");
for (var i = 0; i < details.length; i++) {

   if(i > 2 && i < 7){
     details[i].setAttribute("open", "true");
   }

}

<details>
<summary>Copyright 1.</summary>
<p> - by asdfasdf. All Rights Reserved.</p>
<p>All asdlkh alskdjhf al kadfh lahdfkjh</p>
</details>
<details>
<summary>Copyright 2.</summary>
<p> - by lkjhlkjh. All Rights Reserved.</p>
<p>All asfiuyhoiuasdiufbha askjdfgh,j</p>
</details>
<details>
<summary>Copyright 3.</summary>
<p> - by chgfchgfc. All Rights Reserved.</p>
<p>All hlkasfhlkjasdfh.</p>
</details>
<details>
<summary>Copyright 4.</summary>
<p> - by asdfasdf. All Rights Reserved.</p>
<p>All asdlkh alskdjhf al kadfh lahdfkjh</p>
</details>
<details>
<summary>Copyright 5.</summary>
<p> - by lkjhlkjh. All Rights Reserved.</p>
<p>All asfiuyhoiuasdiufbha askjdfgh,j</p>
</details>
<details>
<summary>Copyright 6.</summary>
<p> - by chgfchgfc. All Rights Reserved.</p>
<p>All hlkasfhlkjasdfh.</p>
</details>
<details>
<summary>Copyright 7.</summary>
<p> - by asdfasdf. All Rights Reserved.</p>
<p>All asdlkh alskdjhf al kadfh lahdfkjh</p>
</details>
<details>
<summary>Copyright 8.</summary>
<p> - by lkjhlkjh. All Rights Reserved.</p>
<p>All asfiuyhoiuasdiufbha askjdfgh,j</p>
</details>
<details>
<summary>Copyright 9.</summary>
<p> - by chgfchgfc. All Rights Reserved.</p>
<p>All hlkasfhlkjasdfh.</p>
</details>

【讨论】：

从 3 开始，而不是 0，浪费了从 0 开始的 3 个循环
if... 处的循环短路。此外，参考文档（作为 var doc）仅用于性能。
在做任何有用的事情之前，你仍然会增加一个值并检查 3 次，最好从 3 开始。
我不知道为什么if 条件会比for 条件更好。而且您从不使用doc，但如果您使用了，我不知道为什么会有所作为。
if 语句上没有右括号，if 主体的大括号末尾的右括号不正确，if 语句本身不正确，右手覆盖左手因为它是 OR 而不是 AND 语句。答案很差。