바닐라 JavaScript에서 배열을 병합하는 방법(ES5 및 ES6)

이전에 JavaScript의 push()를 사용하여 배열에서 항목을 추가하고 제거하는 방법을 배웠습니다. 방법.

그러나 기존 배열에 항목 배열을 추가하려면 어떻게 해야 합니까? 즉, 서로 다른 두 배열을 병합하려면 어떻게 해야 할까요?

JavaScript에서 둘 이상의 배열을 병합하려면 Array.prototype.push.apply()를 사용할 수 있습니다.

두 개의 과일 바구니가 있고 모든 과일을 한 바구니에 담고 싶다고 가정해 보겠습니다. 문제가 되지 않습니다.

ES5

var fruitBasketOne = ["apple", "banana", "grapes"]
var fruitBasketTwo = ["orange", "apricot", "pear"]
Array.prototype.push.apply(fruitBasketOne, fruitBasketTwo)

// returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

// returns ["orange", "apricot", "pear"]
console.log(fruitBasketTwo)

이렇게 하면 두 번째 배열이 첫 번째 배열에 병합됩니다. 두 번째 배열인 fruitBasketTwo 아직도 기억에 남아있습니다. 이 방법은 하지 않습니다. 원래 배열을 제거합니다.

배열을 ES6과 병합

ES6 스프레드 연산자를 사용하면 병합이 훨씬 쉬워집니다.

let fruitBasketOne = ["apple", "banana", "grapes"]
let fruitBasketTwo = ["orange", "apricot", "pear"]
fruitBasketOne.push(...fruitBasketTwo)

// returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

호환성

첫 번째 푸시 방법은 모든 최신 브라우저와 호환되며 최소한 IE6으로 돌아갑니다. 두 번째 방법은 최신 브라우저에서만 작동하지만 Babel과 같은 전처리기를 사용하여 JavaScript를 다시 ES5 호환 코드로 컴파일하고 이전 브라우저에서 작동하도록 할 수 있습니다.

Array Push 방식에 대해 자세히 알아보세요.