[flat] flatten, unflatten

flatten, unflatten

• unflatten은 중첩된 배열을 의미한다.

[1, [2, [3]]]

• flatten은 중첩이 없는 배열을 의미한다.

[1, 2, 3]

flat

const newArr = arr.flat([depth])

• 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.

• depth: 중첩 배열 구조를 평탄화할 때 사용할 깊이 값. 기본값은 1

• 반환 값: 하위 배열을 이어붙인 새로운 배열을 반환한다.

중첩 배열 평탄화

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

배열 구멍 제거

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

flat 대안

• flat은 브라우저에 최척화가 되어있지 않아 속도가 느리다는 단점이 있다.

대안 1 :: reduce와 concat

• 단점: depth를 1로만 설정할 수 있다.

const arr = [1, 2, [3, 4]];

// To flat single level array
arr.flat();
// is equivalent to
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

// or with decomposition syntax
const flattened = arr => [].concat(...arr);

대안 2 :: reduce + concat + isArray + 재귀

• depth 제한이 없다.

const arr = [1, 2, [3, 4, [5, 6]]];

// to enable deep level flatten use recursion with reduce and concat
function flatDeep(arr, d = 1) {
   return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
                : arr.slice();
};

flatDeep(arr, Infinity);
// [1, 2, 3, 4, 5, 6]