JavaScript에서 중복없이 두 배열 병합
Moataz Farid
2023년10월12일
- ECMAScript 6에서 스프레드 구문을 사용하는 JavaScript 병합 배열
-
ECMAScript 5에서
Array.concat함수를 사용하여 JavaScript 병합 배열 -
for루프를 사용하여 배열에서 중복 제거 -
JavaScript는 ECMAScript 6에서
Array.prototype을 사용하여 어레이에서 어레이 중복 제거 -
JavaScript는 ECMAScript 5에서
Object.defineProperty를 사용하여 배열에서 중복 항목을 제거합니다 -
Lo-Dash또는Underscore.js를 사용하여 고유 한 값만 병합 및 유지 -
ECMAScript 6에서
Set을 사용하여 고유 한 값만 병합 및 유지 -
단지 O(n) 복잡성으로
for루프와Dictionary를 사용하여 중복 값없이 병합
이 튜토리얼은 중복 값없이 JavaScript에서 두 배열을 병합하는 방법을 배웁니다.
먼저 ES5 및 ES6 버전에서 서로 다른 병합 방법을 보여줍니다.
그런 다음 다른 방법을 사용하여 중복을 제거하는 방법을 배웁니다.
마지막으로 자신의 함수를 작성하거나 외부 라이브러리를 사용하여 한 단계만으로 작업을 수행하는 방법을 배웁니다.
두 개의 배열arrayA와arrayB가 있고이를arrayC에 병합한다고 가정 해 보겠습니다.
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
ECMAScript 6에서 스프레드 구문을 사용하는 JavaScript 병합 배열
확산 구문 (...)은 배열과 같은 요소가 예상되는 위치 또는 함수에서 0 개 이상의 인수가 예상되는 위치에서 반복 가능한 요소의 내용을 확장하는 데 사용됩니다. 예를 들면 다음과 같습니다.
var arr = [2, 4];
function add(x, y) {
return x + y;
}
console.log(add(...arr));
이제 스프레드 구문을 사용하여 배열을arrayC로 병합하겠습니다.
arrayC = [...arrayA, ...arrayB];
console.log(arrayC);
예제 코드 :
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);
//merging using the spread syntax
arrayC = [...arrayA,...arrayB];
console.log("Merged Using Spread Syntax >"+arrayC);
출력:
Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Spread Syntax >Java,JavaScript,C#,PHP,Java
ECMAScript 5에서Array.concat 함수를 사용하여 JavaScript 병합 배열
Array.concat을 사용한 병합은 입력 배열 (arrayB)의 내용을 소스 배열 (arrayA)의 내용에 연결하는 데 사용됩니다.
arrayC = arrayA.concat(arrayB);
console.log(arrayC);
결과 배열에서 중복을 제거하려면 여러 가지 방법으로 할 수 있으므로 어떻게 할 수 있는지 살펴 보겠습니다.
예:
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);
//merging using Array.concat function in ECMAScript 5
arrayC = arrayA.concat(arrayB);
console.log("Merged Using Array.concat function >"+arrayC);
출력:
Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Array.concat function >Java,JavaScript,C#,PHP,Java
for 루프를 사용하여 배열에서 중복 제거
중복을 제거하는 가장 간단한 방법은 중첩 된 for 루프를 만드는 것입니다.
우리의 알고리즘은 다음과 같습니다.
- 입력 배열
inArray에서 복제본을 생성하여 원래 배열을 변경하지 않습니다. arr.splice()를 사용하여 찾은 중복 요소를 찾아 제거하는 중첩 루프를 만듭니다. 바깥 쪽은n에서 시작하고 안쪽은n+1에서 시작합니다.
function removeDuplicates(inArray) {
var arr =
inArray
.concat() // create a clone from inArray so not to change input array
// create the first cycle of the loop starting from element 0 or n
for (var i = 0; i < arr.length; ++i) {
// create the second cycle of the loop from element n+1
for (var j = i + 1; j < arr.length; ++j) {
// if the two elements are equal , then they are duplicate
if (arr[i] === arr[j]) {
arr.splice(j, 1); // remove the duplicated element
}
}
}
return arr;
}
그런 다음 다른 함수처럼 removeDuplicates함수를 사용할 수 있습니다.
var arrayWithoutDuplicates = removeDuplicates(arrayC);
console.log(arrayWithoutDuplicates);
예:
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);
//removing duplicates from an array using nested for loop
function removeDuplicates(inArray){
var arr = inArray.concat() // create a clone from inArray so not to change input array
//create the first cycle of the loop starting from element 0 or n
for(var i=0; i<arr.length; ++i) {
//create the second cycle of the loop from element n+1
for(var j=i+1; j<arr.length; ++j) {
//if the two elements are equal , then they are duplicate
if(arr[i] === arr[j]) {
arr.splice(j, 1); //remove the duplicated element
}
}
}
return arr;
}
arrayC = arrayA.concat(arrayB);
console.log("Merged arrayC > "+ arrayC );
console.log("Removing duplicates using removeDuplicates > "+ removeDuplicates(arrayC) );
출력:
Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged arrayC > Java,JavaScript,C#,PHP,Java
Removing duplicates using removeDuplicates > Java,JavaScript,C#,PHP
JavaScript는 ECMAScript 6에서Array.prototype을 사용하여 어레이에서 어레이 중복 제거
ECMAScript 6을 사용할 수있는 경우Array.prototype을 사용하여 중복을 제거 할 수도 있습니다.
prototype이란 무엇을 의미합니까? prototype은JavaScript의 모든 함수 및 객체와 관련된 객체와 같습니다.
Array.prototype을 사용하는 방법을 살펴 보겠습니다.
우리의 알고리즘은 다음과 같습니다.
- 배열 객체
this.concat()에서 복제본을 생성하여 원래 배열을 변경하지 않습니다. arr.splice()를 사용하여 찾은 중복 요소를 찾아 제거하는 중첩 루프를 만듭니다. 바깥 쪽은n에서 시작하고 안쪽은n+1에서 시작합니다.
Array.prototype.removeDuplicates = function() {
var arr = this.concat(); // create a clone from the input so not to change
// the source
// create the first cycle of the loop starting from element 0 or n
for (var i = 0; i < arr.length; ++i) {
// create the second cycle of the loop from element n+1
for (var j = i + 1; j < arr.length; ++j) {
// if the two elements are equal , then they are duplicate
if (arr[i] === arr[j]) {
arr.splice(j, 1); // remove the duplicated element
}
}
}
return arr;
}
그런 다음 프로토 타입을 호출하는 것은 다음과 같습니다.
var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);
예:
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);
arrayC = arrayA.concat(arrayB);
//removing duplicates from an array using Array.prototype in ECMAScript 6
Array.prototype.removeDuplicatesPrototype = function() {
var arr = this.concat(); // get the input array
//create the first cycle of the loop starting from element 0 or n
for(var i=0; i<arr.length; ++i) {
//create the second cycle of the loop from element n+1
for(var j=i+1; j<arr.length; ++j) {
//if the two elements are equal , then they are duplicate
if(arr[i] === arr[j]) {
arr.splice(j, 1); //remove the duplicated element
}
}
}
return arr;
}
console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesPrototype > "+arrayC.removeDuplicatesPrototype());
JavaScript는 ECMAScript 5에서Object.defineProperty를 사용하여 배열에서 중복 항목을 제거합니다
ECMAScript 5 만 사용할 수 있다면 모든Array 유형 요소에서 중복을 제거 할 수있는 방식으로Object.defineProperty를 사용하여 자체 속성을 만들 수 있습니다.
여기서는Array.prototype을 입력하여 작성하여 속성 유형을 배열 프로토 타입으로 정의합니다. 속성 이름은removeDuplicates와 같이 다음 매개 변수로 삽입되어야합니다.
그것이 어떻게 올바르게 쓰여 졌는지 봅시다 :
Object.defineProperty(Array.prototype, 'removeDuplicates', {
// defining the type and name of the property
enumerable: false,
configurable: false,
writable: false,
value: function() {
var arr = this.concat(); // get the input array
// create the first cycle of the loop starting from element 0 or n
for (var i = 0; i < arr.length; ++i) {
// create the second cycle of the loop from element n+1
for (var j = i + 1; j < arr.length; ++j) {
// if the two elements are equal , then they are duplicate
if (arr[i] === arr[j]) {
arr.splice(j, 1); // remove the duplicated element
}
}
}
return arr;
}
});
그런 다음 해당 속성을 다음과 같이 직접 호출 할 수 있습니다.
var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);
예
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);
arrayC = arrayA.concat(arrayB);
//removing duplicates from an array using defineProperty in ECMAScript 5
Object.defineProperty(Array.prototype, 'removeDuplicatesProperty', { //defining the type and name of the property
enumerable: false,
configurable: false,
writable: false,
value: function() {
var arr = this.concat(); // get the input array
//create the first cycle of the loop starting from element 0 or n
for(var i=0; i<arr.length; ++i) {
//create the second cycle of the loop from element n+1
for(var j=i+1; j<arr.length; ++j) {
//if the two elements are equal , then they are duplicate
if(arr[i] === arr[j]) {
arr.splice(j, 1); //remove the duplicated element
}
}
}
return arr;
}
});
console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesProperty > "+arrayC.removeDuplicatesProperty() );
Lo-Dash 또는Underscore.js를 사용하여 고유 한 값만 병합 및 유지
목표가 두 개 이상의 배열에서 고유 한 값의 새 배열을 가져오고 외부 파일을 사용하는 것이라면 Lo-Dash라이브러리를 사용하면됩니다.
먼저 HTML 템플릿 내에서Cloudflare CDN을 사용하여 라이브러리를 가져와야합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
그런 다음 라이브러리를 다음과 같이 사용합니다.
arrayC = _.union(arrayA, arrayB);
예:
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);
// merging arrayA and arrayB keeping only unique values using Lo-Dash library
// don't forget to import the script using <script
// src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
console.log(
'Merging arrayA and arrayB keeping only unique values using Lo-Dash Lib. > ' +
_.union(arrayA, arrayB));
ECMAScript 6에서Set을 사용하여 고유 한 값만 병합 및 유지
ECMAScript 6을 사용할 수 있고 대상이 여러 배열의 고유 한 값인 경우 Set이 매우 좋은 옵션이 될 수 있습니다.
spread 구문을 사용하여 아래 예제와 같이 사용할 수 있습니다.
arrayC = [...new Set([...arrayA, ...arrayB])];
또는 그렇게 사용할 수 있습니다
arrayC = Array.from(new Set(arrayA.concat(arrayB)));
예:
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);
// merging arrayA and arrayB keeping unique values using Set in ECMAScript 6
console.log(
'Merging arrayA and arrayB keeping only unique values using Set > ' +
Array.from(new Set(arrayA.concat(arrayB))));
console.log(
'Merging arrayA and arrayB keeping only unique values using Set with spread syntax > ' +
[...new Set([...arrayA, ...arrayB])]);
단지 O(n) 복잡성으로for 루프와Dictionary를 사용하여 중복 값없이 병합
두 배열을 병합하고 중복 값없이 결과를 얻는 또 다른 방법은 두 개의 중복 값을 가질 수없는JavaScript의Dictionary 아이디어를 사용하는 것입니다.
function mergeAndGetUnique(arrayA, arrayB) {
var hash = {};
var x;
for (x = 0; i < arrayA.length; i++) {
hash[arrayA[i]] = true;
}
for (x = 0; i < arrayB.length; i++) {
hash[arrayB[i]] = true;
}
return Object.keys(hash);
}
그런 다음 다음과 같이 함수를 사용할 수 있습니다.
arrayC = mergeAndGetUnique(arrayA, arrayB);
예:
var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;
console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);
arrayC = arrayA.concat(arrayB);
//merging arrayA and arrayB keeping unique values using dictionary with O(n) complexity
function mergeAndGetUnique(arrayA, arrayB) {
var hash = {};
var x;
for (x = 0; x < arrayA.length; x++) {
hash[arrayA[x]] = true;
}
for (x = 0; x < arrayB.length; x++) {
hash[arrayB[x]] = true;
}
return Object.keys(hash);
}
console.log("Merging arrayA and arrayB keeping only unique values using Set with spread syntax > "+ mergeAndGetUnique(arrayA, arrayB) );