從多級物件中過濾掉資料時我做錯了什么？

為了理解和練習對傳入資料的操作，我創建了一個物件陣列：

const pizzaObj = [
  {
    id: 'mon',
    name: 'Monday',
    subMenu: [],
  },
  {
    id: 'tues',
    name: 'Tuesday',
    subMenu: [
      {
        id: 'small',
        name: 'Small',
      },
      {
        id: 'medium',
        name: 'Medium',
      },
      {
        id: 'large',
        name: 'Large',
      },
      {
        id: 'xlarge',
        name: 'X Large',
      },
    ],
  },
  {
    id: 'wed',
    name: 'Wednesday',
    subMenu: [],
  },
]

我試圖medium從largesubMenu它看起來像：

const pizzaObj = [
  {
    id: 'mon',
    name: 'Monday',
    subMenu: [],
  },
  {
    id: 'tues',
    name: 'Tuesday',
    subMenu: [
      {
        id: 'small',
        name: 'Small',
      },
      {
        id: 'xlarge',
        name: 'X Large',
      },
    ],
  },
  {
    id: 'wed',
    name: 'Wednesday',
    subMenu: [],
  },
]

如果僅針對以下內容，我可以洗掉subMenu：

const listToDelete = ['medium', 'large']

const pizzaObj = [
      {
        id: 'small',
        name: 'Small',
      },
      {
        id: 'medium',
        name: 'Medium',
      },
      {
        id: 'large',
        name: 'Large',
      },
      {
        id: 'xlarge',
        name: 'X Large',
      },
    ]

const result = pizzaObj.filter( el => (-1 == listToDelete.indexOf(el.id)) )

console.log(result)

但是當我嘗試使用some資料過濾物件時，不會洗掉：

const listToDelete = ['medium', 'large']

const pizzaObj = [
  {
    id: 'mon',
    name: 'Monday',
    subMenu: [],
  },
  {
    id: 'tues',
    name: 'Tuesday',
    subMenu: [
      {
        id: 'small',
        name: 'Small',
      },
      {
        id: 'medium',
        name: 'Medium',
      },
      {
        id: 'large',
        name: 'Large',
      },
      {
        id: 'xlarge',
        name: 'X Large',
      },
    ],
  },
  {
    id: 'wed',
    name: 'Wednesday',
    subMenu: [],
  },
]

const result = pizzaObj.filter(m => {
  return Object.keys(m).some(key => {
    return key === 'subMenu'
      ? m[key].filter(item => -1 === listToDelete.indexOf(item.id))
      : m[key]
  })
})

console.log(result)

我也嘗試過map：

const pizzaObj = [
  {
    id: 'mon',
    name: 'Monday',
    subMenu: [],
  },
  {
    id: 'tues',
    name: 'Tuesday',
    subMenu: [
      {
        id: 'small',
        name: 'Small',
      },
      {
        id: 'medium',
        name: 'Medium',
      },
      {
        id: 'large',
        name: 'Large',
      },
      {
        id: 'xlarge',
        name: 'X Large',
      },
    ],
  },
  {
    id: 'wed',
    name: 'Wednesday',
    subMenu: [],
  },
]

const testStrip = data => {
  const listToDelete = ['medium', 'large']
  
return data.filter(m => {
  return Object.keys(m).map(key => {
    return key === 'subMenu'
      ? m[key].filter(item => -1 === listToDelete.indexOf(item.id))
      : m[key]
  })
})
}

console.log(testStrip(pizzaObj))

研究：

• javascript過濾陣列多個條件
• 使用 JavaScript 從陣列中洗掉物件
• 根據物件屬性洗掉陣列元素
• 基于 JavaScript 中的鍵值查找和洗掉陣列中的物件
• JavaScript 陣列 - 過濾掉與特定字串不匹配的值
• 用 JavaScript 將物件值替換為具有相同鍵的其他物件的值

我有什么誤解，我應該如何過濾掉medium和large？

uj5u.com熱心網友回復：

由于您正在處理陣列中的多個物件，為什么不使用forEach()回圈它們，并subMenu使用filter()您已經完成的重新分配：

const pizzaObj = [{id: 'mon', name: 'Monday', subMenu: [], }, {id: 'tues', name: 'Tuesday', subMenu: [{id: 'small', name: 'Small', }, {id: 'medium', name: 'Medium', }, {id: 'large', name: 'Large', }, {id: 'xlarge', name: 'X Large', }, ], }, {id: 'wed', name: 'Wednesday', subMenu: [], }, ]

const testStrip = data => {
  data.forEach(d => {
    d.subMenu = d.subMenu.filter(p => !['Medium', 'Large'].includes(p.name))
  });
  return data;
}

console.log(testStrip(pizzaObj))

相同的想法，但reduce()如果需要，可以提供更多控制：

const pizzaObj = [{id: 'mon', name: 'Monday', subMenu: [], }, {id: 'tues', name: 'Tuesday', subMenu: [{id: 'small', name: 'Small', }, {id: 'medium', name: 'Medium', }, {id: 'large', name: 'Large', }, {id: 'xlarge', name: 'X Large', }, ], }, {id: 'wed', name: 'Wednesday', subMenu: [], }, ]

const testStrip = data => (
    data.reduce((prev, cur) => [
        ...prev,
        { 
            ...cur, 
            subMenu: cur.subMenu = cur.subMenu.filter(p => !['Medium', 'Large'].includes(p.name))
        }
    ], [])
)

console.log(testStrip(pizzaObj))

uj5u.com熱心網友回復：

你可以做這樣的事情

const filterData = (data, exclude) => 
  data.map(d => ({
   ...d,
   subMenu: d.subMenu.filter(({id}) => !exclude.includes(id))
  }))



const listToDelete = ['medium', 'large']


const pizzaObj = [
  {
    id: 'mon',
    name: 'Monday',
    subMenu: [],
  },
  {
    id: 'tues',
    name: 'Tuesday',
    subMenu: [
      {
        id: 'small',
        name: 'Small',
      },
      {
        id: 'medium',
        name: 'Medium',
      },
      {
        id: 'large',
        name: 'Large',
      },
      {
        id: 'xlarge',
        name: 'X Large',
      },
    ],
  },
  {
    id: 'wed',
    name: 'Wednesday',
    subMenu: [],
  },
]

console.log(filterData(pizzaObj, listToDelete))

標籤：javascript 数组 目的

上一篇：這個靜態工廠方法代碼有什么問題

下一篇：匹配List中的id并獲取String-Java