前端中的循環(huán)方法
在前端開(kāi)發(fā)中,我們經(jīng)常需要使用循環(huán)來(lái)遍歷數(shù)組元素、DOM節(jié)點(diǎn)等操作。本篇文章將介紹幾種在前端中常用的循環(huán)方法。1. 使用for循環(huán)在Hbuilder創(chuàng)建一個(gè)HTML文件,然后插入一個(gè)script標(biāo)簽,
在前端開(kāi)發(fā)中,我們經(jīng)常需要使用循環(huán)來(lái)遍歷數(shù)組元素、DOM節(jié)點(diǎn)等操作。本篇文章將介紹幾種在前端中常用的循環(huán)方法。
1. 使用for循環(huán)
在Hbuilder創(chuàng)建一個(gè)HTML文件,然后插入一個(gè)script標(biāo)簽,并在標(biāo)簽中輸入以下代碼:
```javascript
var ary ["val1", "val2", "val3", "val4"];
for (var i 0; i < ary.length; i ) {
console.log(ary[i]);
}
```
打開(kāi)該頁(yè)面并查看控制臺(tái)輸出結(jié)果,即可看到數(shù)組元素被循環(huán)遍歷出來(lái)。
2. 使用while循環(huán)
同樣在script標(biāo)簽中使用while循環(huán)來(lái)遍歷數(shù)組,代碼如下:
```javascript
var ary ["while1", "while2", "while3", "while4", "while5"];
var i 0;
while (i < ary.length) {
console.log(ary[i]);
i ;
}
```
需要注意的是,與for循環(huán)不同,我們需要手動(dòng)控制變量i的值,否則可能會(huì)陷入死循環(huán)。
3. 使用do-while循環(huán)
相對(duì)于while循環(huán),do-while循環(huán)的循環(huán)體總是會(huì)至少執(zhí)行一次。代碼示例如下:
```javascript
var ary ["do-while1", "do-while2", "do-while3", "do-while4", "do-while5"];
var i 0;
do {
console.log(ary[i]);
i ;
} while (i < ary.length);
```
4. 使用for-in循環(huán)
for-in循環(huán)是for循環(huán)的增強(qiáng)版本,可以用來(lái)遍歷數(shù)組或者更多地用于遍歷對(duì)象。代碼示例如下:
4.1 遍歷數(shù)組:
```javascript
var ary ["for-in 04", "for-in 03", "for-in 02", "for-in 01"];
for (var i in ary) {
console.log(ary[i]);
}
```
4.2 遍歷對(duì)象:
```javascript
var ary {"name":"Tonk", "age":23};
for (var i in ary) {
console.log(i ":" ary[i]);
}
```
5. 使用數(shù)組的forEach()方法
我們也可以使用數(shù)組的forEach()方法來(lái)迭代數(shù)組元素,代碼示例如下:
```javascript
var ary ["for-each 04", "for-each 03", "for-each 02", "for-each 01"];
(function (i) {
console.log(i);
});
```
以上就是前端中常用的幾種循環(huán)方法,根據(jù)實(shí)際需求選擇合適的方法來(lái)進(jìn)行循環(huán)操作,可以提高開(kāi)發(fā)效率。