javascript - 为什么 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 .