[giwuf]

Всем привет. Обнаружил, что функция map из es6 не работает в ie11.

Подскажите, пожалуйста, как ее переписать под ie11 так, чтобы она заработала или может быть использовать какой polyfill для этого?

Код:

jQuery.noConflict();
jQuery(document).ready(function($) {

  const keys = ["hard", "soft"];

  document.head.appendChild((style => {
    style.textContent = keys.map(key => `
			#main-slider-wrapper .slider-key button[data-key="${key}"] {
				background-image:
					url(img/${key}-key-slider.png)
			}

			#main-slider-wrapper[data-key="${key}"] .slider img[src*="${key}-key"] {
				opacity: 1;
			}

			#main-slider-wrapper[data-key="${key}"] .slider-key button[data-key="${key}"] {
				filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
				-webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
			}
		`).join("\n\n");
    return style;
  })(document.createElement("style")));

  document.addEventListener("click", ({
    target
  }) => {
    if (!target.matches(
        `${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
      )) return;

    const root = target.closest("#main-slider-wrapper");
    const key = target.dataset.key;
    const index = keys.indexOf(key);
    root.dataset.key = key;

    for (const arrow of root.querySelectorAll(".slick-arrow")) {
      arrow.dataset.key = keys[
        (keys.length + (
          arrow.classList.contains("left") ? -1 : 1
        ) + index) % keys.length
      ];
    }
  });

  for (const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
    e.click();
});