javascript - Hur man korrekt slår samman två arrayer av objekt?

Jag har följande array med objekt i den:

[
  {
    name: "test",
    sub: {
      name: "asdf",
      sub: {}
    }
  },
  {
    name: "models",
    sub: {}
  }
]

Och jag har även följande objekt:

{
  name: "test",
  sub: {
    name: "asdf",
    sub: {
      name: "inside_asdf",
      sub: {}
    }
  }
}

Nu vill jag på något sätt slå ihop de två så att jag får en array som ser ut så här:

[
  {
    name: "test",
    sub: {
      name: "asdf",
      sub: {
        name: "inside_asdf",
        sub: {}
      }
    }
  },
  {
    name: "models",
    sub: {}
  }
]

Problemet är att jag inte vet hur man gör det. Jag vill också att detta ska fungera med vilken array-djup som helst, så om jag vill slå ihop en array med suben av "inside_asdf" så fungerar det också. Hoppas att någon kan hjälpa mig. Jag har också redan försökt med Object.merge men detta ger inte det önskade resultatet. Jag är tacksam för all information eller lösning. Tack på förhand.

##FIX##
Jag markerade det korrekta svaret nedan. Men eftersom jag programmerade hela applikationen i React med TypeScript hittade jag en annan lösning på detta problem.

Svar #1

Uppdaterat svar ger det resultat du önskar, men det gör det med hjälp av jQuery, prototype $.extend.

Inte det att jag slog in igen, aaaa med []-arraytaggen, eftersom den måste ha samma struktur.

Fullständig kod för att uppnå det du vill:

var data = [
  {
    name: "test",
    sub: {
      name: "asdf",
      sub: {}
    }
  },
  {
    name: "models",
    sub: {}
  }
];

var aaaa = [{
    name: "test",
    sub: {
      name: "asdf",
      sub: {
        name: "inside_asdf",
        sub: {}
      }
    }
  }];


console.log($.extend({}, data, aaaa));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>