JavaScript-for循环for in、for of、forEach、map等遍历使用示例

遍历类型

Javascript遍历类型：while、do while、for循环、for in、for of、forEach、map、扩展运算符…

while

let deArray = ["sd", 45, "test", 6];
let atIndex = 0;

while (atIndex < deArray.length) {
    
    
    console.log("第" + (atIndex + 1) + "项", deArray[atIndex]);
    atIndex++;
}

在这里插入图片描述

do while

let deArray = ["sd", 45, "test", 6];
let atIndex = 0;

do {
    
    
    console.log("第" + (atIndex + 1) + "项", deArray[atIndex]);
    atIndex++;
} while (atIndex < deArray.length);

在这里插入图片描述
while与do while无甚区别。

for循环

let deArray = ["sd", 45, "test", 6];

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

在这里插入图片描述

for in

let deArray = ["sd", 45, "test", 6];

for (let index in deArray) {
    
    
    console.log(index, deArray[index]);
}

在这里插入图片描述
如上，let index in deArray里index是被遍历的数组每一项的索引。

注：使用for in 循环遍历dom节点，获取到意外的结果。
以下是使用原生web方式。

<div class="banner-item">1<img class="banner-item-img" src="./image/item-1.jpg" alt=""></div>
<div class="banner-item">2<img class="banner-item-img" src="./image/item-2.jpg" alt=""></div>
<div class="banner-item">3<img class="banner-item-img" src="./image/item-3.jpg" alt=""></div>
<div class="banner-item">4<img class="banner-item-img" src="./image/item-4.jpg" alt=""></div>
<div class="banner-item">5<img class="banner-item-img" src="./image/item-5.jpg" alt=""></div>

let bannerArray = window.document.getElementsByClassName("banner-item");
for (let item in bannerArray) {
    
    
    console.log(bannerArray[item]);
}

在这里插入图片描述
for in 貌似是吧原生dom节点上所有的属性都遍历了出来，显然，有些东西并不是我们在遍历的场景下需要的。

for of

// 无索引
let deArray = ["sd", 45, "test", 6];

for (let item of deArray) {
    
    
    console.log(item);
}

在这里插入图片描述
对map和set遍历

const myMap = new Map();

myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

console.log(myMap);
for (const [key, value] of myMap) {
    
    
    console.log(key, value);
}

在这里插入图片描述
for of遍历原生dom节点

let bannerArray = window.document.getElementsByClassName("banner-item");

for (let item of bannerArray) {
    
    
    console.log(item);
}

在这里插入图片描述
结果与通常for循环的结果一致，不像for in循环遍历出其他内容。

forEach

forEach与常规的循环遍历使用方式不一致，需传入一个函数

let deArray = ["sd", 45, "test", 6];

deArray.forEach(element => console.log(element));

在这里插入图片描述
带键名键值

let deArray = ["sd", 45, "test", 6];

deArray.forEach((element, index) => console.log(index, element));

在这里插入图片描述
forEach遍历原生dom节点，forEach无法直接遍历原生dom节点，会提示“.forEach is not a function”

想使用forEach遍历原生dom节点需通过.call方式借用

let bannerArray = window.document.getElementsByClassName("banner-item");

Array.prototype.forEach.call(bannerArray, element => {
    
    
    console.log(element);
});

在这里插入图片描述
结果与通常for循环的结果一致。

map遍历

map遍历与forEach遍历的使用方式基本类似

let deArray = ["sd", 45, "test", 6];

deArray.map(ele => console.log(ele));
deArray.map((element, index) => console.log(index, element));

在这里插入图片描述
Map遍历原生dom节点与forEach用法一致。

let bannerArray = window.document.getElementsByClassName("banner-item");

Array.prototype.map.call(bannerArray, element => {
    
    
    console.log(element);
})

在这里插入图片描述
结果与通常for循环的结果一致。

扩展运算符…

扩展运算符…是es6出的规范，与数组相关。

let deArray = ["sd", 45, "test", 6];

console.log(...deArray);

在这里插入图片描述
通过[]对结果进行包裹，可以形成数组。

let deArray = ["sd", 45, "test", 6];

console.log([...deArray]);

在这里插入图片描述
…遍历原生dom节点

let bannerArray = window.document.getElementsByClassName("banner-item");

console.log(...bannerArray);

在这里插入图片描述

结果并无二致。
看如下：

let bannerArray = window.document.getElementsByClassName("banner-item");

console.log("原先dom数组", bannerArray);
console.log("借助...生成的dom数组", [...bannerArray]);
console.log("两者是否还相等？", [...bannerArray] == bannerArray);

在这里插入图片描述
从结果可以看出，通过…再组成的dom数组已不是原本的dom数组。