[javascript] JavaScript에서 두 개의 배열을 병합하고 항목을 중복 제거하는 방법

두 개의 JavaScript 배열이 있습니다.

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];

출력을 원합니다.

var array3 = ["Vijendra","Singh","Shakya"];

출력 배열은 반복 된 단어를 제거해야합니다.

JavaScript에서 두 개의 배열을 병합하여 원래 배열에 삽입 된 순서와 동일한 순서로 각 배열에서 고유 한 항목 만 가져 오려면 어떻게합니까?



답변

중복을 제거하지 않고 배열을 병합하려면

ES5 버전 사용 Array.concat:

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];

console.log(array1.concat(array2));

ES6 버전 사용 파괴

const array1 = ["Vijendra","Singh"];
const array2 = ["Singh", "Shakya"];
const array3 = [...array1, ...array2];

중복을 제거하는 ‘내장’방법이 없기 때문에 ( ECMA-262는 실제로이 기능을 사용 Array.forEach하는 것이 좋습니다) 수동으로 수행해야합니다.

Array.prototype.unique = function() {
    var a = this.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
};

그런 다음 사용하십시오.

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
// Merges both arrays and gets unique items
var array3 = array1.concat(array2).unique(); 

이것은 또한 배열의 순서를 유지합니다 (즉, 정렬이 필요하지 않습니다).

많은 사람들이 프로토 타입 기능 보강 Array.prototypefor in루프 에 대해 짜증을 내고 있기 때문에 이를 사용하는 덜 침습적 인 방법은 다음과 같습니다.

function arrayUnique(array) {
    var a = array.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
}

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
    // Merges both arrays and gets unique items
var array3 = arrayUnique(array1.concat(array2));

ES5를 사용할 수있는 브라우저로 작업 할 수있을만큼 운이 좋은 사람들은 다음 Object.defineProperty과 같이 사용할 수 있습니다 .

Object.defineProperty(Array.prototype, 'unique', {
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        var a = this.concat();
        for(var i=0; i<a.length; ++i) {
            for(var j=i+1; j<a.length; ++j) {
                if(a[i] === a[j])
                    a.splice(j--, 1);
            }
        }

        return a;
    }
});


답변

Underscore.js 또는 Lo-Dash를 사용하면 다음을 수행 할 수 있습니다.

console.log(_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

http://underscorejs.org/#union

http://lodash.com/docs#union


답변

먼저 두 배열을 연결 한 다음 고유 항목 만 필터링하십시오.

var a = [1, 2, 3], b = [101, 2, 1, 10]
var c = a.concat(b)
var d = c.filter((item, pos) => c.indexOf(item) === pos)

console.log(d) // d is [1, 2, 3, 101, 10]

편집하다

제안 된대로보다 현명한 솔루션은 다음 b과 연결하기 전에 고유 항목을 필터링하는 것 입니다 a.

var a = [1, 2, 3], b = [101, 2, 1, 10]
var c = a.concat(b.filter((item) => a.indexOf(item) < 0))

console.log(c) // c is [1, 2, 3, 101, 10]


답변

이것은 스프레드 연산자 와 배열 제네릭을 사용하는 ECMAScript 6 솔루션 입니다.

현재는 Firefox 및 Internet Explorer Technical Preview에서만 작동합니다.

그러나 Babel 을 사용 하면 지금 가질 수 있습니다.

const input = [
  [1, 2, 3],
  [101, 2, 1, 10],
  [2, 1]
];
const mergeDedupe = (arr) => {
  return [...new Set([].concat(...arr))];
}

console.log('output', mergeDedupe(input));


답변

ES6

array1.push(...array2) // => don't remove duplication 

또는

[...array1,...array2] //   =>  don't remove duplication 

또는

[...new Set([...array1 ,...array2])]; //   => remove duplication


답변

사용 설정 (2015 인 ECMAScript)를, 그 한 간단하게 될 것입니다 :

const array1 = ["Vijendra", "Singh"];
const array2 = ["Singh", "Shakya"];
console.log(Array.from(new Set(array1.concat(array2))));


답변

루프에 약간의 차이가 있습니다. 최신 버전의 Chrome에서 일부 최적화 기능을 사용하면 두 배열의 통합을 해결하는 가장 빠른 방법입니다 (Chrome 38.0.2111).

http://jsperf.com/merge-two-arrays-keeping-only-unique-values

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = [];

var arr = array1.concat(array2),
  len = arr.length;

while (len--) {
  var itm = arr[len];
  if (array3.indexOf(itm) === -1) {
    array3.unshift(itm);
  }
}

while 루프 : ~ 589k ops / s
필터 : ~ 445k ops / s
lodash :
루프 의 경우 308k ops / s : 225k ops / s

의견에 따르면 내 설정 변수 중 하나가 쓰기 위해 빈 배열을 초기화 할 필요가 없기 때문에 루프가 나머지 루프보다 우선합니다. 나는 이에 동의하므로 테스트를 경기장까지 다시 작성했으며 더 빠른 옵션을 포함 시켰습니다.

http://jsperf.com/merge-two-arrays-keeping-only-unique-values/52

let whileLoopAlt = function (array1, array2) {
    const array3 = array1.slice(0);
    let len1 = array1.length;
    let len2 = array2.length;
    const assoc = {};

    while (len1--) {
        assoc[array1[len1]] = null;
    }

    while (len2--) {
        let itm = array2[len2];

        if (assoc[itm] === undefined) { // Eliminate the indexOf call
            array3.push(itm);
            assoc[itm] = null;
        }
    }

    return array3;
};

이 대체 솔루션에서는 하나의 답변의 연관 배열 솔루션을 결합 .indexOf()하여 루프 에서 호출 을 제거하여 두 번째 루프로 많은 속도를 늦췄으며 다른 사용자가 제안한 다른 최적화도 포함했습니다. .

모든 값 (i-1)에서 이중 루프를 사용하는 가장 좋은 대답은 여전히 ​​상당히 느립니다. lodash는 여전히 강력하고 있으며 프로젝트에 라이브러리를 추가하지 않는 사람에게는 여전히 좋습니다. 원하지 않는 사람들을 위해, 내 while 루프는 여전히 좋은 대답이며 필터 답변은 여기에 매우 강력하게 표시 되어이 글을 쓰는 시점에서 최신 Canary Chrome (44.0.2360)으로 내 테스트를 모두 능가합니다.

체크 아웃 마이크의 대답댄 스토커의 답변을 당신이 속도 노치를 그것을 단계로합니다. 그것들은 거의 모든 가능한 답변을 거친 후 모든 결과 중 가장 빠릅니다.