javascript - 通过对象中的字符串数组过滤和对象数组

Question

我有一个对象数组，在对象上有一个带有字符串数组的性别键。性别数组为空[]或有一个带有["men"]或的字符串["women"]。我正在尝试根据活跃的性别将对象数组排序为数组。即如果性别men是活跃的，所有的对象gender: ["men"]都应该被过滤到数组中。最重要的是，任何具有空数组的对象，例如gender: []，也应该包含在 men 和 women 数组中。但是，我无法让它工作，我的代码目前正在返回一个未定义的数组。任何帮助将不胜感激。

const activeGender = "women"

const images = [
    {
      "gender": [],
      "image": {
        "_id": "ac0611e600fd31bb3dc87f4b514d0b80erf8fa3b5d-f2759x4139-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/ac0611e600fd31bb3dc87f4b514dfr0b80f8fa3b5d-2759x4139.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "ac0611e600fd31bb3dc87f4b514d0b80f8fa3b5d-2759x4139-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/ac0611e600fd31bb3dc87f4b514d0b80f8fa3b5d-2759x4139.jpg"
      }
    },
    {
      "gender": ["men"],
      "image": {
        "_id": "4b733a931e13d7cdf77c200d0eac94b55caee89e-3766x5649-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/4b733a931e13d7cdf77c200d0eac94b55caee89e-3766x5649.jpg"
      }
    },
    {
      "gender": ["men"],
      "image": {
        "_id": "f2a4ce65ce4f671c6aec4d9b6b8b2bce7b4a1e7a-5472x3648-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/f2a4ce65ce4f671c6aec4d9b6b8b2bce7b4a1e7a-5472x3648.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "31ab7886b5b2164e245ffb41facc01c0ac66f60f-1962x2942-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/31ab7886b5b2164e245ffb41facc01c0ac66f60f-1962x2942.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "c577801db926fd058142513dce0b834eb8dc9e16-2432x3648-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/c577801db926fd058142513dce0b834eb8dc9e16-2432x3648.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "e6e16e0da123fa510efe2ccb1269f18afa8cda64-5472x3648-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/e6e16e0da123fa510efe2ccb1269f18afa8cda64-5472x3648.jpg"
      }
    }
  ]
  

const getMens = (items) =>
  items
    .filter((i) => i.gender.length === 0 || i.gender.includes("men"))
    .map((i) => i.images)
    .reduce((a, b) => a.concat(b), []);
    
const getWomens = (items) =>
  items
    .filter((i) => i.gender.length === 0 || i.gender.includes("women"))
    .map((i) => i.images)
    .reduce((a, b) => a.concat(b), []);
    
  const filteredImages =
    activeGender === "women"
      ? getWomens(images)
      : getMens(images);
      
      console.log(filteredImages)

标签： javascriptarrays

Answer 1

您的代码中有一个小错字。.map((i) => i.images)应该是.map((i) => i.image)。

const activeGender = "women"

const images = [
    {
      "gender": [],
      "image": {
        "_id": "ac0611e600fd31bb3dc87f4b514d0b80erf8fa3b5d-f2759x4139-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/ac0611e600fd31bb3dc87f4b514dfr0b80f8fa3b5d-2759x4139.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "ac0611e600fd31bb3dc87f4b514d0b80f8fa3b5d-2759x4139-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/ac0611e600fd31bb3dc87f4b514d0b80f8fa3b5d-2759x4139.jpg"
      }
    },
    {
      "gender": ["men"],
      "image": {
        "_id": "4b733a931e13d7cdf77c200d0eac94b55caee89e-3766x5649-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/4b733a931e13d7cdf77c200d0eac94b55caee89e-3766x5649.jpg"
      }
    },
    {
      "gender": ["men"],
      "image": {
        "_id": "f2a4ce65ce4f671c6aec4d9b6b8b2bce7b4a1e7a-5472x3648-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/f2a4ce65ce4f671c6aec4d9b6b8b2bce7b4a1e7a-5472x3648.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "31ab7886b5b2164e245ffb41facc01c0ac66f60f-1962x2942-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/31ab7886b5b2164e245ffb41facc01c0ac66f60f-1962x2942.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "c577801db926fd058142513dce0b834eb8dc9e16-2432x3648-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/c577801db926fd058142513dce0b834eb8dc9e16-2432x3648.jpg"
      }
    },
    {
      "gender": ["women"],
      "image": {
        "_id": "e6e16e0da123fa510efe2ccb1269f18afa8cda64-5472x3648-jpg",
        "url": "https://cdn.example.com/images/zjeoztkz/production/e6e16e0da123fa510efe2ccb1269f18afa8cda64-5472x3648.jpg"
      }
    }
  ]
  

const getMens = (items) =>
  items
    .filter((i) => i.gender.length === 0 || i.gender.includes("men"))
    .map((i) => i.image)
    .reduce((a, b) => a.concat(b), []);
    
const getWomens = (items) =>
  items
    .filter((i) => i.gender.length === 0 || i.gender.includes("women"))
    .map((i) => i.image)
    .reduce((a, b) => a.concat(b), []);
    
  const filteredImages =
    activeGender === "women"
      ? getWomens(images)
      : getMens(images);
      
      console.log(filteredImages)