JavaScript中如何过滤对象，保留isOpen字段及itemId非空的items项

我在使用filter方法进行数据处理时遇到了问题。

初始对象 #

当前待处理的对象结构如下：

[{
  isOpen : true,
  items : [
    {itemId : '', name : 'some name'},
    {itemId : 'new', name : 'new name'}
  ]
},]

预期结果 #

需要保留对象的isOpen字段，同时仅保留items数组中itemId不为空字符串的子项，预期输出结构如下：

[{
  isOpen : true,
  items : [
    {itemId : 'new', name : 'new name'}
  ]
},]

问题原因 #

之前的实现代码：

const removeEmptyStringInItems = (item) => item.items?.filter((v) => v.itemId);
const finalItems = myItems.map(removeEmptyStringInItems);

实际仅输出了过滤后的items项：

{itemId : 'new', name : 'new name'}

核心问题是map的回调函数只返回了过滤后的items数组，没有保留外层对象的其他属性，最终生成的数组直接替换成了items的内容，自然丢失了外层的isOpen字段。

正确实现 #

遍历外层数组时，返回一个和原对象结构一致的新对象，保留原有所有字段，仅对items字段做过滤替换即可：

const finalItems = myItems.map((item) => {
  return {
    // 展开原对象的所有属性，保留isOpen等外层字段
    ...item,
    // 替换items为过滤后的结果，显式判断itemId非空更严谨
    items: item.items?.filter(v => v.itemId !== '')
  }
})

如果确定itemId只会是字符串类型，也可以简写为v => v.itemId，空字符串本身是falsy值可以被过滤掉，但显式写判断条件可以避免后续itemId出现0、false等合法falsy值时被误过滤。

内容的提问来源于stack exchange，提问作者Lucy