У мене є два масиви 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

Використовуючи набір (ECMAScript 2015), це буде так само просто:

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);
  }
}

цикл: ~ ​​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) станом на цей текст.

Перевірте відповідь Майка і відповідь Dan Стокера , якщо ви хочете , щоб крок на сходинку вище в швидкості. Це, безумовно, найшвидший з усіх результатів, пройшовши майже всі життєздатні відповіді.

Ви можете це зробити просто за допомогою 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])

Якщо ви хочете без дублікатів, ви можете спробувати краще рішення тут - Shouting Code .

[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's => 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 (для Internet Explorer):

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).

а) комбінуйте два масиви та видаліть повторювані елементи.

б) відфільтруйте предмети перед їх комбінуванням.

Поєднайте два масиви та вийміть повторювані елементи

Поєднання

// 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)

Приємно в цьому - це продуктивність і те, що ви, загалом, працюючи з масивами, прив'язуєте такі способи, як фільтр, карта і т. Д., Щоб ви могли додати цей рядок, і він буде стискати і дедупілювати масив2 з array1, не потребуючи посилання на пізніші один (коли ви пов'язані методами, яких у вас немає), наприклад:

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

Дотримуючись функціонального підходу a unionз двох Arrays - це лише склад 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. Функція зменшення використовує 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]