过滤嵌套数组以在 ES6 中获取值

Question

我需要提取数组中状态为“现有”的 listImages。我的问题是它得到了它的父数组。

数据

lists = [
  {
    "listID": "1",
    "listImages": [
      {
        "id": "111",
        "status": "Existing"
      },
      {
        "id": "222",
        "status": "Non-Existing"
      }
    ]
  },
  {
    "listID": "2",
    "listImages": [
      {
        "id": "333",
        "status": "Non-Existing"
      }
    ]
  }
]

当前代码

const images = lists.map((list) => ({
  ...list,
  listImages: (list.listImages?? []).filter(
    ({ status }) => status === "Existing"
  ),
}));

预期输出

["111"]

Answer 1

看来您只想获得 id。只需为每个列表执行 filter，然后执行 map。如果要对所有列表执行此过程并将数组合并为一个，请使用 flatMap.

lists = [
  {
    "listID": "1",
    "listImages": [
      {
        "id": "111",
        "status": "Existing"
      },
      {
        "id": "222",
        "status": "Non-Existing"
      }
    ]
  },
  {
    "listID": "2",
    "listImages": [
      {
        "id": "333",
        "status": "Non-Existing"
      }
    ]
  }
];

const images = lists.flatMap( list => list.listImages.filter(image => image.status === "Existing").map(image => image.id));
console.log(images);

Answer 2

这里有强制性 和声明性 解决方案。您可以将命名函数更改为箭头函数，甚至使其成为一行，但我不认为我们必须遵循那种丑陋的编码风格，没有人 （甚至未来的你） 理解代码。

lists = [
  {
    "listID": "1",
    "listImages": [
      {
        "id": "111",
        "status": "Existing"
      },
      {
        "id": "222",
        "status": "Non-Existing"
      }
    ]
  },
  {
    "listID": "2",
    "listImages": [
      {
        "id": "333",
        "status": "Non-Existing"
      }
    ]
  }
]

// Imperative solution
const images = [];

lists.forEach(list => {
  list.listImages.forEach(image => {
    if(image.status === 'Existing'){
      images.push(image.id);
    }
  })
});
console.log(images);

// Declarative solution
const data = lists.flatMap(function getAllImages(list){
   return list.listImages;
}).filter(function getExistingImages(image) {
  return image.status === 'Existing';
}).map(function getIds(image){ 
 return image.id
});

console.log(data);

过滤嵌套数组以在 ES6 中获取值

Filter Nested Array To Get Value in ES6

javascript

ecmascript-6