Jadual Kandungan
介绍
for
forEach
do...while
while
for...in
for...of
for...in VS FOR...OF
Rumah hujung hadapan web tutorial js js中有几种循环方式?js中七种循环方式的介绍(附代码)

js中有几种循环方式?js中七种循环方式的介绍(附代码)

Aug 22, 2018 pm 05:37 PM
css html javascript

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

JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代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
}
Salin selepas log masuk
  • 您可以使用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))
Salin selepas log masuk
不过需要注意的是你无法摆脱这个循环。

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)
Salin selepas log masuk

您可以使用break中断while循环:

do {
  if (something) break
} while (true)
Salin selepas log masuk

你可以使用continue跳转到下一个迭代:

do {
  if (something) continue

  //do something else
} while (true)
Salin selepas log masuk

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
}
Salin selepas log masuk

您可以使用break中断while循环:

while (true) {
  if (something) break
}
Salin selepas log masuk

你可以使用continue跳转到下一个迭代:

while (true) {
  if (something) continue

  //do something else
}
Salin selepas log masuk

与do...while的区别在于do...while总是至少执行一次循环。

for...in

迭代对象的所有可枚举属性,给出属性名称。

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}
Salin selepas log masuk

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
}
Salin selepas log masuk

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

for...in VS FOR...OF

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

  • for...of 迭代属性值

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

相关推荐:

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

理解JS事件循环_javascript技巧

Atas ialah kandungan terperinci js中有几种循环方式?js中七种循环方式的介绍(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Jadual Bersarang dalam HTML

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Sempadan Jadual dalam HTML

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

HTML jidar-kiri

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Susun Atur Jadual HTML

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Memindahkan Teks dalam HTML

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Senarai Tertib HTML

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Butang onclick HTML

See all articles