JavaScript的几种循环方式

简介: JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性目录:forforEachdo...whilewhilefor...infor...offor...in vs for...of介绍JavaScript提供了许多迭代循环的方法。

JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性

目录:

  • for
  • forEach
  • do...while
  • while
  • for...in
  • for...of
  • for...in vs for...of

介绍

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))
不过需要注意的是你无法摆脱这个循环。

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中断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
}

与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循环,它结合了forEach的简洁性和破解能力:


//iterate over the value
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}

//get the index as well, using `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 迭代属性名称

原文地址:https://segmentfault.com/a/1190000016110909

相关文章
|
4天前
|
JavaScript 前端开发 安全
JavaScript中的循环控制:while、do-while与for详解
【4月更文挑战第7天】本文探讨JavaScript的三种主要循环结构:while、do-while和for。while循环在满足条件时执行代码块,注意避免无限循环;do-while循环至少执行一次,适合先执行后判断的场景;for循环结合初始化、条件和迭代,适合遍历。理解每种循环的特点和适用场景,结合编程技巧,如使用break和continue,选择合适的循环方式,能提升代码效率和可读性。记得关注循环性能和避免不必要的计算。
20 0
|
4天前
|
JavaScript
在循环内错误使用函数定义(js的问题)
在循环内错误使用函数定义(js的问题)
13 0
|
4天前
|
JavaScript
JS使用循环求100内奇数之和
JS使用循环求100内奇数之和
18 1
|
4天前
|
JavaScript 前端开发
JS——while 循环和 do while 循环:究竟有什么区别?
JS——while 循环和 do while 循环:究竟有什么区别?
25 1
|
4天前
|
JavaScript 前端开发
【面试题】在JS循环中使用await会怎么样?
【面试题】在JS循环中使用await会怎么样?
|
2天前
|
JavaScript 前端开发
比较JavaScript中的for...in和for...of循环
比较JavaScript中的for...in和for...of循环
|
4天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
21 1
|
4天前
|
JavaScript 前端开发
JavaScript 条件循环语句(for 循环)
JavaScript 条件循环语句(for 循环)
|
4天前
|
前端开发 JavaScript 开发者
遍历指南:JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
遍历指南:JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
22 3
|
4天前
|
JavaScript 索引
JS 几种循环遍历
JS 几种循环遍历
9 0
JS 几种循环遍历