JavaScript for…of循环

“for…of”循环用于遍历可迭代对象。可迭代对象可以是数组、集合、映射、参数对象等。它通过执行自定义迭代来执行每个属性值的javascript语句。

在ES6中，引入了一个新的for…of语句，可以遍历可迭代对象，例如：

创建数组、字符串、映射、集合等可迭代对象。
参数和NodeList是类似数组的对象的示例。
用户创建的实现迭代器协议的对象。

语法

以下语法显示了带有输入参数的javascript的”for…of”循环。

for (variable_name of iterable_objects) {
   //  javascript code
}

参数：

variable_name： 变量名称用于迭代值和以输出形式显示对象。该变量可以在javascript标签中使用let、var和const关键字。
iterable_objects： 它包含数组、集合、映射和数据作为参数。这个数据集将作为输出显示。

返回：

循环显示数组、集合或映射的数据。换句话说，可迭代对象的值将作为输出显示。

JavaScript for…of循环与数组

数组数据使用javascript函数来处理数值和字符串值。

示例

这些示例展示了使用数组数据和可迭代对象的javascript中的”for…of”循环。

示例1： 给定的示例展示了基本的for…of循环与数组值。我们可以看到console.log()函数用于显示输出值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays iterable data in the console tab </p>
<script>
var marks = [41, 69, 52, 81, 75, 31, 15, 67];
console.log("JavaScript for...of  loop");
let i = 1;
for(const tut of marks) {   
  console.log(tut);
}
</script>
</body>
</html>

输出

给定的图像显示一个可迭代对象值作为输出。

JavaScript for...of循环

示例2： 给定的示例展示了使用数组值进行基本循环的for…of循环。我们可以看到console.log()函数来显示输出值。我们可以对数组值进行乘法运算。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var marks = [41, 69, 52, 81, 75, 31, 15, 67];
console.log("JavaScript for...of  loop");
for(let tut of marks) {
 var mark = tut * 3;
  console.log(mark+ " = " +tut+ " * 3");
}
</script>
</body>
</html>

输出

给定的图像显示了一个可以迭代的对象值作为输出。

JavaScript for...of循环

示例3： 给出的示例展示了使用数组的“for…of”循环的文本值。我们可以在console.log()函数中看到输出。在这里，我们可以通过数据的索引值来展示数组数据。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
let things = ['Earth', 'Sky', 'Water', 'Space'];
console.log("JavaScript for...of  loop");
for (const [index, thing] of things.entries()) {
    console.log(` ${thing} is at index$ {index}`);
}
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象值作为输出。

JavaScript for...of循环

JavaScript for…of循环和字符串

该字符串与变量一起显示，并使用JavaScript循环按字符索引进行迭代。

示例

该示例使用JavaScript的”for…of”循环与字符串值一起操作。

示例1： 给定的示例显示了带有字符串值的基本for…of循环。我们可以看到console.log()函数来显示输出值。在这里，我们可以看到索引值以及整个字符串对象数据及其迭代。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
var tutorial = 'Javatpoint';
console.log("JavaScript for...of  loop");
for(var tut of tutorial) {  
   console.log(tut); 
}
for(var tuts of tutorial) { 
   console.log(tutorial);
}
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象的值作为输出。

JavaScript for...of循环

示例2:

下面的示例展示了使用单个变量和多个值的for…of循环。在这里，我们可以获取变量数据的索引值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
console.log("JavaScript for...of  loop");
const students = [
    {student: 'John',mark: 31},
    {student: 'Jane',mark: 42},
    {student: 'David',mark: 35},
    {student: 'Peter',mark: 29},
];
let total = 0;
for (const {mark} of students) {
    total += mark;
    console.log(`Marks:  ${mark}`); } console.log(`Total Marks:$ {total}`); 
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象的值作为输出。

JavaScript for...of循环

JavaScript中使用set的”for…of”循环

set类似于数组，但使用set方法与变量一起使用。我们可以使用不同的值，例如数字，字符串等。

示例

该示例使用javascript中的set值操作”for…of”循环。

示例1： 给定的示例显示了使用set值的for…of循环。在这里，我们可以看到数字值与整个set变量及其迭代。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
console.log("JavaScript for...of  loop with Set value.");
// define Set variable with numerical values 
const set_variable = new Set([24, 43, 11, 28, 36]);
// iterate the Set values
for (let x of set_variable) {
    console.log(x);
}
   console.log(set_variable);
</script>
</body>
</html>

输出

给定的图像显示输出为可迭代对象的值。

JavaScript for...of循环

示例2： 给定的示例展示了带有设置值的for…of循环。在这里，我们可以看到字符串值与整个设置变量及其迭代。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
console.log("JavaScript for...of  loop with Set value.");
// define Set variable with text values 
const set_variable = new Set (['good', 'values', 'come', 'data', 'javascript']);
// iterate the Set values
for (let x of set_variable) {
    console.log(x);
}
   console.log(set_variable);
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象作为输出。

JavaScript for...of循环

JavaScript中使用map的”for…of”循环

map是一个键值对数据的集合。我们可以使用不同类型的值，如数字、字符串等。

示例

这个示例使用了JavaScript中的”for…of”循环来遍历map的值。给定的示例展示了”for…of”循环遍历map值的过程。在这里，我们可以看到数值与整个集合变量及其迭代一起展示出来。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
console.log("JavaScript for...of  loop with Map value.");
// define Map variable with values 
const map_variable = new Map();
// inserting elements with map
map_variable.set('name', 'Robin');
map_variable.set('age', '21');
map_variable.set('city', 'Delhi');
map_variable.set('Country', 'India');
// iterate the Map values
for (let [keys, values] of map_variable) {
    console.log(keys + '- ' + values);
  }
for (let index of map_variable) {
    console.log(map_variable);
}
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象作为输出值。

JavaScript for...of循环

JavaScript中使用用户定义的迭代器的”for…of”循环

用户定义的迭代器手动创建迭代器对象，并使用JavaScript的”for…of”循环。

示例

该示例使用JavaScript中的”for…of”循环操作map值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
console.log("JavaScript for...of  loop with User Defined iterator.");
// creating an iterable object
const iterableVar = {
// iterator method
[Symbol.iterator]() {
let condVar = 4;
return {
next() {
condVar++;
if (condVar === 5) {
return { value: '5', done: false};
}
else if (condVar === 6) {
return { value: '6', done: false};
}
else if (condVar === 7) {
return { value: '7', done: false};
}
else if (condVar === 8) {
return { value: '8', done: false};
}
return { value: '', done: true };
}
}
}
}
for (const vals of iterableVar) {
console.log(vals);
}
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象的值作为输出。

JavaScript for...of循环

JavaScript中的“for…of”循环与生成器

生成器是一个简单的迭代器，用于创建迭代器对象并在JavaScript中使用“for…of”循环。

生成器被用作函数，并与可迭代对象放置在一起。

示例

该示例使用JavaScript操作生成器值的“for…of”循环。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
 Javascript loop displays object data using the loop 
<script>
console.log("JavaScript for...of  loop with Generator.");
// creating an iterable object
// generator function
function* generatorForFunction() {
yield 20;
yield 40;
yield 60;
}
const object_var = generatorForFunction();
// iteration using generator object
for (let value_index of object_var) {
console.log("Original Value:");
console.log(value_index);
console.log("Additio of the "+value_index+ " with 5");
console.log(value_index + 5);
}
</script>
</body>
</html>

输出

给定的图像显示了一个可迭代对象值作为输出。

JavaScript for...of循环

在JavaScript中for…of和for…in循环的区别

以下表格显示了”for…of”循环和”for…in”循环之间的区别。

For…of循环	For…in循环
使用可迭代对象遍历值时有效。	使用可迭代对象遍历键时有效。
不用于遍历对象的可迭代对象值。	用于遍历对象的可迭代对象值。