为什么for循环中的可观察变量工作方式不同？

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);
         });
     }
  }));
 }
}

订阅中的

购物车是可观察的。

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;
}

这个有角度的应用程序从firebase数据库中获取了购物车，如果我运行它，我会得到奇怪的结果。请看截图。产品对象似乎被花椰菜的最后一个键覆盖。

但是，如果我切换回“ console.log（key）”的注释。效果就像下面的屏幕截图一样。

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

如果将let关键字替换为var，则无论console.log（key）如何，products对象仅具有花椰菜。

请让我知道。

谢谢

Answer 1

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

console.log(value);
// baz

由于setTimeout在for-of循环外被调用，因此每次使用相同的value，value在循环外（块作用域）存在。

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循环的每次迭代中，都会在value function's scope中创建新的_loop。