首页 > 编程笔记 > JavaScript笔记
阅读:23
JavaScript for of循环的用法(附带实例)
ES6 引入了 for...of 循环,作为遍历所有数据结构的统一方法。
For...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、字符串以及 Generator 对象。
For...of 循环的语法如下:
在每次循环中,变量 variable 将依次赋值为 iterable 中的每个元素,并执行一次 code block 中的代码。
1) 遍历数组:
2) 遍历字符串:
3) 遍历 Set:
4) 遍历 Map:
5) 历类似数组的对象:
6) 在 for...of 循环中,可以使用 break 和 continue 关键字来控制循环的执行流程:
注意,for...of 循环只能用于遍历实现了迭代器协议的对象。如果尝试使用 for...of 循环遍历一个不支持迭代器协议的对象,会导致 TypeError 错误。
在编写 JavaScript 代码时,遍历语法包括 for...of、for、forEach 和 for...in 等,不仅需要熟练掌握语言本身的语法和特性,还需要了解现代 Web 应用的开发需求和技术趋势,结合具体的应用场景和业务需求,选择合适的编程模式和工具,以提高代码的质量和效率,同时也为自己的职业发展打下坚实的基础。
For...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、字符串以及 Generator 对象。
For...of 循环的语法如下:
for (variable of iterable) { // code block to be executed }其中,variable 是一个变量名,表示循环中每次迭代时的当前值;iterable 是一个可迭代对象,表示要遍历的数据结构。
在每次循环中,变量 variable 将依次赋值为 iterable 中的每个元素,并执行一次 code block 中的代码。
1) 遍历数组:
const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue }
2) 遍历字符串:
const str = "Hello"; for (const char of str) { console.log(char); // h e l l l o }
3) 遍历 Set:
const set = new Set([1, 2, 3]); for (const element of set) { console.log(element); // 1 2 3 }
4) 遍历 Map:
const map = new Map([ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"], ]); for (const [key, value] of map) { console.log(key + " = " + value); //key1 = value1 key2 = value2 key3 = value3 }遍历 Map 结构时,是按照各个成员被添加进数据结构的顺序,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。
5) 历类似数组的对象:
// arguments 对象 function printArgs() { for (let x of arguments) { console.log(x); } } printArgs('a', 'b'); // 'a' 'b' // DOM NodeList 对象 let paras = document.querySelectorAll("p"); for (let p of paras) { p.classList.add("test"); }
6) 在 for...of 循环中,可以使用 break 和 continue 关键字来控制循环的执行流程:
const arr2 = [1, 2, 3, 4, 5]; for (const element of arr2) { if (element === 3) { console.log("Found it!"); break; } console.log(element); // 1 2 Found it! }
注意,for...of 循环只能用于遍历实现了迭代器协议的对象。如果尝试使用 for...of 循环遍历一个不支持迭代器协议的对象,会导致 TypeError 错误。
在编写 JavaScript 代码时,遍历语法包括 for...of、for、forEach 和 for...in 等,不仅需要熟练掌握语言本身的语法和特性,还需要了解现代 Web 应用的开发需求和技术趋势,结合具体的应用场景和业务需求,选择合适的编程模式和工具,以提高代码的质量和效率,同时也为自己的职业发展打下坚实的基础。