Rekursja i struktury wielowymiarowe w JavaScript

Dana jest tablica wielowymiarowa o dowolnym poziomie zagnieżdżenia, na przykład taka:

javascriptlet arr = [
  1,
  [
    2, 7, 8
  ],
  [
    3, 4, [5, [6, 7]],
  ]
];

Jak widzisz, ta tablica ma złożoną strukturę, przy czym zakłada się, że ta struktura może być dowolna, a poziomy zagnieżdżenia mogą być dowolnie głębokie.

Załóżmy, że chcemy wypisać w konsoli wszystkie prymitywne (czyli nie tablice) elementy naszej tablicy. W tym przypadku do iteracji po takiej tablicy po prostu nie uda nam się użyć pętli, ponieważ tablica ma nieregularną strukturę i nieznany poziom zagnieżdżenia.

Za to do iteracji po takiej tablicy bardzo wygodnie będzie użyć rekursji.

Na początek zróbmy funkcję, do której parametrem przekażemy naszą tablicę, a w funkcji zróbmy pętlę do iteracji po naszej tablicy:

javascriptfunction func(arr) {
  for (let elem of arr) {
    console.log(elem);
  }
}

func([1, [2, 7, 8], [3, 4, [5, [6, 7]]]]);

Zrobiona przez nas pętla będzie iterować tylko po elementach głównej tablicy. Czyli na początku wypisze 1, potem [2, 7, 8], a potem [3, 4, [5, [6, 7]].

Sprawmy teraz, aby w pętli rozróżniać elementy-prymitywy i elementy-tablice:

javascriptfunction func(arr) {
  for (let elem of arr) {
    if (typeof elem == 'object') {
      // element - tablica
    } else {
      // element - prymityw
      console.log(elem);
    }
  }
}

func([1, [2, 7, 8], [3, 4, [5, [6, 7]]]]);

A teraz zróbmy tak, aby jeśli nasz element to tablica, funkcja wywoływała samą siebie, przekazując parametrem tę tablicę:

javascriptfunction func(arr) {
  for (let elem of arr) {
    if (typeof elem == 'object') {
      func(elem);
    } else {
      console.log(elem);
    }
  }
}

func([1, [2, 7, 8], [3, 4, [5, [6, 7]]]]);

javascript{a: 1, b: {c: 2, d: 3, e: 4}, f: {g: 5, j: 6, k: {l: 7, m: {n: 8, o: 9}}}}

javascript[1, [2, 7, 8], [3, 4, [5, [6, 7]]]]

javascript[1, 2, 7, 8, 3, 4, 5, 6, 7]