在这篇文章中,我们将通过不同的方式来了解循环在 JavaScript 中,当然,在示例的帮助下。所以基本上,JavaScript 中有以下几种主要的循环类型:

  • 同时

  • do-while

  • forEach()

  • 地图()

  • for-of

  • for-in

1. JavaScript for 循环

JavaScript 中的 for 循环会多次循环一段代码。

语法

for (initialCondition; condition; updateExpression) {
     // code block
}

进入全屏模式 退出全屏模式

_initialCondition_在代码块执行前执行1次,_condition_定义执行代码块的条件,_updateExpression_在代码块执行后执行。

示例

让我们遍历一系列汽车

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (let car = 0; car < cars.length; car++) {
     console.log(cars[car])
}

进入全屏模式 退出全屏模式

2. JavaScript while 循环

JavaScript 中的 while 循环在指定条件为真时循环通过代码块。

语法

while (condition) {
     // code block
}

进入全屏模式 退出全屏模式

在下面提到的这个例子中,循环中的代码将一遍又一遍地运行,只要_cars_数组的长度没有用完。

示例

让我们遍历一系列汽车

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

while (car < cars.length) {
     console.log(cars[car])
     car++
}

进入全屏模式 退出全屏模式

3. JavaScript do-while 循环

JavaScript 中的 do-while 循环也会在指定条件为真时循环一段代码。 do-while 循环与 while 循环非常相似。但唯一的区别是这个循环在我们检查语句之后检查可用的条件。因此,它是一种退出控制循环的示例。

语法

do {
     // code block
} while (condition)

进入全屏模式 退出全屏模式

示例

让我们遍历一系列汽车

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

do {
     console.log(cars[car])
     car++
} while (car < cars.length)

进入全屏模式 退出全屏模式

4. JavaScript forEach 循环

forEach 方法为数组中的每个元素调用一个函数,并且不对空元素执行该方法。

语法

array.forEach(function(currentValue, index, arr))

进入全屏模式 退出全屏模式

示例

让我们遍历一系列汽车

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

cars.forEach((car) => {
     console.log(ele)
})

进入全屏模式 退出全屏模式

5. JavaScript map 循环

JavaScript 中的 map 循环通过为每个数组元素调用一个函数来创建一个新数组。它为数组中的每个元素调用一次函数,不对空元素执行该函数,也不会更改原始数组。

语法

array.map(function(currentValue, index, arr), thisValue)

进入全屏模式 退出全屏模式

示例

让我们遍历一系列汽车

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

const newCars = cars.map((car) => {
     return car.toUpperCase()
})

进入全屏模式 退出全屏模式

6. JavaScript for-of 循环

JavaScript 中的 for-of 循环遍历数组的值。

语法

for (element of iterable) {
     // code block
}

进入全屏模式 退出全屏模式

这里,element 表示一个可迭代的对象(数组、集合、字符串等)。而 iterable 表示可迭代对象中的项目。

示例

让我们遍历一系列汽车

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (car of cars) {
     console.log(car)
}

进入全屏模式 退出全屏模式

7. JavaScript for-in 循环

JavaScript 中的 for-in 循环遍历对象的属性。

语法

for (key in object) {
     // code block
}

进入全屏模式 退出全屏模式

示例

让我们遍历一系列汽车

const cars = {1:"Mehran", 2:"GLi", 3:"Yaris", 4:"Civic", 5:"City"}

for (let carKey in cars) {
     console.log(cars[carKey])
}

进入全屏模式 退出全屏模式

for-in 循环遍历汽车对象。每次迭代都会返回一个键 carKey。 key用于访问key的value和key的值,即返回cars[carKey]。

我知道这是一篇很长的文章,但你们中的一个人觉得这一篇有趣且有帮助,请分享并给它一个💖。

Logo

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐