使用 AngularJS/JavaScript 的过滤函数中的语法错误

Question

我在 AngularJS/Javascript 中使用 filter 方法时出错。这是我的代码：

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

问题

这是因为箭头函数，它是 ECMAScript 2015（也称为 ES6）中的一项新功能。由于许多 ES6 功能并未在所有浏览器上实现，因此新语法的允许因浏览器而异。一些好的资源是 compatibility table for ES2015 (ES6) features and the MDN documentation for arrow functions。两者都概述了哪些版本的浏览器支持哪些内容。

从 table 我们观察到以下内容：

Internet Explorer 不支持此功能。
Safari >=10 支持此功能。
Chrome >=45 支持此功能。
Firefox >= 22 支持此功能。
Opera >= 32 支持此功能

因此，您的案例中的箭头功能确实适用于 Chrome，因为它们是在您使用的浏览器版本中实现的，但不适用于 Safari 和 IE，因为它们太旧且版本不支持该功能，或者一开始就不支持该功能。

解决方案

你有两个选择。一个更容易，另一个需要更多的工作。

1) 只需使用 function 即可。这将需要更多的工作来实现箭头函数的 this 行为，但现在会更容易使用。在这种情况下，箭头函数的 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 的转译器。这意味着它将代码转换为不同的版本。在这种情况下，我们可以将带有箭头函数的 ES6 代码转换为所有浏览器支持的常规 ES5 代码（我们知道的常规 JavaScript）。您可以按照上面 link 中的安装说明进行操作。

Answer 2

Arrow functions either allow to use an expression or a block as their body. Passing an expression

在 ES5 中：

试试这个方法

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

引用自：

使用 AngularJS/JavaScript 的过滤函数中的语法错误

Syntax error in filter function using AngularJS/JavaScript

javascript

angularjs

arrow-functions