为什么 Chrome 让我在这个循环中声明我的变量？

Question

这种行为很奇怪。我有一个看起来像这样的对象数组：

myObjects = [
  { 
    name: 'List 1', 
    invitations: [
      { email: 'ralph@ralph.com', stamp: '1234' },
      { email: 'mike@mike.com', stamp: '4576' }
    ]
  },
  { 
    name: 'List 2', 
    invitations: [
      { email: 'steve@steve.com', stamp: '5678' },
      { email: 'bob@bob.com', stamp: '6789' }
    ]
  },
]

我需要过滤邀请数组包含某个电子邮件地址的对象，所以我正在这样做，当我在 Sublime Text 中测试它时效果很好：

filteredObjects = myObjects.filter(obj => { 
  for (invitation of obj.invitations) {
    if (invitation.email == 'bob@bob.com') return true;
  }
});

// [ { name: 'List 2', invitations: [ [Object], [Object] ] } ]

但是，如果我尝试在 Chrome 中运行它，它会让我出于某种原因在 for 循环中声明变量（注意 for 循环中添加的“var”）：

filteredObjects = myObjects.filter(obj => { 
  for (var invitation of obj.invitations) {
    if (invitation.email == 'bob@bob.com') return true;
  }
});

如果我不声明变量（使用“var”），我的 Chrome 控制台中会出现错误：

Uncaught (in promise) ReferenceError: invitation is not defined

我想了解为什么会发生这种情况，以及是否有更好的方法来编写我的过滤器。

Answer 1

如果 Chrome 强制您声明变量 invitation，那是因为它阻止了隐式或意外的全局变量，那是因为您的代码位于 Chrome 认为 strict 模式的部分中。您必须向我们展示更大的代码上下文，以便我们准确辨别为什么它将代码视为strict 模式。

有一些浏览器的实现（例如 Firefox 中箭头函数的早期版本）在 strict 模式下自动生成箭头函数体，尽管这不是标准的一部分。或者，您的过滤器语句所在的这个更大的代码上下文可能由于某些其他原因而处于严格模式。

这是一件非常好的事情。所有变量都应在预期范围内明确声明。让您使用意外、隐式或自动全局变量编写代码是意外创建和使用冲突全局变量的秘诀。它会导致难以追踪甚至可能是间歇性行为的错误（尤其是涉及异步操作时）。

将自动执行严格模式：

1. 手动将代码声明为strict 模式且'use strict'; 位于函数范围顶部的任何位置。

2. 使用 ES6 Class 语法声明的方法会自动处于 strict 模式。

您可以在this article on MDN 和this article on using Class 中查看严格模式效果的完整列表。