JS中的for循环——你可能不知道的点。

提出问题

问题1:

看一段for循环的代码,大家先想一下执行结果是什么?

var arr = [2,4,6,8,10];
var arrLength = arr.length;

for (var i = 0; i < arrLength; i++) {
    setTimeout(function() {
        console.log(i);
        console.log(arr[i]);
    }, 2000);
}

问题2:

for循环中出现多个异步函数(比如ajax请求,或者node后端执行一些数据库操作或文件操作),如果想要这些异步串行变为同步应该怎么做?

问题1解决与相关讲解

结果

预期结果

0 2  1 4  2 6  3 8  4 10

运行后的结果

5 undefined  5 undefined  5 undefined  5 undefined  5 undefined

产生结果的原因

setTimeout()函数回调属于异步任务,会出现在宏任务队列中,被压到了任务队列的最后,在这段代码应该是for循环这个同步任务执行完成后才会轮到它,所以for循环在遍历过程中i不断加1,直到i判断失败一次才停止,这时候i为5,也就是说空跑了5次循环。等到了setTimeOut预定的时间后就会执行在for遍历过程中声明的5个setTimeout。所以最终运行后会出现上面的结果,与预期结果不符。

注:关于宏任务队列,同步任务等相关的问题,如果有问题,可以查看我的另一篇文章一道面试题引发的事件循环深入思考详细了解。

正确执行的解决方案

1. 闭包,立即执行函数

想要得到预期的结果,第一种办法是使用闭包,在闭包函数内部形成了局部作用域,每循环一次,形成一个自己的局部作用域,不受外部变量变化的影响。代码如下:

var arr = [2,4,6,8,10];
var arrLength = arr.length;

for (var i = 0; i < arrLength; i++) {
    (function(i) {
        setTimeout(function() {
            console.log('i是' + i);
            console.log('value是' + arr[i]);
        }, 2000);
    })(i);
}

2. let

将代码中的var改成let,let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。

代码如下:

var arr = [2,4,6,8,10];
var arrLength = arr.length;
// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
for (let i = 0; i < arrLength; i++) {
    (function(i) {
        setTimeout(function() {
            console.log('i是' + i);
            console.log('value是' + arr[i]);
        }, 2000);
    })(i);
}

问题2解决与相关讲解

for循环中使用异步,在node.js后端开发或者前端ajax请求的时候还是比较常见的。有多种解决方案

  1. 回调 callback 嵌套异步操作、再回调的方式
  2. Promise + then() 层层嵌套
  3. async和await

选择我个人认为最优秀的解决方式3async和await进行讲解。

async + await “外异内同”

例子:

如果要去将一批数据发送到服务器,只有前一批发送成功(即服务器返回成功的响应),才开始下一批数据的发送,否则终止发送。这就是一个典型的 “for 循环中存在相互依赖的异步操作” 的例子

例子对应伪代码:

async function task () {
    for (let val of [1, 2, 3, 4]) {
        // await 是要等待响应的
        let result = await send(val);
        if (!result) {
            break;
        }
    }
}
task();

伪代码中使用await之后,实现了异步变成同步的转化,只有for循环中当次对应的发送请求完成且获取结果,才会继续往下执行。

await几点说明:

  • await执行的那一行语句是同步的。
  • async函数执行后,总是返回一个promise对象,可以理解为这个函数是一个异步函数(外异)但是----------------------引用阮一峰老师书中一句话:

当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。

我对阮一峰老师的话再具体说明一下,可能有些同学还不是特别理解。实际上我们调用了await,这时候await这条语句下面的语句已经不会执行了(内同),而是先给外层async函数返回了一个promise对象,await后面对应的应该也是一个promise对象只有该对象 resolve 掉,产生结果,await 那一行代码才算真正执行完,才继续往下走。(注意:await执行之后应该是一个resolve的结果而不是promise对象了)。

node.js后端开发-await在for循环中的应用

看一段后端项目中应用await的代码:

//dayResult是一个查询到的数组
for (const item of dayResult)
    {
        //TODO 查询用户vip表 用户体验vip距离到期的用户列表
        let userIds=await db.vip.findAll({
            where:{
                experience_time:{
                    '$lte':moment().subtract(15-item.day,'day').endOf('day') ,//获取四天前都0时0分秒
                    '$gte':moment().subtract(15-item.day,'day').startOf('day') ,//获取四天前都0时0分秒
                        },
                        vip_type:0
                    },
                attributes:['user_id',Sequelize.literal(`'${item.id}' as notice_id`)],
                raw:true
            });
        userNoticeRecord=userNoticeRecord.concat(userIds)
        }

本文分享自微信公众号 - 全栈者(fullStackEngineer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

为什么C语言不会过时?

评价任何一门编程语言,都是招人骂的。 永远是这样。就像是春寒料峭的季节, 街上穿棉袄和穿单衣的擦肩而过,双方一定是同时在心里出现了两个字:“傻逼!”这个在心理学...

20810
来自专栏C语言入门到精通

基础知识 | 每日一练(135)

士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

7900
来自专栏JAVA葵花宝典

Java 里的 for (;;) 与 while (true),哪个更快?

其次,for (;;) 在Java中的来源。个人看法是喜欢用这种写法的人,追根溯源是受到C语言里的写法的影响。这些人不一定是自己以前写C习惯了这样写,而可能是间...

6510
来自专栏Linux内核及编程语言底层相关技术研究

c语言内嵌汇编代码之volatile究竟何时用

在阅读本文之前,请先阅读gcc的相关文档,确保对如何在c中使用汇编语言有个基本的认识。

7710
来自专栏Eureka伽罗的技术时光轴

Windows的APC机制

前两篇漫谈中讲到,除ntdll.dll外,在启动一个新进程运行时,PE格式DLL映像的装入和动态连接是由ntdll.dll中的函数LdrInitializeTh...

10420
来自专栏AI科技大本营的专栏

从0到1详解推荐系统中的嵌入方法,原理、算法到应用都讲明白了

作者曾在《矩阵分解推荐算法》这篇文章中提到,矩阵分解算法是一类嵌入方法,通过将用户行为矩阵分解为用户特征矩阵和标的物特征矩阵的乘积,最终将用户和标的物嵌入到低维...

12800
来自专栏前端自习课

【JS】368- 浅析JavaScript异步

一直以来都知道 JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就...

10930
来自专栏编程语言xuetang

C++的发展史

为了让小伙伴们在学习过程中,能收获更多的知识,达到真正的零基础入门和深入了解C++,老九君特地收集了有关C++发展相关的一些资料供大家查阅和学习:

8710
来自专栏C语言及其他语言

c语言编程常见错误集锦 【上】

编译程序会出错。C语言区分大小写。习惯上,符号常量名用大写,变量名用小写表示,以增加可读性。

11610
来自专栏诸葛青云的专栏

嵌入式程序开发,C语言和C++究竟应该用哪个?

在嵌入式软件程序开发中,C语言无疑是最常被使用的程序语言。不过应该明白的是,有些嵌入式硬件同时提供C语言程序编译器以及C++程序编译器,而相比于C语言,C++的...

9010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励