JavaScript에서 Array.flat()을 사용하여 배열 평면화

#JavaScript에서 배열을 평면화하는 것은 항상 복잡했습니다. 더 이상! ES2019에서는 배열을 평면화하는 새로운 방법을 도입했습니다. 그리고 "깊이"매개변수가 있으므로 모든 수준의 중첩을 전달할 수 있습니다. 놀랍습니다 🤩

const nested = [ ['📦', '📦'], ['📦']];

const flattened = nested.flat();

console.log(flattened);
// ['📦', '📦', '📦']

깊이 매개변수 설정

이 방법의 구문은 다음과 같습니다.

array.flat(<depth>);

기본적으로 flat()는 한 레이어 깊이만 병합합니다. 즉, depth는 1입니다.

array.flat();

// Same as

array.flat(1);

더 깊은 중첩 배열

좋은 점은 이 방법이 1레벨 이상에서도 작동한다는 것입니다. 더 깊은 중첩 배열을 평면화하려면 적절한depth 매개변수를 설정하기만 하면 됩니다.

const twoLevelsDeep = [[1, [2, 2], 1]];

// depth = 1
twoLevelsDeep.flat()
// [1, [2, 2], 1]

// depth = 2
twoLevelsDeep.flat(2)
// [1, 2, 2, 1]

무한 중첩 배열

무한히 깊이 들어가고 싶다고 합시다. 문제 없습니다. 우리도 그렇게 할 수 있습니다. 그냥 패스Infinity .

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

veryDeep.flat(Infinity);
// [1, 2, 2, 3, 4, 5, 6, 1]

빈 슬롯이 있는 배열

flat()가 할 수 있는 또 다른 멋진 기능은 어레이에서 빈 슬롯을 제거하는 것입니다.

const missingNumbers = [1, ,3, ,5];

missingNumbers.flat();
// [1, 3, 5];

브라우저 지원

flat는 ES2019에 도입된 매우 새로운 기능이므로 Internet Explorer나 Edge는 잊어버리십시오. 하지만 놀라지 마세요 😅

Browser Support: flat

대체 솔루션

지원이 크지 않기 때문입니다. 다음은 몇 가지 대체 솔루션입니다.

ES6 솔루션

다음은 ES6 솔루션입니다. 이것은 하나의 수준 중첩 배열에서만 작동합니다.

const oneLevelDeep = [ [1, 2], [3]];

const flattened = [].concat(...oneLevelDeep);
// [1, 2, 3,]

이전 브라우저 솔루션

다음은 이전 브라우저 및 ES6 이전 버전에 대한 것입니다. 다시 말하지만 이것은 하나의 수준 중첩 배열에서만 작동합니다.

const oneLevelDeep = [ [1, 2], [3]];

const flattened = [].concat.apply([], oneLevelDeep);
// [1, 2, 3,]

재귀

중첩이 더 깊은 배열의 경우 재귀를 사용할 수 있습니다. 다음은 MDN web docs의 솔루션입니다.

var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

커뮤니티 입력

💬 Array.flat()의 흥미로운 사용 사례가 있습니까?

: 다소 먼 사용 사례이지만 언급할 가치가 있습니다. 기계 학습에서 예를 들어 세대 배열이 있는 경우 각 세대는 학생 배열입니다. 모든 세대의 모든 학생을 가지려면 이 방법은 다음과 같습니다. 매우 실용적입니다.

: 몇 주 전에 이와 같은 문제로 코드 테스트를 작성했습니다. 이것은 내 인생을 훨씬 쉽게 만들었을 것입니다! 😂

// Please write a function to search for 213

function search(needle, haystack) {}

const haystack =[1, 4, [5,6,7, [8, 18, [34,177,[98,[210,[213]]]]]]];
const needle = 213;

자원

MDN Web Docs:

Alligator: Flatten Arrays in Vanilla JavaScript with flat and flatMap

Flatten array of arrays with JavaScript

Stack Overflow: Merge/flatten an array of arrays

Flattening multidimensional Arrays in JavaScript

Flattening Arrays in JavaScript with flat and flatMap

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Blog | SamanthaMing.com