JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법

Javascriptarray

자바스크립트에서 2차원 배열을 1차원 배열로 변환하는 두가지 방법을 소개합니다.

여기서 2차원 배열의 의미는 arr처럼 배열 안에 1차원 배열이 있는 객체를 말합니다. 1차원 배열은 arr2처럼 배열 안에 객체들만 있는 것을 말합니다.

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];
const arr2 = [ 'a', 'b', 'c', 'd', 'e', 'f' ];

1. reduce()를 이용하여 2차원 배열을 1차원 배열로 변환

reduce()와 concat()을 이용하여 2차원 배열을 1차원으로 변환할 수 있습니다. reduce()는 배열의 첫번째 요소부터 마지막 요소까지 순회하면서 연산을 수행하고, 누적된 객체 하나를 리턴하는 함수입니다. 배열을 순회하면서 concat()으로 요소를 1차원 배열로 만듭니다. 그리고 A.concat(B)는 A 배열의 요소와 B 배열의 요소를 모두 합쳐 하나의 배열로 리턴하는 함수입니다.

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

const arr2 = arr.reduce(function (acc, cur) {
  return acc.concat(cur);
});

console.log(arr2);

Output:

[ 'a', 'b', 'c', 'd', 'e', 'f' ]

1.1 concat() 대신에 Spread operator로 구현

두개 배열을 하나의 배열로 만들 때, concat() 대신에 아래와 같이 Spread operator를 사용할 수 있습니다.

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

const arr2 = arr.reduce(function (acc, cur) {
  return [...acc, ...cur];
});

console.log(arr2);

2. for 반복문으로 2차원 배열을 1차원 배열로 변환

forEach()와 concat()을 이용하여 2차원 배열을 1차원으로 만들 수 있습니다. 아래와 같이 배열의 모든 요소를 순회하면서 1차원 배열로 변환하도록 구현할 수 있습니다.

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

let arr2 = [];
arr.forEach((element) => {
  arr2 = arr2.concat(element);
})

console.log(arr2);

Output:

[ 'a', 'b', 'c', 'd', 'e', 'f' ]

2.1 concat() 대신에 Spread operator로 구현

위와 마찬가지로 concat() 대신에 Spread operator를 사용할 수도 있습니다.

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

let arr2 = [];
arr.forEach((element) => {
  arr2 = [...arr2, ...element];
})

console.log(arr2);
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha