두 개의 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.prototype및 for 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)으로 내 테스트를 모두 능가합니다.

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

ECMAScript 6을 사용하여 간단하게 수행 할 수 있습니다.

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = [...new Set([...array1 ,...array2])];
console.log(array3); // ["Vijendra", "Singh", "Shakya"];

• 배열을 연결 하려면 스프레드 연산자 를 사용하십시오 .
• 고유 한 요소 세트 를 작성 하려면 세트 를 사용 하십시오 .
• 다시 스프레드 연산자를 사용하여 Set을 배열로 변환하십시오.

Array.prototype.merge = function(/* variable number of arrays */){
    for(var i = 0; i < arguments.length; i++){
        var array = arguments[i];
        for(var j = 0; j < array.length; j++){
            if(this.indexOf(array[j]) === -1) {
                this.push(array[j]);
            }
        }
    }
    return this;
};

훨씬 나은 배열 병합 기능.

그냥 내 두 센트에 던져.

function mergeStringArrays(a, b){
    var hash = {};
    var ret = [];

    for(var i=0; i < a.length; i++){
        var e = a[i];
        if (!hash[e]){
            hash[e] = true;
            ret.push(e);
        }
    }

    for(var i=0; i < b.length; i++){
        var e = b[i];
        if (!hash[e]){
            hash[e] = true;
            ret.push(e);
        }
    }

    return ret;
}

이것은 내가 많이 사용하는 방법이며, 객체를 해시 조회 테이블로 사용하여 중복 검사를 수행합니다. 해시가 O (1)이라고 가정하면 O (n)에서 실행됩니다. 여기서 n은 a.length + b.length입니다. 브라우저가 해시를 어떻게 수행하는지 잘 모르겠지만 수천 개의 데이터 포인트에서 잘 작동합니다.

중첩 루프 (O (n ^ 2))와 .indexOf()(+ O (n))을 피하십시오.

function merge(a, b) {
    var hash = {}, i;
    for (i=0; i<a.length; i++) {
        hash[a[i]]=true;
    } 
    for (i=0; i<b.length; i++) {
        hash[b[i]]=true;
    } 
    return Object.keys(hash);
}

이 답변을 최대한 활용 하고 훌륭한 기능으로 전환했습니다.

function mergeUnique(arr1, arr2){
    return arr1.concat(arr2.filter(function (item) {
        return arr1.indexOf(item) === -1;
    }));
}

왜 물건을 사용하지 않습니까? 세트를 모델링하려는 것 같습니다. 그러나 이것은 순서를 유지하지 않습니다.

var set1 = {"Vijendra":true, "Singh":true}
var set2 = {"Singh":true,  "Shakya":true}

// Merge second object into first
function merge(set1, set2){
  for (var key in set2){
    if (set2.hasOwnProperty(key))
      set1[key] = set2[key]
  }
  return set1
}

merge(set1, set2)

// Create set from array
function setify(array){
  var result = {}
  for (var item in array){
    if (array.hasOwnProperty(item))
      result[array[item]] = true
  }
  return result
}

최고의 솔루션 ...

당신은 타격하여 브라우저 콘솔에서 직접 확인할 수 있습니다 ...

중복하지 않고

a = [1, 2, 3];
b = [3, 2, 1, "prince"];

a.concat(b.filter(function(el) {
    return a.indexOf(el) === -1;
}));

중복

["prince", "asish", 5].concat(["ravi", 4])

중복없이 원하는 경우에 당신은 여기에서 더 나은 솔루션을 시도 할 수 있습니다 - 코드를 외치고 .

[1, 2, 3].concat([3, 2, 1, "prince"].filter(function(el) {
    return [1, 2, 3].indexOf(el) === -1;
}));

Chrome 브라우저 콘솔에서 사용해보기

 f12 > console

산출:

["prince", "asish", 5, "ravi", 4]

[1, 2, 3, "prince"]

내 반 페니 :

Array.prototype.concat_n_dedupe = function(other_array) {
  return this
    .concat(other_array) // add second
    .reduce(function(uniques, item) { // dedupe all
      if (uniques.indexOf(item) == -1) {
        uniques.push(item);
      }
      return uniques;
    }, []);
};

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

var result = array1.concat_n_dedupe(array2);

console.log(result);

Underscore.js의 => uniq을 사용하여 간단히 달성 할 수 있습니다 .

array3 = _.uniq(array1.concat(array2))

console.log(array3)

[ "Vijendra", "Singh", "Shakya"] 가 인쇄됩니다 .

ES6의 경우 한 줄만 :

a = [1, 2, 3, 4]
b = [4, 5]
[...new Set(a.concat(b))]  // [1, 2, 3, 4, 5]

나는이 질문이 객체 배열에 관한 것이 아니라 검색자가 여기에 있다는 것을 알고 있습니다.

따라서 미래의 독자들을 위해 적절한 ES6 방식을 병합하고 중복 제거하는 것이 좋습니다.

객체 배열 :

var arr1 = [ {a: 1}, {a: 2}, {a: 3} ];
var arr2 = [ {a: 1}, {a: 2}, {a: 4} ];

var arr3 = arr1.concat(arr2.filter( ({a}) => !arr1.find(f => f.a == a) ));

// [ {a: 1}, {a: 2}, {a: 3}, {a: 4} ]

//Array.indexOf was introduced in javascript 1.6 (ECMA-262) 
//We need to implement it explicitly for other browsers, 
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt, from)
  {
    var len = this.length >>> 0;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
//now, on to the problem

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

var merged = array1.concat(array2);
var t;
for(i = 0; i < merged.length; i++)
  if((t = merged.indexOf(i + 1, merged[i])) != -1)
  {
    merged.splice(t, 1);
    i--;//in case of multiple occurrences
  }

indexOf다른 브라우저에 대한 메소드 구현은 MDC 에서 가져옵니다.

새로운 솔루션 ( Array.prototype.indexOf및 사용 Array.prototype.concat) :

Array.prototype.uniqueMerge = function( a ) {
    for ( var nonDuplicates = [], i = 0, l = a.length; i<l; ++i ) {
        if ( this.indexOf( a[i] ) === -1 ) {
            nonDuplicates.push( a[i] );
        }
    }
    return this.concat( nonDuplicates )
};

용법:

>>> ['Vijendra', 'Singh'].uniqueMerge(['Singh', 'Shakya'])
["Vijendra", "Singh", "Shakya"]

인터넷 익스플로러의 경우 Array.prototype.indexOf :

Array.prototype.indexOf = Array.prototype.indexOf || function(elt)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0) ? Math.ceil(from): Math.floor(from); 
    if (from < 0)from += len;

    for (; from < len; from++)
    {
      if (from in this && this[from] === elt)return from;
    }
    return -1;
  };

Set을 사용하여 수행 할 수 있습니다.

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

var array3 = array1.concat(array2);
var tempSet = new Set(array3);
array3 = Array.from(tempSet);

//show output
document.body.querySelector("div").innerHTML = JSON.stringify(array3);

<div style="width:100%;height:4rem;line-height:4rem;background-color:steelblue;color:#DDD;text-align:center;font-family:Calibri" > 
  temp text 
</div>

두 어레이를 병합하기위한 솔루션이 너무 많습니다. lodash 또는 underscore.js와 같은 타사 라이브러리 사용을 제외하고 두 가지 주요 범주로 나눌 수 있습니다.

a) 두 배열을 결합하고 중복 된 항목을 제거합니다.

b) 항목을 결합하기 전에 필터링하십시오.

두 배열을 결합하고 중복 된 항목 제거

결합

// mutable operation(array1 is the combined array)
array1.push(...array2);
array1.unshift(...array2);

// immutable operation
const combined = array1.concat(array2);
const combined = [...array1, ...array2];    // ES6

통일

배열을 통합하는 방법에는 여러 가지가 있습니다. 개인적으로 아래 두 가지 방법을 제안합니다.

// a little bit tricky
const merged = combined.filter((item, index) => combined.indexOf(item) === index);
const merged = [...new Set(combined)];

항목을 결합하기 전에 필터링

여러 가지 방법이 있지만 간단하기 때문에 아래 코드를 개인적으로 제안합니다.

const merged = array1.concat(array2.filter(secItem => !array1.includes(secItem)));

Array.prototype.add = function(b){
    var a = this.concat();                // clone current object
    if(!b.push || !b.length) return a;    // if b is not an array, or empty, then return a unchanged
    if(!a.length) return b.concat();      // if original is empty, return b

    // go through all the elements of b
    for(var i = 0; i < b.length; i++){
        // if b's value is not in a, then add it
        if(a.indexOf(b[i]) == -1) a.push(b[i]);
    }
    return a;
}

// Example:
console.log([1,2,3].add([3, 4, 5])); // will output [1, 2, 3, 4, 5]

array1.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)

이것에 대한 좋은 점은 성능이며 일반적으로 배열로 작업 할 때 필터, 맵 등과 같은 메소드를 연결하여 해당 줄을 추가 할 수 있으며 나중에 참조 할 필요없이 array2와 array2를 연결하고 중복 제거합니다 하나 (당신이 가지고 있지 않은 연결 방법 인 경우), 예 :

someSource()
.reduce(...)
.filter(...)
.map(...) 
// and now you want to concat array2 and deduplicate:
.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)
// and keep chaining stuff
.map(...)
.find(...)
// etc

(나는 Array.prototype을 오염시키는 것을 좋아하지 않으며 체인을 존중하는 유일한 방법이 될 것입니다-새로운 함수를 정의하면 깨질 것입니다. 그래서 이와 같은 것이 그것을 달성하는 유일한 방법이라고 생각합니다)

당신은 이것을 시도 할 수 있습니다 :

const union = (a, b) => Array.from(new Set([...a, ...b]));

console.log(union(["neymar","messi"], ["ronaldo","neymar"]));

ES2015를 통한 기능적 접근

기능적 접근에 union따라 두 가지 중 하나 Array의 a 는 concat및 의 구성입니다 filter. 최적의 성능을 제공하기 Set위해 속성 조회에 최적화 된 기본 데이터 유형을 사용합니다.

어쨌든, union기능 과 관련하여 중요한 질문은 중복을 처리하는 방법입니다. 다음과 같은 순열이 가능합니다.

Array A      + Array B

[unique]     + [unique]
[duplicated] + [unique]
[unique]     + [duplicated]
[duplicated] + [duplicated]

처음 두 순열은 단일 함수로 처리하기 쉽습니다. 그러나 마지막 두 개는 Set조회에 의존하는 한 처리 할 수 ​​없으므로 더 복잡 합니다. 일반 오래된 Object속성 조회로 전환 하면 심각한 성능 저하가 수반되므로 다음 구현에서는 세 번째 및 네 번째 순열을 무시합니다. union이를 지원하기 위해 별도의 버전을 구축 해야합니다.

// small, reusable auxiliary functions

const comp = f => g => x => f(g(x));
const apply = f => a => f(a);
const flip = f => b => a => f(a) (b);
const concat = xs => y => xs.concat(y);
const afrom = apply(Array.from);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// de-duplication

const dedupe = comp(afrom) (createSet);


// the actual union function

const union = xs => ys => {
  const zs = createSet(xs);  
  return concat(xs) (
    filter(x => zs.has(x)
     ? false
     : zs.add(x)
  ) (ys));
}


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,4,5,6,6];


// here we go

console.log( "unique/unique", union(dedupe(xs)) (ys) );
console.log( "duplicated/unique", union(xs) (ys) );

여기에서 unionn(naomik의 의견에서 영감을 얻은) 많은 수의 배열을 허용 하는 함수 를 구현하는 것이 쉽지 않습니다.

// small, reusable auxiliary functions

const uncurry = f => (a, b) => f(a) (b);
const foldl = f => acc => xs => xs.reduce(uncurry(f), acc);

const apply = f => a => f(a);
const flip = f => b => a => f(a) (b);
const concat = xs => y => xs.concat(y);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// union and unionn

const union = xs => ys => {
  const zs = createSet(xs);  
  return concat(xs) (
    filter(x => zs.has(x)
     ? false
     : zs.add(x)
  ) (ys));
}

const unionn = (head, ...tail) => foldl(union) (head) (tail);


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,4,5,6,6];
const zs = [0,1,2,3,4,5,6,7,8,9];


// here we go

console.log( unionn(xs, ys, zs) );

그것은 unionn단지 foldl(일명 Array.prototype.reduce)이며, union감속기로 사용됩니다. 참고 : 구현시 추가 누산기를 사용하지 않으므로 인수없이 적용하면 오류가 발생합니다.

그것을 위해 ... 여기에 단일 라인 솔루션이 있습니다 :

const x = [...new Set([['C', 'B'],['B', 'A']].reduce( (a, e) => a.concat(e), []))].sort()
// ['A', 'B', 'C']

특히 읽을 수는 없지만 누군가에게 도움이 될 수 있습니다.

1. 초기 누산기 값을 빈 배열로 설정하여 축소 기능을 적용합니다.
2. reduce 함수는 concat을 사용하여 각 하위 배열을 누산기 배열에 추가합니다.
3. 이것의 결과는 생성자 매개 변수로 전달되어 새로운을 작성합니다 Set.
4. 스프레드 연산자는를 Set배열 로 변환하는 데 사용됩니다 .
5. 이 sort()함수는 새 배열에 적용됩니다.

단일 중복 제거 또는 여러 어레이 입력 병합 및 중복 제거. 아래 예.

ES6 사용-설정, 구성 해제

여러 배열 인수를 취하는이 간단한 함수를 작성했습니다. 위의 솔루션과 거의 동일하게 더 실용적인 사용 사례가 있습니다. 이 함수는 중복 값을 하나의 배열에만 연결하지 않으므로 나중에 나중에 삭제할 수 있습니다.

단축 기능 정의 (단 9 줄)

/**
* This function merging only arrays unique values. It does not merges arrays in to array with duplicate values at any stage.
*
* @params ...args Function accept multiple array input (merges them to single array with no duplicates)
* it also can be used to filter duplicates in single array
*/
function arrayDeDuplicate(...args){
   let set = new Set(); // init Set object (available as of ES6)
   for(let arr of args){ // for of loops through values
      arr.map((value) => { // map adds each value to Set object
         set.add(value); // set.add method adds only unique values
      });
   }
   return [...set]; // destructuring set object back to array object
   // alternativly we culd use:  return Array.from(set);
}

사용 예 코드 펜 :

// SCENARIO 
let a = [1,2,3,4,5,6];
let b = [4,5,6,7,8,9,10,10,10];
let c = [43,23,1,2,3];
let d = ['a','b','c','d'];
let e = ['b','c','d','e'];

// USEAGE
let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e);
let uniqueArraySingle = arrayDeDuplicate(b);

// OUTPUT
console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"]
console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10]

var arr1 = [1, 3, 5, 6];
var arr2 = [3, 6, 10, 11, 12];
arr1.concat(arr2.filter(ele => !arr1.includes(ele)));
console.log(arr1);

output :- [1, 3, 5, 6, 10, 11, 12]