Syntaxfehler in der Filterfunktion mit AngularJS/JavaScript

Question

Ich habe einen Fehler bei der Verwendung der Methode filter in AngularJS/Javascript. Hier ist mein Code:

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

ich die Störung erhalten auf dem ersten Zeile:

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

Es funktioniert in Google Chrome, aber nicht in IE oder Safari-Browser. Warum ist das so und wie kann ich das beheben?

Answer 1

Pfeilfunktionen erlauben entweder die Verwendung eines Ausdrucks oder eines Blocks als ihren Körper.Übergeben Sie einen Ausdruck

In ES5:

versuchen auf diese Weise

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

Geworben von: How to use ES6 Fat Arrow to .filter() an array of objects

Answer 2

Problem

Dies ist wegen der Pfeil-Funktionen, die eine neue Funktion in ECMAScript 2015 (auch bekannt als ES6) sind. Da viele ES6-Funktionen nicht in allen Browsern implementiert wurden, variiert die Zulässigkeit der neuen Syntax zwischen Browsern. Ein paar gute Ressourcen sind die compatibility table for ES2015 (ES6) features und die MDN documentation for arrow functions. Beide umreißen, welche Versionen von Browsern was unterstützen.

Aus der Tabelle wir folgendes zu beachten:

• Internet Explorer tut nicht diese Funktion unterstützen.
• Safari> = 10 unterstützt diese Funktion.
• Chrome> = 45 unterstützt diese Funktion.
• Firefox> = 22 unterstützt diese Funktion.
• Opera> = 32 diese Funktion unterstützt

So Pfeil Funktionen in Ihrem Fall haben die Arbeit an Chrome, wie sie in der Version des Browsers implementiert wurden Sie verwendet, aber nicht Safari und IE, weil sie zu waren alt und waren bei einer Version, die das Feature nicht unterstützt oder das Feature überhaupt nicht unterstützt.

---

Lösungen

Sie haben zwei Möglichkeiten. Einer ist leichter und der andere erfordert ein bisschen mehr Arbeit.

1) Verwenden Sie stattdessen function. Dies erfordert etwas mehr Arbeit, um das Verhalten der Pfeilfunktion this zu erreichen, wird aber jetzt einfacher zu verwenden sein. In diesem Fall spielt der Kontext der Pfeilfunktion this (oder deren Fehlen) keine Rolle. Hier ein Beispiel:

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) Verwendung so etwas wie Babel, die ein Transpiler ist. Das bedeutet, dass der Code in eine andere Version umgewandelt wird. In diesem Fall können wir Ihren ES6-Code mit Pfeilfunktionen in normalen ES5-Code (das normale JavaScript, das wir kennen) transformieren, der von allen Browsern unterstützt wird. Sie können ihre Installationsanweisungen in dem obigen Link folgen.