获取对象值数组和对象值嵌套数组

Question

我有这个对象数组的嵌套数组：

const items = [
    {
      id: 1,
      name: 'banana',
      selected: true,
    },
    {
      id: 2,
      subItems: [
        {
          id: '2a',
          name: 'apple',
          selected: true,
        },
        {
          id: '2b',
          name: 'orange',
          selected: false,
        },
      ],
    },
    {
      id: 3,
      name: 'watermalon',
      selected: true,
    },
    {
        id: 4,
        name: 'pear',
        selected: false,
      },
  ]

如何在 selected 属性的基础上得到 ids？

第一关我试过了

 const selectedItemId = items.map(item => item.selected && item.id).filter(Boolean)

但是我如何 select 子项中的 ID？我希望结果是 [1, '2a', 3]

Answer 1

先把数组展平。在映射器内部使用 && item.id 时要小心，因为这意味着错误的 ID（例如 0，在某些方案中是合理的起始编号）将被排除。

const items=[{id:1,name:"banana",selected:!0},{id:2,subItems:[{id:"2a",name:"apple",selected:!0},{id:"2b",name:"orange",selected:!1}]},{id:3,name:"watermalon",selected:!0},{id:4,name:"pear",selected:!1}];

const output = items
  .flatMap(item => [item].concat(item.subItems ?? []))
  .filter(item => item.selected)
  .map(item => item.id);
console.log(output);

Answer 2

您可以递归遍历所有项目和 select selected 设置为 true 的项目。

const items = [
  { id: 1, name: "banana", selected: true },
  {
    id: 2,
    subItems: [
      { id: "2a", name: "apple", selected: true },
      { id: "2b", name: "orange", selected: false },
    ],
  },
  { id: 3, name: "watermalon", selected: true },
  { id: 4, name: "pear", selected: false },
];

function getSelectedItems(items, selectedItems = []) {
  for (let item of items) {
    if (item.subItems) {
      getSelectedItems(item.subItems, selectedItems);
    } else if (item.selected) {
      selectedItems.push(item.id);
    }
  }
  return selectedItems;
}

console.log(getSelectedItems(items));

Answer 3

 let newArray = [];
items.forEach(i=>{
    if(i.selected){
    newArray.push(i.id)
    }
    if(i.subItems){
    i.subItems.forEach(j=>{
        if(j.selected){
        newArray.push(j.id)
        }
    })
}
});

所以这有点冗长。有 2 个地图循环

Answer 4

你可以这样做：

const items=[{id:1,name:"banana",selected:!0},{id:2,subItems:[{id:"2a",name:"apple",selected:!0},{id:"2b",name:"orange",selected:!1}]},{id:3,name:"watermalon",selected:!0},{id:4,name:"pear",selected:!1}]

const output = items
  .reduce((a, c) => [...a, c, ...(c.subItems || [])], [])
  .filter(o => o.selected)
  .map(({ id }) => id)

console.log(output)

Answer 5

检查项目中是否存在 subItems 数组并递归调用函数以提取所选项目将解决问题。

function extractSubItems (items){
    var selectItemsId = [];
    selectItemsId = selectItemsId + items.map(item => {
    if (item.selected===true){
        return item.id;
    }
    if (item.subItems){
        return extractSubItems(item.subItems);
    }
    }).filter(Boolean);
    
    return selectItemsId
}

Answer 6

您可以按如下嵌套方式使用 Array#reduce：

const items = [ { id: 1, name: 'banana', selected: true, }, { id: 2, subItems: [ { id: '2a', name: 'apple', selected: true, }, { id: '2b', name: 'orange', selected: false, }, ], }, { id: 3, name: 'watermalon', selected: true, }, { id: 4, name: 'pear', selected: false, }, ],

      output = items
          .reduce(
              (prev, {id,selected,subItems}) => 
              subItems ?
              selected ?
              [...prev,id,...subItems.reduce( (p, {id:ID,selected:SEL}) => SEL ? [...p,ID] : p, [] )] :
              [...prev,...subItems.reduce( (p, {id:ID,selected:SEL}) => SEL ? [...p,ID] : p, [] )] :
              selected ?
              [...prev,id] :
              prev, []
          );
          
console.log( output )

Answer 7

1 - 遍历项目数组

2 - 如果没有 subItems 数组，则使用 condition

查找项目的 ID

3 - 如果有一个 subItems 数组然后遍历它并使用 condition

找到 id

const result = []

items.map(item=>{
  item.subItems ? 
    item.subItems.map(sub=>{
      sub.selected && result.push(sub.id)
    }) 
  : item.selected && result.push(item.id)
})

console.log(result) // [1, "2a", 3]

Answer 8

这也有效：

var ids = [
    ... items.filter( 
        it => it.selected || (it.subItems && it.subItems.some( sub => sub.selected ))
    )
    .map( it => 
        it.subItems 
            ? it.subItems.filter( it_sub => it_sub.selected ).map( it_sub => it_sub.id ) 
            : [it.id] 
    )
].flat()

Answer 9

子项递归：

const items=[
  {id:1,name:"banana",selected:!0},
  {id:2,subItems:
    [
    {id:"2a",name:"apple",selected:!0},
    {id:"2b",name:"orange",selected:!1},
    {id:"2c",subItems:
      [
      {id:"2c1",name:"apple1",selected:!0},
      {id:"2c1",name:"orange1",selected:!1}
      ]
    },
    ]
  },
  {id:3,name:"watermalon",selected:!0},
  {id:4,name:"pear",selected:!1}
];

const getSubItem = (obj) => {
  let result = !obj.hasOwnProperty('subItems') ? [obj] : obj.subItems.reduce((res, item) => {
    return res.concat(getSubItem(item))
  }, [])
  return result.filter(item => item.selected)
}
const result = items.reduce((res, item) => {
  let subItem = getSubItem(item)
  return res.concat(getSubItem(item))
}, [])

console.log(result)

获取对象值数组和对象值嵌套数组

get array of object value and nested array of object value

javascript

arrays

reactjs

vue.js