黑马程序员技术交流社区

标题: 解决javascript在es5下块级作用域变量的问题 [打印本页]

---

作者: 小蜀哥哥    时间: 2019-7-4 17:23
标题: 解决javascript在es5下块级作用域变量的问题
前言

ES5,中不存在代码块的作用域,如下代码所示,变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变,导致运行时输出的是最后一轮的i的值，也就是 4

  

[JavaScript] 纯文本查看 复制代码

  var a = ["a","b","c","d"]

  var b = [];
  var c = [1000,200,1300,400];

  for(var i=0;i<a.length;i++){
    var t = a;
    b.push(
      new Promise((resolve,reject)=>{
        setTimeout(()=>{
          console.log(t,i)
          resolve();
        },c)
      })
    )
  }
  Promise.all(b).then(() => {
    console.log("all");
  })

预期的结果是控制台打印出

[JavaScript] 纯文本查看 复制代码

b 1

d 3

a 0

c 2

all

但却打印出

[JavaScript] 纯文本查看 复制代码

  d 4

  d 4

  d 4

  d 4

  all

解决的办法

(1)用let变量定义替换var ES中let为 JavaScript 新增了块级作用域,下面代码中,变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量.

[JavaScript] 纯文本查看 复制代码

for(let i=0;i<a.length;i++){

    let t = a;

    b.push(

      new Promise((resolve,reject)=>{

        setTimeout(()=>{

          console.log(t,i)

          resolve();

        },c)

      })

    )

  }

(2)通过function的bind方法 JavaScript中函数是存在作用域的,函数用call()、apply()、bind()这些方法去改变this的指向。

[JavaScript] 纯文本查看 复制代码

  for(var i=0;i<a.length;i++){

    var t = a;

    b.push(

      new Promise((function(resolve,reject){

        setTimeout(()=>{

          console.log(this.t,this.i)

          resolve();

        },c)

      }).bind({t:t,i:i}))

    )

  }

(3)通过array的forEach方法 ES5为数组提供了forEach迭代方法,对数组每一项运行给定函数,这个方法没有返回值

[JavaScript] 纯文本查看 复制代码

  a.forEach((t,i)=>{

    b.push(

      new Promise((resolve,reject)=>{

        setTimeout(()=>{

          console.log(t,i)

          resolve();

        },c)

      })

    )

  })

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2