ECMASCRIPT6 Google 跟踪代码管理器错误：箭头函数答案

【问题标题】：ECMASCRIPT6 Google Tag Manager Error: Arrow functionECMASCRIPT6 Google 跟踪代码管理器错误：箭头函数
【发布时间】：2021-09-01 12:56:35
【问题描述】：

我在使用以下脚本的 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;
}, []);

【问题讨论】：

无论 TAG 管理器是什么...是否有 ECMASCRIPT6 mode？
“有什么想法吗？” ——因为这是一个真实的事实。 Arrow Functions 是在 ES6 中引入的，是旧版本 JavaScript 语言中的语法错误。
根据developers.google.com/tag-manager/templates/… 箭头功能在沙盒模板或类似的模板中可用
更新了问题，使其更加清晰。

标签： javascript

【解决方案1】：

将(acc, item) => { ... } 等箭头函数更改为function (acc, item) { ... } 等非箭头函数。

这里也不允许对象解构，所以function ({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>');

});

【讨论】：

内部的钳位 ({model}) 在标签管理器中给我一个编译错误：“解构绑定”在 ES6 中可用。如果我删除它们，每个函数都不起作用并为每个目标 json 对象创建一个元素。有什么想法吗？
已修复。 model 和 modelname 属性可以使用通常的点符号来访问，而不是像 ES6 中那样解构参数。

【解决方案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 中这两种类型的函数之间有一些重要的区别。要了解这些，请查看一些在线资源，例如 Arrow Functions on MDN

【讨论】：

内部的夹子 ({ modelname }) 给了我一个错误：“解构绑定”在 ES6 中可用并且不会编译。如果我取下夹子，错误就消失了，但我的功能不能正常工作。有什么想法吗？

【解决方案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)
}

你必须使用第二个版本。

【讨论】：