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

更新時(shí)間：2023年06月29日 09:56:05 作者：前端代碼の搬運(yùn)工

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

通過js把一個(gè)數(shù)組修改成多層嵌套多個(gè)數(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=> {//判斷相同日期，有就添加到當(dāng)前項(xiàng)
? ? ? ? ? if (item.date == mapItem.date) {
? ? ? ? ? ? item.List.push(mapItem)
? ? ? ? ? ? return true
? ? ? ? ? }
? ? ? ? })
? ? ? ? if (!res) {//如果沒找相同日期添加一個(gè)新對象
? ? ? ? ? dataArr.push({ date: mapItem.date, List: [mapItem] })
? ? ? ? }
? ? ? }
? ? })

結(jié)果

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. 真理惟一可靠的標(biāo)準(zhǔn)就是永遠(yuǎn)自相符合', parent: 0 },
	    { id: 2, content: '2. 我需要三件東西：愛情友誼和圖書', parent: 0 },
	    { id: 3, content: '2-1 時(shí)間是一切財(cái)富中最寶貴的財(cái)富', parent: 2 },
	    { id: 4, content: '2-2 我讀的書愈多，就愈親近世界，愈明了生活的意義，愈覺得生活的重要', parent: 2 },
	    { id: 5, content: '2-1-1 任何事物都是在不斷變化的', parent: 3 },
	    { id: 6, content: '2-1-2 真正的科學(xué)家應(yīng)當(dāng)是個(gè)幻想家', 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（父子關(guān)聯(lián)字段）
   * secondary 子級id（父子關(guān)聯(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;
  }