[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]
Posted infoworld
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]相关的知识，希望对你有一定的参考价值。
场景
- 在开发网页时，经常需要枚举
NodeList类型的数据，比如通过document.body.childNodes获取的, 通过DOM.querySelectorAll也能获取到NodeList对象。那么这个返回的对象除了for...i方式枚举，还有更快的方法吗？
说明
- 枚举
NodeList对象，最快的方法就是使用for...of循环语句。 它可以直接枚举出值，不需要再通过索引访问。variable每次迭代都会得到迭代对象的下一个值。variable可以用var,let,const修饰。
for (variable of iterable)
//statements
-
枚举可迭代对象，包括
Array,Map,Set,String,TypeArray,arguments对象等。它是的原理是创建一个迭代循环，调用自定义的钩子(yield xx)， 返回不同的值。 -
for...of不能枚举普通的key,value对象类型.a:"a",b:"b". -
迭代完成后，或者通过在循环体里调用
break,throw,return，生成器会(function*实例)关闭，因此不要重用生成器。 -
只迭代
可迭代对象的迭代值, 其他属性值不会迭代。
例子
<html>
<head>
<style>
.read
color: blue;
.bold
font-weight: 600;
</style>
</head>
<body>
<p id="out">for...of</p>
</body>
<script>
function print(str)
let p = document.createElement("p");
p.innerHTML = str;
document.body.append(p)
function printSingleIteratorValue(data)
for(const p of data)
print(p);
function printSinglePropertyValue(data)
for(const p in data)
print(`$p=$data[p]`);
print("1. 迭代 Map.");
let visitData = new Map([["a", 1], ["b", 2], ["c", 3]]);
for(const p of visitData)
print(`$p[0] = $p[1]`);
p[1] = 100; //p是临时变量, 不会影响原来的值。
print("-- [key,value] 形式");
for(const [key,value] of visitData)
print(`$key = $value`);
print("2. Array, TypeArray, Set 和 String");
let visitArray = [10, 20, 30];
let visitTypeArray = new Uint8Array([0x00, 0xff]);
let visitSet = new Set([1, 1, 2, 2, 3, 3]);
let visitString = "Tobey";
print("-- Array");
printSingleIteratorValue(visitArray);
print("-- TypeArray");
printSingleIteratorValue(visitTypeArray);
print("-- Set");
printSingleIteratorValue(visitSet);
print("-- String");
printSingleIteratorValue(visitString);
print("3. 函数参数arguments对象");
(function()
printSingleIteratorValue(arguments);
)(1,2,3,4);
print("4. 只枚举可迭代对象的数组迭代值, 非迭代值的属性objCustom,arrCustom,foo不迭代")
Object.prototype.objCustom = function() ;
Array.prototype.arrCustom = function() ;
let iterable = [3, 5, 7];
iterable.foo = 'hello';
printSingleIteratorValue(iterable);
print("-- for...in");
printSinglePropertyValue(iterable);
print("5. 迭代自定义生成器，break关闭生成器之后不可用!");
var gen = (function *()
yield 1;
yield 2;
yield 3;
)();
for (let o of gen)
print(o);
break;//关闭生成器
print("-- 生成器不应该重用，以下不会输出。");
for (let o of gen)
print(o);
print("6. 迭代DOM集合, NoteList对象");
let ps = document.querySelectorAll("p");
print("-- 增加字体蓝色样式");
for(let one of ps)
one.classList.add("read")
print("-- 增加粗体样式");
for(let i = 0; i<ps.length; i++)
ps[i].classList.add("bold");
</script>
</html>
输出
for...of
1. 迭代 Map.
a = 1
b = 2
c = 3
-- [key,value] 形式
a = 1
b = 2
c = 3
2. Array, TypeArray, Set 和 String
-- Array
10
20
30
-- TypeArray
0
255
-- Set
1
2
3
-- String
T
o
b
e
y
3. 函数参数arguments对象
1
2
3
4
4. 只枚举可迭代对象的数组迭代值, 非迭代值的属性objCustom,arrCustom,foo不迭代
3
5
7
-- for...in
0=3
1=5
2=7
foo=hello
arrCustom=function()
objCustom=function()
5. 迭代自定义生成器，break关闭生成器之后不可用!
1
-- 生成器不应该重用，以下不会输出。
6. 迭代DOM集合, NoteList对象
-- 增加字体蓝色样式
-- 增加粗体样式
参考
以上是关于[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]的主要内容，如果未能解决你的问题，请参考以下文章
[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]
[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]
[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]
[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]