Question

我通过一个回调函数得到两个值（字符串），假设这两个值是a和b，所以现在我将这些值压入数组。当我console.log这个数组时，只有当我通过单击箭头符号扩展数组时，它才会显示这些值。当我尝试访问索引值时，它说未定义。所以我猜有一个问题函数在调用吗？

funcOuter() {
    let newList =[];
    this.calledFunc(function (param) {
        newList.push(param);
    });
    console.log(newList[1]);
}

实际输出：

未定义

预期输出：

123.234.556

Answer 1

如果您使用angular 2+，为什么具有回调功能，我认为这是一个解决方案。

export class AchievementComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  async funcOuter() {
    let newList =[];
    const param = await this.funcInner();
    newList.push(param);
  }

  funInner() {
    return new Promise((resolve, reject)=>{
      this.calledFunc((param)=>{
         resolve(param);
      })
    })
  }

}

Answer 2

最好是可视化代码执行：

堆栈 S

堆 H

排队 Q

在执行时，您的funcOuter被置于 S

分配，函数调用和日志也是如此：

S ：funcOuter，let newList =[];

分配得到执行...

S ：funcOuter，this.calledFunc(callback);

函数被执行...

S ：funcOuter，this.calledFunc(callback);，calledFunc inner block

内部阻止和异步完成

S ：funcOuter，console.log(newList[1])，

Q ：possible async calls

日志已完成：

S ：funcOuter，

Q ：possible async calls

外部完成：

S ：

Q ：possible async calls

堆栈从Q中填充：

S ：callback，

Q ：possibly more async calls

执行推送：

S ：callback，push

等等;） Event Loop

因此将代码更改为：

funcOuter() {
    let newList =[];
    this.calledFunc(function (param) {
        newList.push(param);
        newList[1] && console.log(newList[1]);
    });

}

应该给出预期的结果。

数组中有值，但无法访问它们，这可能是什么问题？

2 个答案: