如何将此箭头功能解读为传统风格？答案

【问题标题】：How to read this arrow function as legacy style?如何将此箭头功能解读为传统风格？
【发布时间】：2021-08-01 18:02:32
【问题描述】：

https://stackoverflow.com/a/58831844/6719857

  var data = [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120"
  }, {
    "name": "Black Winters",
    "position": "Project Engineer",
    "salary": "$1,300"
  }, {
    "name": "Black Winters",
    "position": "Project Engineer",
    "salary": "$1,300"
  }].map((o,i,arr)=>{
    o.color = arr.filter(({name})=>name===o.name).length>1 ?'orange':'red';
    return o;
  });

我对以下部分特别感兴趣

arr.filter(({name})=>name===o.name).length>1 ?'orange':'red';

我想实现不使用箭头函数，不编译。

因为我需要支持像 IE11 这样的旧版浏览器。

有人帮忙吗？

【问题讨论】：

粘贴到babeljs.io/repl
你查看过Array.map的MDN文档吗？有函数表达式的使用示例。
function ( {name} ) { return name === o.name } )。 {name} 与箭头函数无关，它解构作为过滤函数的第一个参数传入的对象并仅提取 name
与其手动更改代码以不使用箭头函数或解构，我仍然建议使用像 Babel 这样的转译器在部署步骤中转换代码。
@t.niese 我认为 OP 的意思是“不编译”，即“不编译”

标签： javascript

【解决方案1】：

示例代码使用箭头函数和解构，IE11 不支持这两者。见https://caniuse.com/?search=destructure和https://caniuse.com/?search=arrow

这应该可行：

  var data = [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120"
  }, {
    "name": "Black Winters",
    "position": "Project Engineer",
    "salary": "$1,300"
  }, {
    "name": "Black Winters",
    "position": "Project Engineer",
    "salary": "$1,300"
  }].map(function(o,i,arr) {
    o.color = arr.filter(function(elem) { return elem.name===o.name }).length>1 ?'orange':'red';
    return (o);
  });
  console.log(data)

这是另一种更接近O(n) 的方法。 saw 集合实际上被丢弃了——它只是为了记录一个名字是否已经出现，它被包括在内是为了清楚

var data = [ {"name": "Tiger Nixon","position": "System Architect","salary": "$3,120"}
           , {"name": "Black Winters","position": "Project Engineer","salary": "$1,300"}
           , {"name": "Black Winters","position": "Project Engineer","salary": "$1,300"}
           ]
let saw = data.reduce(function(saw, current) {
  // Set the color of the current element depending on whether the
  // name has already been seen and then record the fact that the
  // name has now been seen
  if (saw[current.name]) {
    saw[current.name].color = current.color = 'orange'
  } else {
    current.color = 'red'
    saw[current.name] = current
  }
  return saw
}, {});
console.log(data)

【讨论】：

【解决方案2】：

您的所有箭头功能是检查对象上是否存在多个name，然后在相应对象上添加一个新属性，其值为orange，否则为red

arr.filter(({ name }) => name === o.name).length > 1 ? "orange" : "red";

因此，如果您创建一个dict，然后添加所有对象的name 属性的计数，然后映射源数组并根据存储的计数添加color 属性，则可以提高效率在dict 对象中。

旧代码

var data = [{
    name: "Tiger Nixon",
    position: "System Architect",
    salary: "$3,120",
  },
  {
    name: "Black Winters",
    position: "Project Engineer",
    salary: "$1,300",
  },
  {
    name: "Black Winters",
    position: "Project Engineer",
    salary: "$1,300",
  },
];

const result = data.map((o, i, arr) => {
  o.color =
    arr.filter(({
      name
    }) => name === o.name).length > 1 ? "orange" : "red";
  return o;
});

console.log(result);

var data = [{
    name: "Tiger Nixon",
    position: "System Architect",
    salary: "$3,120",
  },
  {
    name: "Black Winters",
    position: "Project Engineer",
    salary: "$1,300",
  },
  {
    name: "Black Winters",
    position: "Project Engineer",
    salary: "$1,300",
  },
];

var dict = {};
data.forEach(function(o) {
  if (dict[o.name]) ++dict[o.name];
  else dict[o.name] = 1;
});


var result = data.map(function(o, i) {
  if (dict[o.name] === 1) o.color = "red";
  else o.color = "orange";

  return o;
});

console.log(result);

【讨论】：