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

时间:2017-12-14 02:42:52

标签: javascript node.js google-chrome vue.js

这种行为很奇怪。我有一个对象数组,如下所示:

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循环中添加&#34; var&#34;)< / p>

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

如果我没有声明变量(使用&#34; var&#34;),我的Chrome控制台会出错:

Uncaught (in promise) ReferenceError: invitation is not defined

我想了解为什么会发生这种情况,如果可能有更好的方法来编写我的过滤器。

1 个答案:

答案 0 :(得分:1)

如果Chrome强制您声明变量invitation,那就是因为它阻止了隐式或偶然的全局变量,这是因为您的代码位于Chrome认为strict模式的部分中。您必须向我们展示更大的代码上下文,以便我们确切地看出它将代码视为strict模式的原因。

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

这是一件非常好的事情。应在预期范围内明确声明所有变量。让您使用偶然,隐式或自动全局变量编写代码是意外创建和使用冲突的全局变量的一种方法。它很难追踪甚至可能在行为中间歇性的错误(特别是如果涉及异步操作)。

将自动执行严格模式:

  1. 将代码手动声明为strict模式,并在函数范围顶部设置'use strict';

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

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