为什么map函数在迭代时给出undefined？

Question

const a=[{name:'ee'},{name:"ddsf"}]
const b=a.map(({name})=>{
  if(name!='ee')
  return {
    key:'dd',
    name:name +'sss'
  }
})

console.log(b)

我得到了

[undefined, [object Object] {
  key: "dd",
  name: "ddsfsss"
}]

为什么未定义？

预期产量

[[object Object] {
  key: "dd",
  name: "ddsfsss"
}]

这是代码 https://jsbin.com/wujekavivo/edit?html,js,console,output

Answer 1

您希望.filter之前是.map。

const b = a.filter(o => o.name != 'ee')
  .map(o => ({
      key: 'dd',
      name: o.name + 'sss'
    })
  );

这是因为.map总是返回一个长度等于原始长度的数组。通过首先过滤，您可以将其缩减为所需的集合。

您还可以使用.reduce()一次完成两项任务。

const b = a.reduce((o, acc) => 
    o.name == 'ee' ? acc : acc.concat({
      key: 'dd',
      name: o.name + 'sss'
    })
, []);

Answer 2

map函数返回一个与您要迭代到的数组具有对应关系的数组。因此，undefined的值对应于name: 'ee'数组中的第一项。如果只想获取名称为！=='ee'的名称，则可以使用filter代替。或者更好的是，您可以这样做：

a.reduce((arr, {name}) => {
  if(name === 'ee') {
    arr.push({
      key: 'dd',
      name: name + 'sss',
    });
  }
  return arr;
}, []);

与map，reduce不同，您几乎拥有更多的控制权。