JavaScript 中的循环(Loops) – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 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
}

whiledo...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 迭代属性名

如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(1) 打赏
未经允许不得转载:WEB前端开发 » JavaScript 中的循环(Loops) – JavaScript 完全手册(2018版)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏