javascript - 为什么 for 循环中的 observables 工作方式不同？

Question

我现在正在学习 Angular 6，现在面临一个我无法理解的可观察到的问题。

请看下面我的代码。

export class ShoppingCartComponent implements OnInit {
  cart$;
  products = {};
  constructor(private shoppingCartService : ShoppingCartService, 
  public productService : ProductService) { 
  var subscription = from(this.shoppingCartService.getCart());
  subscription.subscribe(cart => cart.subscribe(shoppingcart => {
     var items = shoppingcart.items;
     console.log(shoppingcart.items);
     for(let key in items){
         console.log(key);
         this.productService.get(key).valueChanges().subscribe(product=>{
            this.products[key] = product['title'];
            console.log(product);
            console.log(this.products);
            //console.log(key);
         });
     }
  }));
 }
}

订阅中的购物车是 Observable 。

export class ShoppingCart {
    constructor(public items: ShoppingCartItem[]){ }

    get productIds(){
      return Object.keys(this.items);
    }

    get totalItemsCount(){
      let count = 0;
      for (let productId in this.items)
        count += this.items[productId].quantity;
      return count;
    }
}

export interface ShoppingCartItem{
    product : Product;
    quantity : number;
}

这个 Angular 应用程序从 firebase 数据库获取购物车，如果我运行它，我会得到奇怪的结果。请查看屏幕截图。 Products 对象似乎被最后一个键 cauliflower 覆盖。

但如果我切换回 “console.log(key)” 的评论。 它工作正常，如下图所示。

这是因为for循环中有let变量吗？

如果 let 关键字替换为 var，products 对象只有 cauliflower 而不管 console.log(key)。

请告诉我。

谢谢，

Answer 1

for(var value of ['foo', 'bar', 'baz']) {
  setTimeout(() => console.log(value), 0);
}
// baz
// baz
// baz

console.log(value);
// baz

由于在 for-of 循​​环之外调用了 setTimeout，它每次都使用相同的 value，value 存在于循环之外( block 作用域)。

let 和 const block scope变量。

使用 let 关键字，babel 将转译为:

var _arr = ['foo', 'bar', 'baz'];

var _loop = function _loop() {
      var value = _arr[_i];
      setTimeout(function () {
            return console.log(value);
      }, 0);
};

for (var _i = 0; _i < _arr.length; _i++) {
      _loop();
}

在 for-of 循​​环的每次迭代中，都会在 _loop 中创建新的 value function's scope .