Question

我想在屏幕上显示window.document的最多10个属性。但这仍然显示了我的所有属性。这是我的代码。

<html>
 <body>
  <div id="divResult></div>
  <script>
   var text = ""; 
   for (let i in window.document){
    if(i === 10) {
    break;
   }
   text += `${i} : ${window.document[i]} <br/>`;
   } 
   document.getElementById('divResult').innerHTML = text;
  </script>
 </body>
</html>

Answer 1

如果检查i的值，您会发现它不是数字，因此永远不能等于10。这就是循环读取window.document中所有元素的原因。

要实现所需的功能，请在循环外声明并初始化var i，并使用另一个变量表示各个window.document元素，如下所示：

var text = ""; 
var i = 0;
for (let j in window.document){
    if(i == 10) {
        break;
    }
    text += `${j} : ${window.document[j]} <br />`;
    i++;
}
document.getElementById('divResult').innerHTML = text;

Answer 2

如评论中所述，这将为您提供帮助。

function populateDocDetails() {
var count = 0;
var retVal = [];
   for (let i in window.document){
    if(count === 10) {
    break;
   }
   count = count + 1;
   retVal.push({[i]:window.document[i]})
   }
   return retVal;
}

   document.getElementById('divResult').innerHTML = JSON.stringify(populateDocDetails());

  <div id="divResult"></div>

Answer 3

for (let i in window.document)执行此操作时，i将不会成为循环计数器。您正在遍历window.document对象中的每个键：

let obj = { 
  firstName: "Fred", 
  lastName: "Bloggs", 
  age: 42,
  1: "some data",
  2: "some other data"
}

for (let i in obj) {
  console.log(typeof i, i, obj[i]);
}

此外，如您所见，键是字符串，因此即使有一个名为if(i === 10)的属性，您的检查10也将永远不会成功，因为它将尝试比较"10" === 10，因为两个变量不同，该变量将始终返回false。

使用for-in循环，您需要维护一个单独的计数器。另外，您可能应该避免将i用作变量-它最常用作循环计数器，因此，如果不使用它，则会令人困惑。甚至可能是让您绊倒的原因。

var text = "";

let i = 1; //initialise the counter
for (let propertyName in window.document) {
  if (i === 11) {//stop after 10
    break;
  }
  text += `${i} : ${window.document[propertyName]} <br/>`;
  i++; //increment the counter
}
document.getElementById('divResult').innerHTML = text;

<html>

<body>
  <div id="divResult"></div>
</body>

</html>

使用插入式循环最多可容纳10个属性

3 个答案: