Ошибка синтаксиса в функции фильтра с помощью AngularJS/JavaScript

Question

У меня есть ошибка при использовании метода filter в AngularJS/Javascript. Вот мой код:

var temp = []; 
$scope.mulImage = $scope.mulImage.filter((x, i) => { 
    if(temp.indexOf(x.filename) < 0) { 
     temp.push(x.filename); 
     return true; 
    } 
    return false; 
}) 

Я получаю сообщение об ошибке в первой строке:

$scope.mulImage=$scope.mulImage.filter((x, i)=> { 

Он работает в Google Chrome, но не в IE или Safari браузеры. Почему это так и как я могу это исправить?

Answer 1

Функции стрелок позволяют использовать выражение или блок как свое тело.Переходя выражение

В ES5:

попробовать этот способ

var temp=[]; 
$scope.mulImage=$scope.mulImage.filter(function(x) { 
    if (temp.indexOf(x.filename) < 0) { 
     temp.push(x.filename); 
     return true; 
    } 
    return false; 
}) 

, перешедший из: How to use ES6 Fat Arrow to .filter() an array of objects

Answer 2

Проблема

Это из-за стрелками функций, которые являются новой функцией в ECMAScript 2015 (также известный как ES6). Поскольку многие функции ES6 не были реализованы во всех браузерах, учет нового синтаксиса варьируется в разных браузерах. Несколько хороших ресурсов - compatibility table for ES2015 (ES6) features и MDN documentation for arrow functions. Оба указывают, какие версии браузеров поддерживают.

Из таблицы мы наблюдаем следующее:

• Internet Explorer делает не поддерживает эту функцию.
• Safari> = 10 поддерживает эту функцию.
• Chrome> = 45 поддерживает эту функцию.
• Firefox> = 22 поддерживает эту функцию.
• Opera> = 32 поддерживает эту функцию

Итак, стрелка функция в вашем случае сделала работу над Chrome, как они были реализованы в версии браузера вы используете, но не Safari и IE, потому что они были слишком старые и находились в версии, которая не поддерживала эту функцию или просто не поддерживала эту функцию в первую очередь.

---

Solutions

У вас есть два варианта. Один проще, а другой требует немного больше работы.

1) Просто используйте function. Для этого потребуется еще одна работа по достижению поведения функции стрелки this, но ее будет проще использовать прямо сейчас. В этом случае контекст (или его отсутствие) функции функции стрелки не имеет значения. Вот пример:

var temp = []; 
$scope.mulImage = $scope.mulImage.filter(function(x, i) { 
    if(temp.indexOf(x.filename) < 0) { 
     temp.push(x.filename); 
     return true; 
    } 
    return false; 
}) 

2) использовать что-то вроде Babel который является transpiler. Это означает, что он преобразует код в другую версию. В этом случае мы можем сделать так, чтобы он преобразовывал ваш код ES6 с функциями стрелок в обычный код ES5 (обычный JavaScript, который мы знаем), который поддерживается всеми браузерами. Вы можете следовать инструкциям по их установке в приведенной выше ссылке.