Question

我有下面的Java脚本，该脚本在Chrome，Firefox中似乎可以正常工作，但在IE中不起作用。我相信问题出在array.prototype.includes与array.prototype.indexof，但是不确定如何解决。

我相信这是导致问题的Java脚本代码中的以下行：

返回memo.indexOf（index）> -1吗？ getRandom（arr，memo）：索引；

该代码段似乎与IE相似，因此您将看到此问题。我已将代码从ES6更改为ES5，希望可以使用，但是似乎无法正确修复动画。我的代码中使用的Java脚本和html张贴在下面，这应该清楚地指示问题。数组似乎是一个问题，但它如何循环但无法弄清楚如何使用ES5使其正确显示，因此它在所有浏览器上都兼容。

var mapping = {
  R:
    "1111111111111111111111000000111100000011110000001111111111101111111000110000110011000001101100000011",
  T:
    "1111111111111111111100001100000000110000000011000000001100000000110000000011000000001100000000110000"

};

// Grab the binary mapping of the letter and
function binaryise(letter) {
  var arr = mapping[letter].split("");
  return arr
    .map(function(char) {
      return (
        '<div class="' +
        (char === "0" ? "zero" : "one") +
        '">' +
        char +
        "</div>"
      );
    })
    .join("");
}

// For each letter in the word create a
// binary version and return it in a list-item container
function processWord(arr) {
  var items = arr
    .map(function(letter, i) {
      var binaryised = binaryise(letter);
      return (
        '\n      <li class="binaryli" data-id=' +
        i +
        '>\n        <div class="containerbinary">' +
        binaryised +
        "</div>\n      </li>\n    "
      );
    })
    .join("");
  return '<ul class="binaryul">' + items + "</ul>";
}

// Get a random number that hasn't previously appeared

function getRandom(arr, memo) {
  var index = Math.floor(Math.random() * arr.length);
  return memo.indexOf(index) > -1 ? getRandom(arr, memo) : index;
}

// Once the html has been added to the page
// (all set with opacity to 0)
// iterate over the letters turning the
// opacity of each to 1
function showLetters(arr, memo) {
  memo = memo || [];
  if (memo.length !== arr.length) {
    var index = getRandom(arr, memo);
    var letter = arr[index];
    var el = document.querySelector('[data-id="' + index + '"]');
    setTimeout(function() {
      el.classList.add("show");
      memo.push(index);
      showLetters(arr, memo);
    }, 1000);
  }
}

var wordArr = "RT".toUpperCase().split("");

// Process all the letters of the word and add them
// to the page...
var html = processWord(wordArr);
output.insertAdjacentHTML("beforeend", html);

// ...then fade them in
showLetters(wordArr);

        <section id="binary">
            <div id="contactbinary" class="containersbinary">
                <div class="row">
                    <div class="text-center">
                        <div id="output">

                        </div>
                        </div>
                    </div>

                    </div>
</section>

Answer 1

根据this link，任何版本的IE均不支持includes。

但是you can still use indexOf，因此只需测试其结果是否不为null，或者使用Babel这样的JS编译器将所有代码转换为ES5。

您可以找到自己的“ ES5ed”代码here

ES6与ES5浏览器兼容的Array.Prototype.Includes和IndexOf

1 个答案: