在 ES12 中,新的循环控制语句 for..in..of..
被引入,它实现了许多前面版本所没有的功能,使得循环控制更为灵活。
基本语法
for..in..of..
语法格式如下:
-- -------------------- ---- ------- --- --------- -- ------- - ---- ----- -- -- -------- - --- --------- -- --------- - ---- ----- -- -- -------- -
在 for..in..
中,variable
表示属性名称,object
表示对象。
在 for..of..
中,variable
表示变量名,iterable
表示可迭代对象,如数组。
for..in..
循环
for..in..
语句用于循环遍历对象属性,语法格式如下:
const obj = {a: 10, b: "Hello", c: true}; for (let key in obj) { console.log(`${key}: ${obj[key]}`); }
在这个例子中,我们定义了一个对象 obj
,通过 for..in..
循环遍历了对象所有的属性。输出结果为:
a: 10 b: Hello c: true
for..of..
循环
for..of..
语句用于循环遍历可迭代对象,如数组,语法格式如下:
const arr = [10, 20, 30]; for (let val of arr) { console.log(val); }
在这个例子中,我们定义了一个数组 arr
,通过 for..of..
循环遍历了数组中所有的元素。输出结果为:
10 20 30
for await..of..
循环
for await..of..
语句用于循环遍历异步可迭代对象,异步可迭代对象是异步生成器或 promise。语法格式如下:
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------------- - - ------------------------ - ------ - -- -- ----- ------ - -- ------- - -- - ------ ------- --------- ----- ------- - ------ ------ ------ - -- - -- --- ----- ------ --- -- -------------- - ----------------- - - ------ -- -- - ----- ------------ -----
在这个例子中,我们定义了一个异步可迭代对象 asyncIterable
,该异步可迭代对象包含一个异步迭代器,每次迭代可以返回一个 promise。通过 for await..of..
循环遍历了异步迭代器中所有的元素。输出结果为:
0 1 2
注意事项
for..in..
循环遍历对象属于枚举,如果对象属性是不可枚举的,则不会被遍历到。for..of..
循环遍历的是可迭代对象中的值,而不是索引。for..in..
循环遍历对象属性的顺序是不确定的,而数组在for..of..
循环中是按照顺序遍历的。
总结
for..in..of..
循环控制语句使得循环控制更为灵活,可以循环遍历对象属性、数组元素等,同时还可以处理异步可迭代对象。学习使用 for..in..of..
循环控制语句,对于提高前端开发效率具有重要的指导意义。
示例代码
-- -------------------- ---- ------- ----- --- - --- --- -- -------- -- ------ --- ---- --- -- ---- - -------------------- -------------- - ----- --- - ---- --- ---- --- ---- --- -- ---- - ----------------- - ----- -------- ----------- - ----- ------------- - - ------------------------ - ------ - -- -- ----- ------ - -- ------- - -- - ------ ------- --------- ----- ------- - ------ ------ ------ - -- - -- --- ----- ------ --- -- -------------- - ----------------- - - ------ -- -- - ----- ------------ -----
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/664a9469d3423812e4981e63