Конвертировать функцию стрелки ES6 в ES5

Question

Я нашел функцию, которую могу использовать в проекте Leaflet, над которым я работаю. Функция написана на ES6 и прекрасно работает как в Firefox, так и в Chrome. Тем не менее, мне нужно ориентироваться и на IE. В моем исследовании я обнаружил, что IE в настоящее время не поддерживает функцию ES6 Arrow. Я также обнаружил, что если функция ES6 была преобразована в ES5, она будет работать в IE. В течение нескольких дней я пытался преобразовать следующую функцию в ES5, но безуспешно. Некоторые из решений, которые я попробовал, были найдены здесь. Можете ли вы посмотреть на мой сценарий и сообщить, что я делаю неправильно. Кроме того, в чем выгода ES6 в любом случае; короче сценарий? Заранее спасибо.

Вот рабочий скрипт ES6:

points.map((p, i) => L.marker(p).bindPopup(`marker${'<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>'  + pointData[i].discrip +  "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"+ pointData[i].popup +"'   title='" + pointData[i].discrip + " '  href='graphic/"+ pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`))
.forEach(function(marker) {
    map.addLayer(marker);
    oms.addMarker(marker);
});

Вот моя лучшая попытка / угадать без радости.

points.map(function(p, i) {
L.marker(p).bindPopup(`marker${'<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>'  + pointData[i].discrip +  "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"+ pointData[i].popup +"'   title='" + pointData[i].discrip + " '  href='graphic/"+ pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`)})
.forEach(function(marker) {
map.addLayer(marker);
oms.addMarker(marker);
});

Answer 1

Если у вас есть код ES6 +, который вы хотите сделать совместимым для ES5, для передачи синтаксиса , вы можете сделать это автоматически с помощью транспилятора, например Babel . Подключение вашего кода дает такой результат:

points.map(function (p, i) {
  return L.marker(p).bindPopup("marker" + ('<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>' + pointData[i].discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + pointData[i].popup + "'   title='" + pointData[i].discrip + " '  href='graphic/" + pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"));
}).forEach(function (marker) {
  map.addLayer(marker);
  oms.addMarker(marker);
});

Вы также должны были перенести литерал шаблона - объявите строки и объедините их с + вместо использования синтаксиса ${}. Кроме того, вам необходимо return L.marker... от обратного вызова .map.

Обратите внимание, что это передает только синтаксис , а не методы - если вы используете методы ES6 + (например, Array.prototype.includes), Babel не будет достаточно - вам либо потребуется изменить код вручную, чтобы использовать метод ES5 (например, indexOf), или, что еще лучше, включить полифилл ( пример ) для определения методов ES6 + на клиентах, просматривающих вашу страницу.

Answer 2

Если функция со стрелкой просто возвращает одну строку кода, вы можете опустить скобки оператора и ключевое слово return.Это заставляет функцию стрелки возвращать оператор.

Итак, просто добавьте оператор return, и он будет работать

для получения дополнительной информации: https://codeburst.io/javascript-understand-arrow-function-syntax-ab4081bba85b