This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

flat() 메소드는 모든 하위 배열 엘리먼트를 지정된 깊이까지 재귀적으로 이어붙여 새로운 배열을 생성합니다.

Syntax

var newArray = arr.flat(depth);

Parameters

depth Optional
중첩된 배열 구조를 평평하게 만들기 위한 깊이 값. 기본값은 1.

Return value

하위 배열을 이어붙인 새로운 배열.

Examples

Flattening nested arrays

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

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

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

Flattening and array holes

flat 메소드는 배열의 빈 슬롯을 제거합니다.

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Alternative

reduce and concat

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

//단일 레벨 배열로 평평하게 하려면
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]

 

//reduce와 concat을 사용해 재귀적으로 깊은 레벨 평평화(deep level flatten)를 가능하게 하려면
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]

 

//스택을 사용해 재귀 없는 평평화
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // 스택에서 값을 pop
    const next = stack.pop();
    if (Array.isArray(next)) {
      // 배열 항목을 다시 push, 원래 인풋을 수정하지 않음
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  //입력 순서를 복구하기 위한 reverse
  return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

Specifications

Specification Status Comment
Array.prototype.flat proposal Candidate (3)  

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic support
Experimental
Chrome Full support 69Edge No support NoFirefox Full support 62IE No support NoOpera Full support 56Safari Full support 12WebView Android Full support 69Chrome Android Full support 69Edge Mobile No support NoFirefox Android Full support 62Opera Android Full support 56Safari iOS Full support 12Samsung Internet Android No support Nonodejs No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: cs09g
최종 변경자: cs09g,