vue中for循环作用域问题处理方式

最近在一个需求开发中，遇到作用域问题导致了疯狂报错，需求是需要在一个数组中找到typeName为生活权益N选1的对象，将其中resourceList中所有对象的expenseId拼接起来作为入参进行接口调用，如果调用返回成功则设置该对象的isReceive为0

rightsList列表格式：

"rightsList": [
      {
        "typeName": "互联网权益N选1",
        "isReceive": '1',
        "resourceList": [
          {
            "expenseId": "ZY",
          },
          {
            "expenseId": "ZY",
          }
        ]
      },
      {
        "typeName": "生活权益N选1",
        "isReceive": '1',
        "resourceList": [
          {
            "expenseId": "ZY",
          },
          {
            "expenseId": "ZY",
          }
        ]
      }
    ]

这里由于需要遍历查找typeName，并为当前对象的isReceive赋值，所有将接口调用写在了for循环中，当接口调用成功将值赋给了this.rightList[i],但运行后一直报错没有isReceive的属性

问题

由于这里使用的var初始化i变量，并没有块作用域，使用for循环进行i的递增，而接口回调是异步操作，当接口调用完成后对this.rightList[i]进行赋值时，i的值已经递增到了this.rightList.length,所以取不到isReceive属性

解决

1.不在循环中执行接口调用

循环查出typeName为“生活权益N选1”的下标值，在接口调用完成后直接赋值（已实践）

2.不使用var

使用let关键字，let作为es6的方法有块作用域

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。