Ошибка: объект не поддерживает свойство или метод "включает" код IE - PullRequest
Новая
       18

Ошибка: объект не поддерживает свойство или метод "включает" код IE

0 голосов
/ 06 января 2019

Попытка перехода на IndexOf, но это не работает, как я ожидаю. Я преобразовал свой код из ES6 в ES5, но он не отображается так, как следует сравнивать вывод Chrome с IE. Что еще мне не хватает? Добавлен фрагмент, содержащий код JavaScript, чтобы показать вам, что я пытаюсь сделать. Ниже не работает на IE, но работает на Chrome и Firefox. Я пытаюсь распечатать R T в Chrome и IE в двоичном формате. Все это делается с помощью JavaScript. Смотрите ниже изображения, чтобы определить проблему. Похоже, что он что-то потерял во время преобразования между ES6 -> ES5, но все еще отлично работает на Chrome. 

const mapping = {
    R: '1111111111111111111111000000111100000011110000001111111111101111111000110000110011000001101100000011',
    T: '1111111111111111111100001100000000110000000011000000001100000000110000000011000000001100000000110000'

};


// Grab the binary mapping of the letter and
// return some HTML
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) {
    const 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...
const html = processWord(wordArr);
output.insertAdjacentHTML('beforeend', html);

// ...then fade them in
showLetters(wordArr);

Приведенное ниже описание работает без синтаксических ошибок, но изображения показывают, что вывод IE отличается от chrome. Выход CHrome правильно отображает «RT» в двоичном формате 1,0. Вывод IE просто пишет в строках и не отображает его правильно. Чего мне не хватает в коде IE? Я полагаю, что это может быть что-то в этой строке, но не могу быть уверен ... вернуть memo.indexOf (index)> 1? getRandom (arr, memo): индекс;

Изображения, показывающие, что происходит в IE против Chrome:

What happens in IE seen in image below:

What happens in Chrome seen in image below

1 Ответ

0 голосов
/ 06 января 2019

IE не поддерживает Array.prototype.includes.

Напишите ваш код в IE11-совместимом виде: 

function getRandom(arr, memo) {
    const index = Math.floor(Math.random() * arr.length);
    return memo.indexOf(index) > -1 ? getRandom(arr, memo) : index;
}

Вторая проблема вашего кода - логика. Ваша функция не изменяется memo или arr и, таким образом, если memo включает arr, это вызовет бесконечный цикл рекурсии.

Если вы хотите, чтобы Babel передал вам ваш код, вам нужно использовать пакет @babel/preset-env и определить файл .babelrc в корневом каталоге вашего проекта: 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions"
      }
    ]
  ]
}

Это все равно не исправит отсутствующий Array.prototype.includes. Для этого и других отсутствующих функциональных возможностей прототипа добавьте @babel/polyfill к вашему package.json и импортируйте его в самый верх вашей точки входа Javascript.

...