javascript - 带有对象数组的 IE11 探针(适用于 Firefox 和 Chrome)

Question

这个问题已经有答案了:

Internet Explorer 11 JavaScript Let Statement (1 个回答)

已关闭 3 年前。

我正在动态创建一个像这样的对象数组:

let span = document.createElement('span')

span.classList.add('animated')
span.classList.add('char')

span.textContent = (char.match(/'|\.|\!|\?| |\,|\.|\;|\:|\./)) ? char  : '\ '

chars.push({
    char: char,
    span: span,
    solved: span.textContent === '\ ' ? false : true
 })

稍后，当我尝试迭代数组并访问元素时，如下所示:

chars[i].span.classList.add('high-light')

我收到以下错误:

Unable to get property 'span' of undefined or null reference

为什么？

完整代码可在此处获取:https://github.com/sickdyd/secret-sentence

Answer 1

问题出在这里:

for (let i = 0; i < chars.length; i++) {
  // ...
  setTimeout(function() {
    chars[i].span.classList.add('high-light')

这是 IE11 中的一个错误。使用 let 语法声明的变量在 ES2015 中正式引入，而 IE11 则在 2013 年发布——虽然遇到 let 时不会抛出语法错误，但它不符合规范。具体来说，在 IE11 中使用 let 声明的变量不会获得 block 作用域 - 相反，它们具有函数作用域，就像 var 一样，所以到最后在循环中，i 等于 chars.length，并且 chars[chars.length] 为 undefined，因此尝试引用 chars[i].span 将引发错误。

我建议避免使用 for 循环并使用 forEach 来代替，这将解决问题并让您避免跟踪索引:

chars.forEach(function(char) {
  // ...
  setTimeout(function() {
    char.span.classList.add('high-light')
    // ...
    // instead of referencing chars[i], reference char

您还可以使用主closure inside loops例如，虽然它很丑陋:

for (let i = 0; i < chars.length; i++) {
  (function(i) {
    // now, there will be a separate `i` argument for every iteration
    // ...
    setTimeout(function() {
      chars[i].span.classList.add('high-light')
      // ...
  })(i);
}

您还可以考虑自动将代码转译为与 Babel 兼容的 ES5 .