通過js把一個數(shù)組修改成多層嵌套多個數(shù)組的幾種方法總結

更新時間：2023年06月29日 09:56:05 作者：前端代碼の搬運工

這篇文章主要介紹了通過js把一個數(shù)組修改成多層嵌套多個數(shù)組的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

通過js把一個數(shù)組修改成多層嵌套多個數(shù)組

首先一級與二級相同的嵌套

let arr = [
? ? ?{ date: '2020-01-06', age: '18'},
? ? ?{ date: '2020-01-06', age: '25'},
? ? ?{ date: '2020-01-07', age: '34'},
? ? ?{ date: '2020-01-07', age: '18'},
? ? ?{ date: '2020-01-07', age: '38'},
? ? ?{ date: '2020-01-08', age: '26'},
? ? ?{ date: '2020-01-09', age: '24'}
? ?]

let dataArr = [];
? ? arr.map(mapItem => {
? ? ? if (dataArr.length == 0) {
? ? ? ? ? dataArr.push({ date: mapItem.date, List: [mapItem] })
? ? ? } else {
? ? ? ? ?let res = dataArr.some(item=> {//判斷相同日期，有就添加到當前項
? ? ? ? ? if (item.date == mapItem.date) {
? ? ? ? ? ? item.List.push(mapItem)
? ? ? ? ? ? return true
? ? ? ? ? }
? ? ? ? })
? ? ? ? if (!res) {//如果沒找相同日期添加一個新對象
? ? ? ? ? dataArr.push({ date: mapItem.date, List: [mapItem] })
? ? ? ? }
? ? ? }
? ? })

結果

dataArr = [
? ? ? ? {
? ? ? ? ? ? date:'2020-01-06',
? ? ? ? ? ? List: [
? ? ? ? ? ? ? ? { date: '2020-01-06', age: '18'},
? ? ? ? ? ? ? ? { date: '2020-01-06', age: '25'}
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? date:'2020-01-07',
? ? ? ? ? ? List: [
? ? ? ? ? ? ? ? { date: '2020-01-07', age: '34'},
? ? ? ? ? ? ? ? { date: '2020-01-07', age: '18'},
? ? ? ? ? ? ? ? { date: '2020-01-07', age: '38'},
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? date:'2020-01-08',
? ? ? ? ? ? List: [
? ? ? ? ? ? ? ? ?{ date: '2020-01-08', age: '26'},
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? date:'2020-01-09',
? ? ? ? ? ? List: [
? ? ? ? ? ? ? ? { date: '2020-01-09', age: '24' }
? ? ? ? ? ? ]
? ? ? ? }
? ? ]

第二種情況

一級四位數(shù)（0001），二級八位數(shù)字（00010001）獲取的條件是通過一級的四位數(shù)字匹配二級的前四位數(shù)字

方法1：

var userArr = [
? { id: "0001", userName: "laozhang_1" },
? { id: "00010001", userName: "laozhang1" },
? { id: "00010002", userName: "laozhang1" },
? { id: "00010003", userName: "laozhang1" },
? { id: "0002", userName: "laowang" },
? { id: "00020002", userName: "laozhang2" },
? { id: "00020003", userName: "laowang" },
? { id: "00020004", userName: "laowang" },
? { id: "00020005", userName: "laowang" },
? { id: "00020006", userName: "laowang" }
];

let newArr = []
?userArr.forEach(item => {
? ?if (item.id.length === 4) {
? ? ?newArr.push({ ...item, list: [] });
? }
?});
newArr.forEach(item => {
? userArr.forEach(user => {
? ? ?if (item.id !== user.id && item.id == user.id.substring(0, 4)) {
? ? ? item.list.push(user);
? ? }
? });
?});
console.log(newArr)

方法2：

var userArr = [
? { id: "0001", userName: "laozhang_1" },
? { id: "00010001", userName: "laozhang1" },
? { id: "00010002", userName: "laozhang1" },
? { id: "00010003", userName: "laozhang1" },
? { id: "0002", userName: "laowang" },
? { id: "00020002", userName: "laozhang2" },
? { id: "00020003", userName: "laowang" },
? { id: "00020004", userName: "laowang" },
? { id: "00020005", userName: "laowang" },
? { id: "00020006", userName: "laowang" }
];

let newArr = userArr.filter(item => item.id.length === 4)
newArr.forEach(item => {
? ? ? item.list = userArr.filter(user => item.id !== user.id && item.id == user.id.substring(0, 4))
? ? })
? ? console.log(newArr)

js一維數(shù)組處理成多維數(shù)組

let replies = [
	    { id: 1, content: '1. 真理惟一可靠的標準就是永遠自相符合', parent: 0 },
	    { id: 2, content: '2. 我需要三件東西：愛情友誼和圖書', parent: 0 },
	    { id: 3, content: '2-1 時間是一切財富中最寶貴的財富', parent: 2 },
	    { id: 4, content: '2-2 我讀的書愈多，就愈親近世界，愈明了生活的意義，愈覺得生活的重要', parent: 2 },
	    { id: 5, content: '2-1-1 任何事物都是在不斷變化的', parent: 3 },
	    { id: 6, content: '2-1-2 真正的科學家應當是個幻想家', parent: 3 },
	    { id: 7, content: '3. 難得糊涂，耳不聞人之非，不信謠，不傳謠', parent: 0 },
	];
function multidimensionalArray(replies) {
    let data = JSON.parse(JSON.stringify(replies)); 
    data.forEach(reply => {
        let parent = data.find(res => res.id === reply.parent); 
        if (parent) {
            parent.children = parent.children || [];
            parent.children.push(reply); 
        }
    });
    return data;
}
console.log(multidimensionalArray(replies))
  /**一維數(shù)組處理成多維數(shù)組
   * linearArray 一維數(shù)組
   *primary 父級id（父子關聯(lián)字段）
   * secondary 子級id（父子關聯(lián)字段）
   */
  multidimensionalArray: function (linearArray, primary, secondary) {
    let data = JSON.parse(JSON.stringify(linearArray));
    data.forEach(item => {
      let parent = data.find(res => res[primary] === item[secondary]);
      if (parent) {
        parent.children = parent.children || [];
        parent.children.push(item);
      }
    });
    return data;
  }

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

javascript實現(xiàn)自定義滾動條效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)自定義滾動條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
微信小程序開發(fā)之toast等彈框提示使用教程
彈框提示是我們在開發(fā)中經(jīng)常用的一個效果，下面這篇文章主要給大家介紹了微信小程序開發(fā)之toast等彈框提示實現(xiàn)的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06
js實現(xiàn)動態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實現(xiàn)動態(tài)改變字體大小，感興趣的額朋友不要錯過
2014-01-01
JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向導航條代碼
這篇文章主要介紹了JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向導航條代碼,可實現(xiàn)滑塊彈性振動效果的導航效果,涉及jQuery數(shù)學運算及頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下
2015-09-09
JavaScript獲取Url里的參數(shù)
這篇文章主要介紹了JavaScript獲取Url里的參數(shù),需要的朋友可以參考下
2014-12-12
基于JavaScript實現(xiàn)文本一鍵復制和長按復制功能
本文主要內(nèi)容分三部分,第一部分是需求分析,第二部分是實現(xiàn)步驟,第三部分是問題詳解,如果您只需要解決問題,請閱讀第一、二部分即可,如果您有更多時間,進一步學習問題相關知識點,請閱讀至第三部分
2023-10-10
JS實現(xiàn)留言板功能[樓層效果展示]
小編最近在基于js實現(xiàn)留言板功能，實現(xiàn)的功能有發(fā)布人和發(fā)布內(nèi)容做非空校驗，樓層效果展示和發(fā)布時間展示。具體實例代碼大家參考下本文
2017-12-12
BootStrap使用file-input插件上傳圖片的方法
這篇文章主要介紹了BootStrap使用file-input插件上傳圖片的方法，bootstrap的圖片上傳框架 file-input 插件非常不錯，下面小編通過本文介紹下這個插件的使用方法，感興趣的朋友一起看看吧
2016-09-09
js實現(xiàn)一個簡單的MVVM框架示例
下面小編就為大家分享一篇js實現(xiàn)一個簡單的MVVM框架示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
JavaScript刪除對象的不必要的屬性
這篇文章主要給大家介紹了JavaScript刪除對象的不必要的屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-10-10