ECMASCRIPT6 Google 标签管理器错误：箭头函数

Question

我在使用以下脚本的 Google TAG Manager (GTM) 中收到编译错误：

此语言功能仅支持 ECMASCRIPT6 模式或更好的模式：箭头功能。

试图谷歌它，但我对 JS 的理解似乎还不够。 关于如何更改它以便 Google TAG Manager 可以编译它的任何想法？

var modellist = productList.Lockers.reduce((acc, item) => {
    var existItem = acc.find(({
        model
    }) => model === item.model);
    var existItemnew = acc.find(({
        modelname
    }) => modelname === item.modelname);
    if (!existItem) {
        acc.push(item);
    }
    return acc;
}, []);

Answer 1

改变像箭头功能(acc, item) => { ... }非箭头功能，如function (acc, item) { ... }

这里也不允许对象解构，所以function ({model}) { ... }需要变成function(i) { var model = i.model; ... } function(i) { var model = i.model; ... } . 以下是固定版本。

var modellist = productList.Lockers.reduce(function (acc, item) {
    var existItem = acc.find(function (i) {
        return i.model === item.model
    });
    var existItemnew = acc.find(function (i) {
        return i.modelname === item.modelname
    });
    if (!existItem) {
        acc.push(item);
    }
    return acc;
}, []);

$.each(modellist, function (i, item) {

    var model = modellist[i].model;
    var modelname = modellist[i].modelname;
    $('.filter.first .dropdown').append('<div class="' + model + '"><input type="radio" name="model" id="' + model + '" value="' + model + '" /><label>' + modelname + '</label>(<span id="modelcount"></span>)<img></div>');

});

Answer 2

您可以将箭头函数转换为传统函数。 您的代码将如下所示：

var modellist = productList.Lockers.reduce(
  function(acc, item){
    var existItem = acc.find(
      function({ model }){
        return model === item.model;
      }
    );
    var existItemnew = acc.find(
      function({ modelname }){
        return modelname === item.modelname;
      }
    );
    if (!existItem) { acc.push(item); }
    return acc;
  }, []
);

$.each(modellist, function(i, item) {
  var model = modellist[i].model;
  var modelname = modellist[i].modelname;
  $('.filter.first .dropdown').append('<div class="' + model + '"><input type="radio" name="model" id="' + model + '" value="' + model + '" /><label>' + modelname + '</label>(<span id="modelcount"></span>)<img></div>');

});

JavaScript 中这两种类型的函数之间有一些重要的区别。 要了解这些，请查看一些在线资源，例如MDN 上的箭头函数

Answer 3

评论者是对的，错误消息准确地说明了问题所在：某些客户端不支持 ES6，而您的似乎是其中之一。 我写了一个你必须如何替换它的例子：

var existItem = acc.find(function(model) { model === item.model});

这两个函数（主要）是相同的：

let myArrowFunction = (text) => console.log(text) // es6, not completely supported (newer)

let myStandardFunction = function(text) { // standard JavaScript, accepted everywhere (original)
  console.log(text)
}

你必须使用第二个版本。