您好,登錄后才能下訂單哦!
這篇文章主要介紹JavaScript中多個方法合體時都能做什么,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
多個方法合體時都能做什么?(舉例一)
場景:
前端拿到的數據是
data = [ { id: 1, name: '一級標題-1' }, { id: 2, name: '一級標題-2' }, { id: 3, name: '二級標題-1', pid: 1 }, { id: 3, name: '一級標題-3' }, { id: 3, name: '二級標題-2', pid: 2 },]
我們需要形成及聯關系,如:
needData = [ { id: 1, name: '一級標題-1', children: [ { id: 3, name: '二級標題-1', pid: 1 } ] }, { id: 2, name: '一級標題-2', children: [ { id: 5, name: '二級標題-2', pid: 2 } ] }, { id: 4, name: '一級標題-3' },]
于是我借助數組提供的多個api:
newList = data.reduce((result, item, _, arr) => { if (!item.pid) { return [...result, item]; } const parentItem = arr.find(({ id }) => id === item.pid); if (parentItem) { const { children = [] } = parentItem; parentItem.children = [...children, item]; } return result;}, []);
思路:
尋找存在父級的元素
將它發到正確的位置上
返回所有沒有父級字段(pid)的數據
以上是“JavaScript中多個方法合體時都能做什么”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。