注:本文为 《 JavaScript 完全手册(2018版) 》第21节,你可以查看该手册的完整目录。
JavaScript提供了许多迭代循环的方法。本节通过一个小例子和主要属性解释现代 JavaScript 中的所有各种循环方法。
for
const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i]) //value console.log(i) //index }
- 您可以使用
break
中断for
循环 - 您可以使用
continue
快速进入到for
循环的下一次迭代
forEach
在ES5中引入。给定一个数组,您可以使用 list.forEach()
迭代其属性:
const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item) //value console.log(index) //index }) //index is optional list.forEach(item => console.log(item))
不幸的是,你无法中断 forEach
循环。
do…while
const list = ['a', 'b', 'c'] let i = 0 do { console.log(list[i]) //value console.log(i) //index i = i + 1 } while (i < list.length)
可以通过 break
中断 do...while
循环:
do { if (something) break } while (true)
你可以使用 continue
跳转到下一个迭代:
do { if (something) continue //do something else } while (true)
while
const list = ['a', 'b', 'c'] let i = 0 while (i < list.length) { console.log(list[i]) //value console.log(i) //index i = i + 1 }
您可以使用 break
中断 while
循环:
while (true) { if (something) break }
你可以使用 continue
跳转到下一个迭代:
while (true) { if (something) continue //do something else }
while
与do...while
的区别在于 do...while
至少执行一次循环。
for…in
迭代对象所有可枚举属性。
for (let property in object) { console.log(property) //property name console.log(object[property]) //property value }
for…of
ES2015 中引入了 for...of
循环,它结合了 forEach
的简洁性,并且for...of
循环具有可以中断循环特性:
// 迭代值 for (const value of ['a', 'b', 'c']) { console.log(value) //value } //使用 `entries()`,获取索引 for (const [index, value] of ['a', 'b', 'c'].entries()) { console.log(index) //index console.log(value) //value }
注意使用 const
。这个循环在每次迭代都创建了一个新的作用域,所以我们可以安全的使用它替代 let
。
for…in vs for…of
和 for...in
不同的是:
for...of
迭代属性值for...in
迭代属性名
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂