자바스크립트에서 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
- JavaScript - 빈 문자열 확인, 2가지 방법
- JavaScript - 날짜/시간 비교, 3가지 방법
- JavaScript - 랜덤 문자열 생성, 2가지 방법
- JavaScript - 마지막 문자 제거, 4가지 방법
- JavaScript - 문자열 공백 제거, 3가지 방법
- JavaScript - 배열을 문자열로 변환, 3가지 방법
- JavaScript - 여러 줄 문자열, 3가지 방법
- JavaScript - 객체를 문자열로 변환, 2가지 방법
- JavaScript - 문자열의 첫번째 문자 가져오기, 4가지 방법
- JavaScript - 문자열의 마지막 문자 가져오기, 4가지 방법
- JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법
- JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법
- JavaScript - 현재 시간 Timestamp 가져오기
- JavaScript - 대소문자 변환 (LowerCase, UpperCase)
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - setTimeout()으로 함수 실행 지연
- JavaScript - 'try...catch'로 예외 처리 방법
- JavaScript - 문자열을 날짜(Date)로 변환하는 방법
- JavaScript - 배열에서 중복 제거, 4가지 방법
- JavaScript - Float을 Integer로 변환, 3가지 방법
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열에서 문자 또는 단어 추출, 4가지 방법
- JavaScript - 문자열 뒤집기, 거꾸로 출력
- JavaScript - 배열의 마지막 요소 가져오기
- JavaScript - 배열에서 최대, 최소 값 찾기
- JavaScript - 소수점 자리수 올림, 내림, 반올림, 제거 방법
- JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
- JavaScript - 타입 확인 방법 (typeof)
- JavaScript - 빈 배열인지 확인 (Empty Array)
- JavaScript - 배열 길이 확인, 길이 변경 (Array.length)
- JavaScript - 문자열에서 숫자만 추출
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 배열 합치기 (concat, spread, push)
- JavaScript - 문자열에서 특정 문자 위치 찾기 (indexOf, lastIndexOf)
- JavaScript - 현재 날짜, 시간 가져오기
- JavaScript - 배열 정렬 방법 (오름차순, 내림차순)