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)
}

你必須使用第二個版本。