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

Question

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

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

实际输出：

未定义

预期输出：

123.234.556

Answer 1

最好是可视化代码执行：

堆栈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])，

问：possible async calls

日志完成：

S：funcOuter,

问：possible async calls

外部完成：

S：

问：possible async calls

堆栈从 Q 中填充：

S：callback,

问：possibly more async calls

push 被执行：

S：callback，push

等等;) Event Loop

所以把你的代码改成：

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

}

应该给出预期的结果。

Answer 2

如果你使用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);
      })
    })
  }

}