一. for循环的几种遍历方式

我们先来看下for循环的4种不同遍历方式：

const arr = [10,20,30,40,50];

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

arr.forEach((num,index)=> {
    console.log(num,index)
});

for (const key in arr) {
    if (Object.hasOwnProperty.call(arr, key)) {
        console.log(arr[key])
    }
}

for (const num of arr) {
    console.log(num)
}

接下来就从几个不同的方面来说下这四种打印方式的区别。

1.1 遍历的目标不一样

遍历的目标：

普通的for循环：每层遍历需要通过下标来获取数组元素。
forEach：每层遍历可以直接拿到数组元素的值以及对应的下标。
for-in：每层遍历需要根据数组对象的键，来获得对应的值。
for-of：没层遍历可以直接拿到数组元素的值。

我们来细说一下for-in方式，我们看下下面这段代码打印出什么东西。

// 数组就是一个对象
const arr = [10, 22, 33, 44, 55];
// 对象可以通过.xxx的方式直接赋值一个属性
// 如果是普通的数组元素，那么对应的key就是数组的下标。
for (const key in arr) {
    if (Object.hasOwnProperty.call(arr, key)) {
        console.log('Key: ' + key, ', Value: ' + arr[key])
    }
}

结果如下：
在这里插入图片描述

1.2 空属性的遍历

const arr = [10, , 55];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
console.log('*********************************************')
arr.forEach(num => {
    console.log(num)
});
console.log('*********************************************')
for (const key in arr) {
    if (Object.hasOwnProperty.call(arr, key)) {
        console.log(arr[key])
    }
}
console.log('*********************************************')
for (const num of arr) {
    console.log(num)
}

输出结果如下：
在这里插入图片描述
结论如下：

会跳过空值：普通的for循环，for-of。
不会跳过空值： forEach、for-in。

1.3 异步的调用

我们先来写个简单的异步函数：

async function asyncMethod(num) {
    setTimeout(() => {
        console.log('hello')
    }, 1000);
    return num
}

我们来看下下面的案例：

for循环调用案例：

const arr = [1, 2, 3];

async function test() {
    const list = [];
    for (let i = 0; i < arr.length; i++) {
        const num = await asyncMethod(arr[i]);
        list.push(num);
    }
    console.log(list);
    return list;
}
{
    (async () => {
        await test();
    })()
}

结果如下：
在这里插入图片描述

forEach案例：

const arr = [1, 2, 3];

async function test2() {
    const list = [];
    arr.forEach(async (num) => {
        const res = await asyncMethod(num);
        list.push(res);
    })
    console.log(list);
    return list;
}

{
    (async () => {
        await test2();
    })()
}

在这里插入图片描述

for-in案例：

const arr = [1, 2, 3];

async function test3() {
    const list = [];
    for (const key in arr) {
        const num = await asyncMethod(arr[key]);
        list.push(num);
    }
    console.log(list);
    return list;
}

{
    (async () => {
        await test3();
    })()
}

结果如下：
在这里插入图片描述

for-of案例：

const arr = [1, 2, 3];

async function test4() {
    const list = [];
    for (const num of arr) {
        const res = await asyncMethod(num);
        list.push(res);
    }
    console.log(list);
    return list;
}

{
    (async () => {
        await test4();
    })()
}

结果如下：
在这里插入图片描述

可看出，只有forEach这种写法，在同一个异步函数体内，无法同步获取到异步结果。 意思就是：

async function test(){
	arr.forEach(async () => {
        const 异步任务结果= await 异步任务();
    })
    这里想拿到上面forEach循环里面做的异步结果是不行的
    doSomething()
}

但是，如果在函数题外面获取异步结果，例如：

async function test2() {
    const list = [];
    arr.forEach(async (num) => {
        const res = await asyncMethod(num);
        list.push(res);
    })
    return list;
}

{
    (async () => {
        const list = await test2();
        console.log(list)
    })()
}