The array objects are filled in one by one according to the ID (fill Arr1 into arr2)

 let arr2 = [
      {
    
        left: [
          {
     check: false, name: "IOU", id: 1, value: [] },
          {
     check: false, name: " Check box ", id: 2, value: [] },
          {
     check: false, name: " box ", id: 3, value: [] },
          {
     check: false, name: " attribute ", id: 21, value: [] },
          {
     check: false, name: "22x", id: 23, value: [] },
        ],
        right: [
          {
     check: false, name: "aa", id: 7, value: [] },
          {
     check: false, name: "bb", id: 8, value: [] },
          {
     check: false, name: "cc", id: 9, value: [] },
        ],
      },
    ];
    let arr1 = [
      {
    
        left: [
          {
     check: true, name: "IOU", id: 1, value: ["56", "77"] },
          {
     check: false, name: " Check box ", id: 2, value: [] },
          {
     check: false, name: " box ", id: 3, value: [] },
        ],
        right: [
          {
     check: true, name: "aa", id: 7, value: ["123555"] },
          {
     check: false, name: "bb", id: 8, value: [] },
          {
     check: false, name: "cc", id: 9, value: [] },
          {
     check: true, name: "cc", id: 18, value: ["132"] },
        ],
      },
      {
    
        left: [
          {
     check: false, name: "IOU", id: 1, value: [] },
          {
     check: true, name: " Check box ", id: 2, value: ["66", "7777"] },
          {
     check: false, name: " box ", id: 3, value: [] },
        ],
        right: [
          {
     check: false, name: "aa", id: 7, value: [] },
          {
     check: true, name: "bb", id: 8, value: [] },
          {
     check: false, name: "cc", id: 9, value: [] },
          {
     check: true, name: "cc", id: 18, value: ["132"] },
        ],
      },
    ];

// Method 1 
      const mergeArr = (param1, param2) => {
    
              const templateArr = param1 || [];
              const dataArr = param2 || [];
              const filterFn = (origin = [], target = []) =>
                origin.map((item = {
    }) => ({
    
                  ...item,
                  ...target.filter((obj = {
    }) => obj.id === item.id)[0],
                }));
              return dataArr.map((item = {
    }) => {
    
                const originObj = templateArr[0] || {
    };
                const resultObj = {
    };
                Object.keys(originObj).forEach((key) => {
    
                  resultObj[key] = filterFn(originObj[key], item[key]);
                });
                return resultObj;
              });
            };

            let result = mergeArr(arr2, arr1);
           
 Method 2 ：
    arr1.forEach((item1, index1) => {
    
      item1.left.forEach((item2, index2) => {
    
        arr2[index1].left.forEach((item) => {
    
          if (item.id === item2.id) {
    
            arr1[index1].left[index2] = item;
          }
        });
      });
      item1.right.forEach((item2, index2) => {
    
        arr2[index1].right.forEach((item) => {
    
          if (item.id === item2.id) {
    
            arr1[index1].right[index2] = item;
          }
        });
      });
    });
    console.log(123, arr1);
    

// Method 3 
    const ree = arr1.map((item) => ({
    
               left: arr2[0].left.map(
                (item2) => ({
    
                   ...item2,
                  ...item.left.filter(
                    (obj = {
    }) => obj.id === item2.id
                  )[0],
                })
               ),
               right: arr2[0].right.map(
                (item2) => ({
    
                   ...item2,
                   ...item.right.filter(
                    (obj = {
    }) => obj.id === item2.id
                  )[0],
                })
               ),
            }));
             let result = ree;