如何洗掉Javascript物件中的物件（元素）？

如何通過 ID 從 JavaScript 物件中洗掉元素？例如我必須洗掉 004 或 007：

const obj = {
  id: '001',
  children: [
    {
      id: '002',
      children: [
        {
          id: '003',
          children: [],
        },
        {
          id: '004',
          children: [
            {
              id: '005',
              children: [],
            }
          ],
        }
      ],
    },
    {
      id: '006',
      children: [
        {
          id: '007',
          children: [],
        }
      ],
    },
  ]
}

我想喜歡這個，找到 id 但下一步應該是什么。預計從物件中洗掉 id。

const removeById = (obj = {}, id = '') => {
  console.log('obj: ', obj)

  const search = obj.children.find(o => o.id === id)
  console.log('##search: ', search)
  if(search) {
    console.log('## parent id: ', obj.id)
    ...
  }
  if (obj.children && obj.children.length > 0) {
    obj.children.forEach(el => removeById(el, id));
  }
}

removeById(obj, '007')

uj5u.com熱心網友回復：

您可以使用 findIndex 獲取陣列中的位置。要從陣列中洗掉元素，您需要使用 splice。

然后你可以用一些回圈遍歷孩子并檢查孩子的孩子。使用一些，你可以在找到 id 時退出，這樣你就不必繼續回圈。

let obj = {
  id: '001',
  children: [
    {
      id: '002',
      children: [
        {
          id: '003',
          children: [],
        },
        {
          id: '004',
          children: [
            {
              id: '005',
              children: [],
            }
          ],
        }
      ],
    },
    {
      id: '006',
      children: [
        {
          id: '007',
          children: [],
        }
      ],
    },
  ]
}

const removeById = (parentData, removeId) => {

   // This is only the parent level!
   // If you will never delete the first level parent, this is not needed
   if (parentData.id === removeId){
     Object.keys(data).forEach(key => delete parentData[key]);
     return true;
   }
   
   function recursiveFind (children) {
     // check if any of the children have the id
     const index = children.findIndex(({id}) => id === removeId);
 
     // if we have an index
     if (index != -1) {
       // remove it
       children.splice(index, 1);
       // say we found it
       return true;
     }
   
     // Loop over the chldren check their children
     return children.some(child => recursiveFind(child.children));
   }

   return recursiveFind(parentData.children);
}


removeById(obj,'004');
removeById(obj,'007');
console.log(obj)

uj5u.com熱心網友回復：

我們可以使用遞回函式來做到這一點

顯示代碼片段

let obj = {
  id: '001',
  children: [
    {
      id: '002',
      children: [
        {
          id: '003',
          children: [],
        },
        {
          id: '004',
          children: [
            {
              id: '005',
              children: [],
            }
          ],
        }
      ],
    },
    {
      id: '006',
      children: [
        {
          id: '007',
          children: [],
        }
      ],
    },
  ]
}

const removeById = (data,id) =>{
  if(data.id === id){
    delete data.id
    delete data.children
    return
   }
   data.children.forEach(d =>{
     removeById(d,id)
   })
}

removeById(obj,'006')
console.log(obj)

更新：洗掉后不留下空物件

let obj = {
  id: '001',
  children: [
    {
      id: '002',
      children: [
        {
          id: '003',
          children: [],
        },
        {
          id: '004',
          children: [
            {
              id: '005',
              children: [],
            }
          ],
        }
      ],
    },
    {
      id: '006',
      children: [
        {
          id: '007',
          children: [],
        }
      ],
    },
  ]
}

let match = false
const removeById = (data,id) =>{
  match = data.some(d => d.id == id)
  if(match){
      data = data.filter(d => d.id !== id)
   }else{
     data.forEach(d =>{
       d.children = removeById(d.children,id)
     })
   }
   return data
}

let data = [obj]
console.log(removeById(data,'004'))

標籤：javascript数组JSON目的递归

上一篇：C 中的硬幣找零問題卡在遞回上

下一篇：遞回回圈遍歷字串中的字符以解決回文問題的問題