如何在二维数组中插入对象并维持子数组最多两元素结构

需求说明 #

现有一个二维数组，每个子数组最多可容纳2个对象。需在指定位置(a,b)插入目标对象，遵循以下规则：

• 若目标子数组元素数量小于2，直接将对象插入到指定位置；
• 若目标子数组已满（元素数为2），插入后溢出的元素将单独形成新的子数组，放在原数组对应位置的后方。

待插入对象 #

var dataToAdd = [
    [
        {
            "name": "OneToThree",
            "data": {
                "value": 123
            }
        }
    ]
];
// 提取内层的目标对象
const targetItem = dataToAdd[0][0];

原数组 #

var data = [
    [
        {
            "name": "firstName",
            "data": {
                "value": 1
            }
        },
        {
            "name": "secondName",
            "data": {
                "value": 2
            }
        }
    ],
    [
        {
            "name": "thirdName",
            "data": {
                "value": 3
            }
        },
        {
            "name": "fourthName",
            "data": {
                "value": 4
            }
        }
    ],
    [
        {
            "name": "fifthName",
            "data": {
                "value": 5
            }
        }
    ],
    [
        {
            "name": "sixthname",
            "data": {
                "value": 6
            }
        },
        {
            "name": "seventhName",
            "data": {
                "value": 7
            }
        }
    ]
];

插入示例 #

示例1：插入到第三个子数组 #

第三个子数组原本仅含1个元素，直接追加后结果为：

[
    {
        "name": "fifthName",
        "data": {
            "value": 5
        }
    },
    {
        "name": "OneToThree",
        "data": {
            "value": 123
        }
    }
]

示例2：插入到第四个子数组的第2位（a=4, b=2） #

插入后原第四子数组的第二个元素被挤出，单独形成新子数组，最终数组如下：

var finalData = [
    [
        {
            "name": "firstName",
            "data": {
                "value": 1
            }
        },
        {
            "name": "secondName",
            "data": {
                "value": 2
            }
        }
    ],
    [
        {
            "name": "thirdName",
            "data": {
                "value": 3
            }
        },
        {
            "name": "fourthName",
            "data": {
                "value": 4
            }
        }
    ],
    [
        {
            "name": "fifthName",
            "data": {
                "value": 5
            }
        }
    ],
    [
        {
            "name": "sixthname",
            "data": {
                "value": 6
            }
        },
        {
            "name": "OneToThree",
            "data": {
                "value": 123
            }
        }
    ],
    [
        {
            "name": "seventhName",
            "data": {
                "value": 7
            }
        }
    ]
];

JavaScript 实现函数 #

function insertInto2DArray(originalArray, targetItem, a, b) {
    // 将传入的序号（从1开始）转换为数组索引（从0开始）
    const subArrayIndex = a - 1;
    const itemIndex = b - 1;

    // 深拷贝原数组，避免修改原始数据
    const newArray = JSON.parse(JSON.stringify(originalArray));
    const targetSubArray = newArray[subArrayIndex];

    if (targetSubArray.length < 2) {
        // 子数组未满，直接插入到指定位置
        targetSubArray.splice(itemIndex, 0, targetItem);
    } else {
        // 子数组已满，插入后取出溢出元素，新增子数组存放
        const removedItem = targetSubArray.splice(itemIndex, 1, targetItem)[0];
        newArray.splice(subArrayIndex + 1, 0, [removedItem]);
    }

    return newArray;
}

// 调用示例
// 示例1：插入到第三个子数组的第2位
const result1 = insertInto2DArray(data, targetItem, 3, 2);
// 示例2：插入到第四个子数组的第2位
const result2 = insertInto2DArray(data, targetItem, 4, 2);

Angular 组件中使用示例 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-array-insert',
  template: `<pre>{{ finalData | json }}</pre>`
})
export class ArrayInsertComponent {
  // 原数组
  private originalData = [
    [
        { "name": "firstName", "data": { "value": 1 } },
        { "name": "secondName", "data": { "value": 2 } }
    ],
    [
        { "name": "thirdName", "data": { "value": 3 } },
        { "name": "fourthName", "data": { "value": 4 } }
    ],
    [
        { "name": "fifthName", "data": { "value": 5 } }
    ],
    [
        { "name": "sixthname", "data": { "value": 6 } },
        { "name": "seventhName", "data": { "value": 7 } }
    ]
  ];

  // 待插入对象
  private targetItem = {
    "name": "OneToThree",
    "data": { "value": 123 }
  };

  finalData: any[][];

  constructor() {
    // 执行插入操作（示例2的场景）
    this.finalData = this.insertInto2DArray(this.originalData, this.targetItem, 4, 2);
  }

  private insertInto2DArray(originalArray: any[][], targetItem: any, a: number, b: number): any[][] {
    const subArrayIndex = a - 1;
    const itemIndex = b - 1;

    const newArray = JSON.parse(JSON.stringify(originalArray));
    const targetSubArray = newArray[subArrayIndex];

    if (targetSubArray.length < 2) {
      targetSubArray.splice(itemIndex, 0, targetItem);
    } else {
      const removedItem = targetSubArray.splice(itemIndex, 1, targetItem)[0];
      newArray.splice(subArrayIndex + 1, 0, [removedItem]);
    }

    return newArray;
  }
}

内容的提问来源于stack exchange，提问作者Aditya Kumar