js for 循环中的值为最后一个值

本文详细解析了JavaScript中for循环中使用var定义变量i时,为何在函数中输出i的值会出现意料之外的结果。通过案例展示了由于作用域问题,导致a[6]()执行时输出10而非6。文章提出了解决方案,包括使用自执行函数和ES6的let关键字,强调了块级作用域的重要性,并提供了两种方法的示例代码。
摘要由CSDN通过智能技术生成

正常情况

for (var i=0;i<10;i++){
    console.log(i);
}

在这里插入图片描述
在看看容易让人产生疑惑的情况

var a = [];
for (var i = 0; i < 10; i++) {
  // 作用域a
  a[i] = function () {
    // 作用域b
    console.log(i);
  };
}
a[6](); // 10

在这里插入图片描述
没有像我们预想的出现6而是10。原因:for循环中头部使用var 定义变量i 时,它和循环体中的i 的作用域不是同级作用域,因此当for循环执行完毕后,并不会给每个循环都储存相对应的i的值。(注意,这种情况只有在循环体执行完时才会发生,直接在循环体中写同步执行的数据,是可以拿到对应的i的值的。也就是这种情况一般发生在循环体中存在执行函数,这个函数的触发执行时机是在for循环执行完毕后)

解决办法

1. 自执行函数解决法(针对老浏览器)**

var a = [];
for (var i = 0; i < 10; i++) {
  (function(j){
      a[j] = function () {
          // 作用域b
          console.log(j);
      };
  })(i) 
}
a[6]();//6

在这里插入图片描述
解决的思想就是 既然每轮循环的值无法储存,那我们就在每轮循环执行时,执行一个自执行的匿名函数,并且把此轮的i当做参数传递进去。这样就创建了一个新的作用域,新的作用域中会我们使用变量j来储存i的值。每轮循环都会创建自执行函数,因此j作用域是互相独立的.

2. let(针对 手机端,node 等支持es6的环境)

var a = [];
for (let i = 0; i < 10; i++) {
  // 作用域a
  a[i] = function () {
    // 作用域b
    console.log(i);
  };
}
a[6](); // 6

image
简单粗暴,es6的let就是为支持块级作用域而生,因此。。。。。

转载:https://www.jianshu.com/p/67626203d6d4

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值