一. 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)})()
}

此时无论哪一种写法，都是能获取到完整的list的：

二. 总结

从遍历的目标来看：

for：通过数组下标获取元素。
forEach：可直接获取元素以及对应的下标。
for-in：通过数组的键获取对应的值。（value = arr.key）
for-of：可直接获取元素。

从空属性的遍历来看：数组：arr = [1 , 2, ,3]（注意有两个逗号）

for：跳过空值。
forEach：不会跳过空值，会打印出undefined。
for-in：不会跳过空值，会打印出undefined。
for-of：跳过空值。

从异步的结果的获取来看：

forEach：无法在函数体内，获取forEach里面的异步任务结果。函数体外可以。
for：可以在函数体内，获取forEach里面的异步任务结果。函数体外也可以。
for-in：可以在函数体内，获取forEach里面的异步任务结果。函数体外也可以。
for-of：可以在函数体内，获取forEach里面的异步任务结果。函数体外也可以。

NodeJs - for循环的几种遍历方式相关推荐

for 循环的三种遍历方式
例如都有个集合是product 第一种for循环 for(int i=0;i<=list.size();i++){ product pr=list.get(i); System.out.pri ...
set的三种遍历方式-----不能用for循环遍历（无序）
set的三种遍历方式,set遍历元素 list 遍历元素 http://blog.csdn.net/sunrainamazing/article/details/71577662 set遍历元素 ...
Java基础知识 21（Set集合，HashSet集合以及它的三种遍历方式（迭代器，增强for循环，forEach），LinkedHashSet集合，TreeSet集合（自然排序法，比较器排序法））
Java基础知识 21 Set集合 Set集合:一个不包含重复元素的Collection集合,元素不重复,List集合是允许元素重复的. Set接口的三个字类:HashSet(),LinkedHash ...
HashMap 的 7 种遍历方式与性能分析！(强烈推荐)
来自:Java中文社群随着 JDK 1.8 Streams API 的发布,使得 HashMap 拥有了更多的遍历的方式,但应该选择那种遍历方式?反而成了一个问题. 本文先从 HashMap 的遍历 ...
二叉树总结—建树和4种遍历方式（递归非递归）
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013497151/article/details/27967155 今天总结一下二叉树.要考离散了 ...
C++11 for区间遍历:vector几种遍历方式
近来,基本上所有现代编程语言都有一种对一个区间写for循环的便捷方式.最终,C++也有了相同的概念:你可以给循环提供一个容器,它帮你迭代. example: #include <iostream ...
HashMap 的 7 种遍历方式与性能分析！「修正篇」
这是我的第 57 篇原创文章首先,给大家说声抱歉~ 事情经过是这样子的,五一节前我发布了一篇文章<HashMap 的 7 种遍历方式与性能分析!>,但是好心的网友却发现了一个问题,他说 ...
HashMap 的 7 种遍历方式与性能分析！
随着 JDK 1.8 Streams API 的发布,使得 HashMap 拥有了更多的遍历的方式,但应该选择那种遍历方式?反而成了一个问题. 本文先从 HashMap 的遍历方法讲起,然后再从性能. ...
HashMap 的 7 种遍历方式+性能分析！
随着 JDK 1.8 Streams API 的发布,使得 HashMap 拥有了更多的遍历的方式,但应该选择那种遍历方式?反而成了一个问题. 本文先从 HashMap 的遍历方法讲起,然后再从性能. ...

NodeJs - for循环的几种遍历方式

NodeJs - for循环的几种遍历方式

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

1.1 遍历的目标不一样

1.2 空属性的遍历

1.3 异步的调用

二. 总结

NodeJs - for循环的几种遍历方式相关推荐

最新文章

热门文章