如何在陣列中透過父鍵生成子鍵 JavaScript?
我們假設有一個這樣的物件陣列 -
const arr = [ { id: 1, parent_id: 0, title: 'Movies' }, { id: 2, parent_id: 0, title: 'Music' }, { id: 3, parent_id: 1, title: 'Russian movies' }, { id: 4, parent_id: 2, title: 'Russian music' }, { id: 5, parent_id: 3, title: 'New' }, { id: 6, parent_id: 3, title: 'Top10' }, { id: 7, parent_id: 4, title: 'New' }, { id: 8, parent_id: 4, title: 'Top10' }, { id: 9, parent_id: 0, title: 'Soft' } ];
我們需要編寫一個函式,該函式接收此陣列,並返回一個新的物件陣列,其中每個物件都具有一個額外的屬性“child”,該屬性必須是一個數組,其中包含所有物件的 ID,這些物件是特定物件的直接或間接子物件。
因此,輸出應如下所示 -
[ { id: 1, parent_id: 0, title: 'Movies', childs: [ 3, 5, 6 ] }, { id: 2, parent_id: 0, title: 'Music', childs: [ 4, 7, 8 ] }, { id: 3, parent_id: 1, title: 'Russian movies', childs: [ 5, 6 ] }, { id: 4, parent_id: 2, title: 'Russian music', childs: [ 7, 8 ] }, { id: 5, parent_id: 3, title: 'New', childs: [] }, { id: 6, parent_id: 3, title: 'Top10', childs: [] }, { id: 7, parent_id: 4, title: 'New', childs: [] }, { id: 8, parent_id: 4, title: 'Top10', childs: [] }, { id: 9, parent_id: 0, title: 'Soft', childs: [] } ]
下面,我們來編寫此函式的程式碼 -
示例
const arr = [ { id: 1, parent_id: 0, title: 'Movies' }, { id: 2, parent_id: 0, title: 'Music' }, { id: 3, parent_id: 1, title: 'Russian movies' }, { id: 4, parent_id: 2, title: 'Russian music' }, { id: 5, parent_id: 3, title: 'New' }, { id: 6, parent_id: 3, title: 'Top10' }, { id: 7, parent_id: 4, title: 'New' }, { id: 8, parent_id: 4, title: 'Top10' }, { id: 9, parent_id: 0, title: 'Soft' } ]; const generateChild = arr => { return arr.reduce((acc, val, ind, array) => { const childs = []; array.forEach((el, i) => { if(childs.includes(el.parent_id) || el.parent_id === val.id){ childs.push(el.id); }; }); return acc.concat({...val, childs}); }, []); }; console.log(generateChild(arr));
輸出
控制檯中的輸出將是 -
[ { id: 1, parent_id: 0, title: 'Movies', childs: [ 3, 5, 6 ] }, { id: 2, parent_id: 0, title: 'Music', childs: [ 4, 7, 8 ] }, { id: 3, parent_id: 1, title: 'Russian movies', childs: [ 5, 6 ] }, { id: 4, parent_id: 2, title: 'Russian music', childs: [ 7, 8 ] }, { id: 5, parent_id: 3, title: 'New', childs: [] }, { id: 6, parent_id: 3, title: 'Top10', childs: [] }, { id: 7, parent_id: 4, title: 'New', childs: [] }, { id: 8, parent_id: 4, title: 'Top10', childs: [] }, { id: 9, parent_id: 0, title: 'Soft', childs: [] } ]
廣告