JavaScript for…in循环

JavaScript的for…in循环用于遍历一个对象的属性。如果我们想在调试期间显示对象的内容，这将是一个很好的工具。

for…in循环只遍历那些在对象中设置为“true”的可枚举属性的键。对象的主要值包括四个特性，例如 值，可枚举性，可写性和可配置性。

当可枚举性设置为“true”时，我们可以遍历该属性。在JavaScript中，对象的属性元素子节中包含了这四个重要属性的信息。

语法

以下是在JavaScript中使用对象进行循环操作的语法。

for(Let num be in objects1) {
// Displays each key in object value
console.log(num);
}

重要信息

要迭代非数组项，请使用for-in循环。虽然for-in循环也可以与数组一起使用，但通常不建议这样做。应该使用for循环来迭代数组。
原型链中更深层的对象的特性也可以通过for-in循环进行迭代。
属性迭代的顺序可能与对象中指定的顺序不同。

示例

给定的示例展示了针对多种数据类型的JavaScript“for…in”循环。

示例1： 给定的示例展示了带有值的基本for…in循环。我们可以使用 console.log() 函数来显示控制台输出。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var tutorial = [81, 31, 15, 41, 52, 75, 69, 67];
let i = 1;
for(var tut in tutorial) {  
   console.log("values[" +i+ "]: " +tutorial[tut]);
    i++;
}
</script>
</body>
</html>

输出

给定的图像显示数据或对象值作为输出。

JavaScript for...in循环

示例2： 给出的示例展示了基本的循环…in在循环中的使用方式。我们可以通过使用console.log()函数查看字符串值作为输出数组数据。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p>
<b id="displayval"> </b> 
</p>
<script>
var tutorial = 'Javatpoint';
let result = '';
for(var tut in tutorial) {  
   result += tut + ' : ' + tutorial[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

输出

给定的图像显示了数据或对象的值作为输出。

JavaScript for...in循环

示例3： 给定的示例展示了带有值的基本的for…in循环。我们可以使用console.log()函数来显示输出结果。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p>
<b id="displayval"> </b> 
</p>
<script>
var tutorial = [23, 'JavaScript', 12.43, 'javatpoint.com', -12];
let result = '';
for(var tut in tutorial) {  
   result += tut + ' : ' + tutorial[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

输出

给定的图像显示为输出的数据或对象值。

JavaScript for...in循环

示例4： 给定的示例展示了带有值的基本for…in循环。我们可以使用console.log()函数来显示控制台输出。我们可以在控制台日志中显示键和值。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var tutorial = {
    website:  'Javatpoint',
    language:  'JavaScript',
    learn: 'online',
    user: 'Student'
};
for(var tut in tutorial) {
    console.log(tut + ':' + tutorial[tut]);
}
</script>
</body>
</html>

输出

控制台展示数据或对象值作为输出。

JavaScript for...in循环

示例5：

下面的示例展示了带有值的基本for…in循环示例。我们可以看到使用innerHtml方法显示输出的值和键。”tut”是对象数据的键，而”tutorial[tut]”表示对象的值。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p id="displayval"></p>
<script>
var tutorial = {
    website: 'javatpoint.com',
    language: 'JavaScript programming language',
    learn: 'online mode',
    user: 'Student and developer'
};
let result = '';
for(var tut in tutorial) {
    result += tut + ':' + tutorial[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

输出

给定的图像显示数据或对象值作为输出。

JavaScript for...in循环

示例6： “for…in” 语句在遍历对象属性时，沿着原型链向上移动，并迭代继承的属性，这些属性是从另一个对象继承而来的。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p id="displayval"></p>
<script>
var tutorial = {
    website: 'javatpoint.com',
    language: 'JavaScript programming language',
    learn: 'online mode',
    user: 'Student'
};
let result = '';
var learning = Object.create(tutorial);
learning.rate = 5;
learning.work = 'developer';
for(var tut in learning) {
    result += tut + ':' + learning[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

输出

给定的图像显示数据或对象值作为输出。

JavaScript for...in循环