首页 >web前端 >js教程 >js中几种不同循环的介绍(附代码)

js中几种不同循环的介绍(附代码)

不言
不言原创
2018-08-27 11:34:361596浏览

本篇文章给大家带来的内容是关于js中几种不同循环的介绍(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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 = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
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 = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
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 = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
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 [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]) {
  console.log(value) //value
}

//get the index as well, using `entries()`
for (const [index, value] of [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].entries()) {
  console.log(index) //index
  console.log(value) //value
}

注意使用const。此循环在每次迭代中创建一个新范围,因此我们可以安全地使用它而不是let。

for...in VS FOR...OF

与for...in的区别在于:

  • for...of 迭代属性值

  • for...in 迭代属性名称

相关推荐:

JS的for while循环

js的for in循环和java里foreach循环的区别分析

以上是js中几种不同循环的介绍(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn