How to merge two arrays in JavaScript and de-duplicate items

Question

I have two JavaScript arrays   var array1     Vijendra   Singh    var array2     Singh    Shakya      I want the output to be   var array3     Vijendra   Singh   Shakya      The output array should have repeated words removed   How do I merge two arrays in JavaScript so that I get only the unique items from each array in the same order they were inserted into the original arrays

User · Answer

The best solution     You can check directly in the browser console by hitting     Without duplicate  a    1  2  3   b    3  2  1   prince     a concat b filter function el        return a indexOf el      -1         With duplicate    prince    asish   5  concat   ravi   4     If you want without duplicate you can try a better solution from here - Shouting Code    1  2  3  concat  3  2  1   prince   filter function el        return  1  2  3  indexOf el      -1         Try on Chrome browser console   f12  gt  console   Output     prince    asish   5   ravi   4    1  2  3   prince

User · Answer

Extremely fast Using this discovery I create extremely fast solution for medium size arrays and compare performance with chosen solutions  I name my solution as K   This solution modify input arrays  x000D   x000D  function K arr1 arr2      let r     h          while arr1 length        let e   arr1 shift        if  h e   h e  1  amp  amp  r push e            while arr2 length        let e   arr2 shift        if  h e   h e  1  amp  amp  r push e            return r         TEST var array1     Vijendra    Singh    var array2     Singh    Shakya     console log K array1 array2   x000D   x000D   x000D   Performance Today 2020 10 15 I perform tests on MacOs HighSierra 10 13 6 on Chrome v86  Safari v13 1 2 and Firefox v81 for chosen solutions  Results For all browsers  solution based on where-shift  K  is fastest  except small arrays on Safari where is fast  - for big arrays is  gt 1000x faster than other solutions       solution F is fast  fastest on Safari  for small arrays solution M is slowest for small arrays solutions E F I are slowest for big arrays  We should note here that for very big arrays on Chrome the K solution can slow down - details here  Details I perform 2 tests cases   for 2 elements arrays - you can run it HERE for 10000 elements arrays - you can run it HERE  on solutions A  B  C  D  E  F  G  H  I  J  K  my   L  M presented in below snippet  x000D   x000D     https   stackoverflow com a 10499519 860099 function A arr1 arr2      return   union arr1 arr2        https   stackoverflow com a 53149853 860099 function B arr1 arr2      return   unionWith arr1  arr2    isEqual         https   stackoverflow com a 27664971 860099 function C arr1 arr2      return     new Set     arr1    arr2          https   stackoverflow com a 48130841 860099 function D arr1 arr2      return Array from new Set arr1 concat arr2          https   stackoverflow com a 23080662 860099 function E arr1 arr2      return arr1 concat arr2 filter  item    gt  arr1 indexOf item   lt  0         https   stackoverflow com a 60421828 860099 function F array1  array2     for  var i   0  i  lt  array2 length  i        if  array1 indexOf array2 i       -1        array1 push array2 i      return array1        https   stackoverflow com a 28631880 860099 function G arr1 arr2      var hash         var i       for  i   0  i  lt  arr1 length  i          hash arr1 i     true        for  i   0  i  lt  arr2 length  i          hash arr2 i     true        return Object keys hash         https   stackoverflow com a 13847481 860099 function H a  b       var hash           var ret            for var i 0  i  lt  a length  i             var e   a i           if   hash e                hash e    true              ret push e                        for var i 0  i  lt  b length  i             var e   b i           if   hash e                hash e    true              ret push e                        return ret         https   stackoverflow com a 32108675 860099 function I a1  a2        var ai           for  var x   0  x  lt  a2 length  x              ai push x              for  var x   0  x  lt  a1 length  x              for  var y   0  y  lt  ai length  y                  if  a1 x      a2 ai y                      ai splice y  1                   y--                                     for  var x   0  x  lt  ai length  x              a1 push a2 ai x                return a1        https   stackoverflow com a 1584377 860099 function J arr1 arr2      function arrayUnique array          var a   array concat          for var i 0  i lt a length    i              for var j i 1  j lt a length    j                  if a i      a j                     a splice j--  1                              return a         return arrayUnique arr1 concat arr2          my function K arr1 arr2      let r     h          while arr1 length        let e   arr1 shift        if  h e   h e  1  amp  amp  r push e            while arr2 length        let e   arr2 shift        if  h e   h e  1  amp  amp  r push e            return r        https   stackoverflow com a 25120770 860099 function L 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        https   stackoverflow com a 39336712 860099 function M arr1 arr2      const comp   f   gt  g   gt  x   gt  f g x      const apply   f   gt  a   gt  f a     const flip   f   gt  b   gt  a   gt  f a   b     const concat   xs   gt  y   gt  xs concat y     const afrom   apply Array from     const createSet   xs   gt  new Set xs     const filter   f   gt  xs   gt  xs filter apply f       const dedupe   comp afrom   createSet      const union   xs   gt  ys   gt        const zs   createSet xs         return concat xs          filter x   gt  zs has x           false          zs add x         ys           return union dedupe arr1    arr2          -------------    TEST    -------------  var array1     Vijendra   Singh    var array2     Singh    Shakya      A B C D E F G H I J K L M  forEach f  gt      console log    f name     f     array1      array2           x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 20 lodash min js  integrity  sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww    crossorigin  anonymous  gt  lt  script gt     This shippet only presents functions used in performance tests - it not perform tests itself  x000D   x000D   x000D   And here are example test run for chrome

User · Answer

Assuming original arrays don t need de-duplication  this should be pretty fast  retain original order  and does not modify the original arrays     function arrayMerge base  addendum       var out      concat base       for var i 0 len addendum length i lt len i             if base indexOf addendum i   lt 0               out push addendum i                        return out      usage   var array1     Vijendra   Singh    var array2     Singh    Shakya    var array3   arrayMerge array1  array2    console log array3     - gt     Vijendra    Singh    Shakya

User · Answer

var MergeArrays function arrayOne  arrayTwo  equalityField        var mergeDictionary            for  var i   0  i  lt  arrayOne length  i              mergeDictionary arrayOne i  equalityField     arrayOne i              for  var i   0  i  lt  arrayTwo length  i              mergeDictionary arrayTwo i  equalityField     arrayTwo i              return   map mergeDictionary  function  value  key    return value         Leveraging dictionaries and Jquery you could merge the two arrays and not get duplicates  In my example I m using a given field on the object but could be just the object itself

User · Answer

Better option for large inputs will be to sort arrays  Then merge them   function sortFunction a  b            return a - b     arr1 sort sortFunction   arr2 sort sortFunction    function mergeDedup arr1  arr2         var i   0  j   0  result           while  i  lt  arr1 length  amp  amp  j  lt  arr2 length             if  arr1 i   lt  arr2 j                 writeIfNotSameAsBefore result  arr1 i                i                      else if  arr1 i   gt  arr2 j                 writeIfNotSameAsBefore result  arr2 j                j                      else               writeIfNotSameAsBefore result  arr1 i                i                j                          while  i  lt  arr1 length            writeIfNotSameAsBefore result  arr1 i            i               while  j  lt  arr2 length            writeIfNotSameAsBefore result  arr2 j            j              return result     function writeIfNotSameAsBefore arr  item        if  arr arr length - 1      item            arr arr length    item            return arr length      Sorting will take O nlogn   mlogm   where n and m are length of the arrays  and O x  for merging  where x   Max n  m

User · Answer

ES6  array1 push    array2       gt  don t remove duplication    OR      array1    array2         gt   don t remove duplication    OR      new Set     array1     array2            gt  remove duplication

User · Answer

You can merge the results and filter the duplicates   let combinedItems           items is an Array of arrays    1 2 3   1 5 6           items forEach currItems   gt        if  currItems  amp  amp  currItems length  gt  0            combinedItems   combinedItems concat currItems              let noDuplicateItems   combinedItems filter  item  index    gt        return  combinedItems includes item  index   1

User · Answer

In Dojo 1 6   var unique        var array1     Vijendra   Singh    var array2     Singh    Shakya    var array3   array1 concat array2      Merged both arrays  dojo forEach array3  function item        if  dojo indexOf unique  item   gt  -1  return      unique push item          Update  See working code   http   jsfiddle net UAxJa 1

User · Answer

If you want to check for unique objects  then use JSON stringify in your comparison    function arrayUnique array        var a   array concat        for var i 0  i lt a length    i            for var j i 1  j lt a length    j                if JSON stringify a i       JSON stringify a j                    a splice j--  1                        return a

User · Answer

For ES6  just one line   a    1  2  3  4  b    4  5      new Set a concat b         1  2  3  4  5

User · Answer

If you merging object arrays  consider use of lodash UnionBy function  it allows you to set custom predicate compare objects   import   unionBy   from  lodash    const a     a  1  b  2    const b     a  1  b  3    const c     a  2  b  4     const result   UnionBy a b c  x   gt  x a     Result is     a  1  b  2      a  2  b  4     First passed match from arrays is used in result

User · Answer

Array prototype pushUnique   function values        for  var i 0  i  lt  values length  i            if  this indexOf values i      -1              this push values i         Try   var array1     Vijendra   Singh    var array2     Singh    Shakya    array1 pushUnique array2   alert array1 toString         Output  Vijendra Singh Shakya

User · Answer

A functional approach with ES2015  Following the functional approach a union of two Arrays is just the composition of concat and filter  In order to provide optimal performance we resort to the native Set data type  which is optimized for property lookups   Anyway  the key question in conjunction with a union function is how to treat duplicates  The following permutations are possible   Array A        Array B   unique         unique   duplicated     unique   unique         duplicated   duplicated     duplicated    The first two permutations are easy to handle with a single function  However  the last two are more complicated  since you can t process them as long as you rely on Set lookups  Since switching to plain old Object property lookups would entail a serious performance hit the following implementation just ignores the third and fourth permutation  You would have to build a separate version of union to support them      x000D   x000D     small  reusable auxiliary functions x000D   x000D  const comp   f   gt  g   gt  x   gt  f g x    x000D  const apply   f   gt  a   gt  f a   x000D  const flip   f   gt  b   gt  a   gt  f a   b   x000D  const concat   xs   gt  y   gt  xs concat y   x000D  const afrom   apply Array from   x000D  const createSet   xs   gt  new Set xs   x000D  const filter   f   gt  xs   gt  xs filter apply f    x000D   x000D   x000D     de-duplication x000D   x000D  const dedupe   comp afrom   createSet   x000D   x000D   x000D     the actual union function x000D   x000D  const union   xs   gt  ys   gt    x000D    const zs   createSet xs     x000D    return concat xs    x000D      filter x   gt  zs has x  x000D         false x000D         zs add x  x000D       ys    x000D    x000D   x000D   x000D     mock data x000D   x000D  const xs    1 2 2 3 4 5   x000D  const ys    0 1 2 3 3 4 5 6 6   x000D   x000D   x000D     here we go x000D   x000D  console log   unique unique   union dedupe xs    ys     x000D  console log   duplicated unique   union xs   ys     x000D   x000D   x000D    From here on it gets trivial to implement an unionn function  which accepts any number of arrays  inspired by naomik s comments     x000D   x000D     small  reusable auxiliary functions x000D   x000D  const uncurry   f   gt   a  b    gt  f a   b   x000D  const foldl   f   gt  acc   gt  xs   gt  xs reduce uncurry f   acc   x000D   x000D  const apply   f   gt  a   gt  f a   x000D  const flip   f   gt  b   gt  a   gt  f a   b   x000D  const concat   xs   gt  y   gt  xs concat y   x000D  const createSet   xs   gt  new Set xs   x000D  const filter   f   gt  xs   gt  xs filter apply f    x000D   x000D   x000D     union and unionn x000D   x000D  const union   xs   gt  ys   gt    x000D    const zs   createSet xs     x000D    return concat xs    x000D      filter x   gt  zs has x  x000D         false x000D         zs add x  x000D       ys    x000D    x000D   x000D  const unionn    head     tail    gt  foldl union   head   tail   x000D   x000D   x000D     mock data x000D   x000D  const xs    1 2 2 3 4 5   x000D  const ys    0 1 2 3 3 4 5 6 6   x000D  const zs    0 1 2 3 4 5 6 7 8 9   x000D   x000D   x000D     here we go x000D   x000D  console log  unionn xs  ys  zs     x000D   x000D   x000D    It turns out unionn is just foldl  aka Array prototype reduce   which takes union as its reducer  Note  Since the implementation doesn t use an additional accumulator  it will throw an error when you apply it without arguments

User · Answer

Just wrote before for the same reason  works with any amount of arrays           Returns with the union of the given arrays         param Any amount of arrays to be united      returns  array  The union array      function uniteArrays         var union           for  var argumentIndex   0  argumentIndex  lt  arguments length  argumentIndex                  eachArgument   arguments argumentIndex           if  typeof eachArgument      array                         eachArray   eachArgument              for  var index   0  index  lt  eachArray length  index                                  eachValue   eachArray index                   if  arrayHasValue union  eachValue     false                  union push eachValue                                      return union         function arrayHasValue array  value    return array indexOf value     -1

User · Answer

var arr1    1  3  5  6   var arr2    3  6  10  11  12   arr1 concat arr2 filter ele   gt   arr1 includes ele     console log arr1    output  -  1  3  5  6  10  11  12

User · Answer

Here is my solution https   gist github com 4692150 with deep equals and easy to use result   function merge arrays arr1 arr2               return  first firstPart common commonString second secondPart full finalString       console log merge arrays     1  10 55      2  10 55      3  10 55        3  10 55      4  10 55      5  10 55      second    result     4  10 55      5  10 55

User · Answer

Using Lodash  I found  GijsjanB s answer useful but my arrays contained objects that had many attributes  so I had to de-duplicate them using one of the attributes   Here s my solution using lodash  userList1      id  1      id  2      id  3    userList2      id  3      id  4      id  5       id 3 is repeated in both arrays  users     unionWith userList1  userList2  function a  b   return a id    b id         users      id  1      id  2      id  3      id  4      id  5      The function you pass as the third parameter has two arguments  two elements   and it must return true if they are equal

User · Answer

Reduce them      This alternative instead of merging and deduplicating explicitly it will take one array and reduce it with another array so that each value of the first array can be iterated and destructured in an accumulative behavior  ignoring the already included values by exploiting the persistence of the array because of the recursiveness   array2 reduce reducer  array1 reduce reducer         Test Example    x000D   x000D  var array1     Vijendra   Singh   Singh    x000D  var array2     Singh    Shakya    Shakya    x000D  const reducer    accumulator  currentValue    gt  accumulator includes currentValue    accumulator       accumulator  currentValue   x000D   x000D  console log  x000D    array2 reduce reducer  array1 reduce reducer       x000D     x000D   x000D     a reduce on first array is needed to ensure a deduplicated array used as initial value on the second array being reduced x000D   x000D   x000D    Conclusion  By far more elegant and useful when boring for-each approach wants to be avoided  not that it is not useful    Deals with the concat   limitations on deduplication   No need for external libraries like Underscore js  JQuery or Lo-Dash  nor the trouble to create any built-in function to achieve the desired merged and deduplicated effect   Oh  and HEY   it can be done as a one-liner       This answered was possible thanks to ES5  ECMAScript 2015   beautiful include   and gorgeous reduce

User · Answer

Array prototype merge   function    variable number of arrays          for var i   0  i  lt  arguments length  i             var array   arguments i           for var j   0  j  lt  array length  j                 if this indexOf array j       -1                    this push array j                                      return this       A much better array merge function

User · Answer

My one and a half penny   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

User · Answer

Here is about the most effective one  in terms of computation time  Also it keeps the initial order of elements   First filter all duplicates from second array  then concatenate what is left to the first one   var a    1 2 3   var b    5 4 3   var c   a concat b filter function i       return a indexOf i     -1       console log c       1  2  3  5  4    Here is slightly improved  faster  version of it  with a downside  that arrays must not miss values   var i  c   a slice    ci   c length  for i   0  i  lt  b length  i         if c indexOf b i      -1          c ci      b i

User · Answer

Usage  https   gist github com samad-aghaei 7250ffb74ed80732debb1cbb14d2bfb0  var  uniqueMerge   function opts   ref       for var key in  ref          if   ref  amp  amp   ref key   amp  amp   ref key  constructor  amp  amp   ref key  constructor     Object             ref key     uniqueMerge  opts   opts key    null    ref key             else if opts  amp  amp  opts hasOwnProperty key              ref key    opts key           else  ref key     ref key  1       return  ref

User · Answer

The best and simplest way to do that is using the function  some    of JavaScript that returns true or false indicating if the array contains the object s element  You can make this   var array1     Vijendra   Singh     var array2     Singh    Shakya     var array3   array1   array2 forEach function elementArray2       var isEquals   array1 some function elementArray1           return elementArray1     elementArray2             if  isEquals           array3 push elementArray2             console log array3     The results       Vijendra    Singh    Shakya     ss you wish    without duplicate it

User · Answer

Here is a slightly different take on the loop  With some of the optimizations in the latest version of Chrome  it is the fastest method for resolving the union of the two arrays  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 loop   589k ops s  filter   445k ops s  lodash  308k ops s  for loops  225k ops s  A comment pointed out that one of my setup variables was causing my loop to pull ahead of the rest  because it didn t have to initialize an empty array to write to  I agree with that  so I ve rewritten the test to even the playing field  and included an even faster option   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       In this alternate solution  I ve combined one answer s associative array solution to eliminate the  indexOf   call in the loop which was slowing things down a lot with a second loop  and included some of the other optimizations that other users have suggested in their answers as well   The top answer here with the double loop on every value  i-1  is still significantly slower  lodash is still doing strong  and I still would recommend it to anyone who doesn t mind adding a library to their project  For those who don t want to  my while loop is still a good answer and the filter answer has a very strong showing here  beating out all on my tests with the latest Canary Chrome  44 0 2360  as of this writing   Check out Mike s answer and Dan Stocker s answer if you want to step it up a notch in speed  Those are by far the fastest of all results after going through almost all of the viable answers

User · Answer

I know this question is not about array of objects  but searchers do end up here   so it s worth adding for future readers a proper ES6 way of merging and then removing duplicates  array of objects   var arr1      a  1    a  2    a  3     var arr2      a  1    a  2    a  4      var arr3   arr1 concat arr2 filter    a     gt   arr1 find f   gt  f a    a             a  1    a  2    a  3    a  4

User · Answer

function set a  b      return a concat b  filter function x i c    return c indexOf x     i

User · Answer

Take two arrays a and b  var a     a   b   c     var b     d   e   f    var c   a concat b        c is now an an array with    a   b   c   d   e   f

User · Answer

If  like me  you need to support older browsers  this works with IE6   function es3Merge a  b        var hash               i    a   a slice 0   length          e       while  i--            hash a i     1             for  i   0  i  lt  b length  i              hash e   b i      a push e              return a       http   jsperf com merge-two-arrays-keeping-only-unique-values 22

User · Answer

This is the function I use when I need to merge   or return the union of  two arrays   var union   function  a  b      for  var i   0  i  lt  b length  i        if  a indexOf b i       -1        a push b i      return a      var a    1  2  3   a    b    c    var b    2  3  4   b    c    d     a   union a  b      gt   1  2  3   a    b    c   4   d    var array1     Vijendra    Singh    var array2     Singh    Shakya     var array3   union array1  array2      gt    Vijendra    Singh    Shakya

User · Answer

ES2019  You can use it like union array1  array2  array3               Merges two or more arrays keeping unique items  This method does    not change the existing arrays  but instead returns a new array      function union lt T gt     arrays  T        return     new Set     arrays  flat          It is ES2019 because of the flat   function  but you can use core-js to get it as a polyfill  The T here is TypeScript generic type  that you can remove if you are not using TypeScript  If you are using TypeScript  make sure to add  lib     es2019 array   to compiler options in tsconfig json   or     just use lodash   union

User · Answer

x000D   x000D  var array1     one   two    x000D  var array2     two    three    x000D  var collectionOfTwoArrays       array1     array2       x000D  var uniqueList   array   gt      new Set array    x000D  console log  Collection      x000D  console log collectionOfTwoArrays       x000D  console log  Collection without duplicates      x000D  console log uniqueList collectionOfTwoArrays    x000D   x000D   x000D

User · Answer

x000D   x000D      x000D     De-duplicate an array keeping only unique values  x000D     Use hash table  js object  to filter-out duplicates  x000D     The order of array elements is maintained  x000D     This algorithm is particularly efficient for large arrays  linear time   x000D      x000D  function arrayUniqueFast arr    x000D   var seen       x000D   var result       x000D   var i  len   arr length  x000D   for  i   0  i  lt  len  i      x000D    var item   arr i   x000D       hash table lookup x000D    if   seen item     x000D     result push item   x000D     seen item    true  x000D      x000D     x000D   return result  x000D    x000D   x000D        test x000D  var array1     Vijendra    Singh    x000D  var array2     Singh    Shakya    x000D   x000D  var result   arrayUniqueFast array1 concat array2    x000D  document write   lt br gt result      result   x000D   x000D   x000D    For other methods to dedup an array  please see my benchmarks at  https   jsperf com de-duplicate-an-array-keeping-only-unique-values

User · Answer

One line solution as a segue to LiraNuna s   let array1     Vijendra   Singh    let array2     Singh    Shakya        Merges both arrays let array3   array1 concat array2       REMOVE DUPLICATE let removeDuplicate       new Set array3    console log removeDuplicate

User · Answer

I came across this post when trying to do the same thing  but I wanted to try something different  I just made up the function below  I also had another variable   compareKeys    array of keys  for doing shallow object comparison  I m going to probably change it to a function in the future   Anyway  I didn t include that part  because it doesn t apply to the question  I also put my code into the jsperf going around  Edited  I fixed my entry in jsperf  My function gets about 99k ops sec compared to 140k   To the code  I first make an array of the available indices and then eliminate them by iterating over the first array  Finally  I push in the  left-overs  by using the trimmed down array of indices that didn t match between the two arrays   http   jsperf com merge-two-arrays-keeping-only-unique-values 26  function indiceMerge a1  a2        var ai           for  var x   0  x  lt  a2 length  x              ai push x              for  var x   0  x  lt  a1 length  x              for  var y   0  y  lt  ai length  y                  if  a1 x      a2 ai y                      ai splice y  1                   y--                                     for  var x   0  x  lt  ai length  x              a1 push a2 ai x                return a1

User · Answer

const merge    args   gt  new Set    concat    args

User · Answer

array1 concat array2  filter  value  pos  arr   gt arr indexOf value    pos    The nice thing about this one is performance and that you in general  when working with arrays  are chaining methods like filter  map  etc so you can add that line and it will concat and deduplicate array2 with array1 without needing a reference to the later one  when you are chaining methods you don t have   example    someSource    reduce       filter       map          and now you want to concat array2 and deduplicate   concat array2  filter  value  pos  arr   gt arr indexOf value    pos     and keep chaining stuff  map       find         etc    I don t like to pollute Array prototype and that would be the only way of respect the chain - defining a new function will break it - so I think something like this is the only way of accomplish that

User · Answer

Built a tester to check just how fast some of the performance oriented answers are  Feel free to add some more  So far  Set is both the simplest and fastest option  by bigger margins as the number of records increases   at least with simple Number types   x000D   x000D  const records   10000    max records per array   max int   100    max integer value per array   dup rate    5    rate of duplication let perf         performance logger    ts   0    te   0    array1         init arrays   array2         array1b         array2b         a          populate randomized arrays for  let i   0  i  lt  records  i        let r   Math random        n   r   max int    if  Math random    lt   5        array1 push n       r  lt  dup rate  amp  amp  array2 push n       else       array2 push n       r  lt  dup rate  amp  amp  array1 push n           simple deep copies short of rfdc  in case someone wants to test with more complex data types array1b   JSON parse JSON stringify array1    array2b   JSON parse JSON stringify array2    console log  Records in Array 1    array1 length  array1b length   console log  Records in Array 2    array2 length  array2b length      test method 1  jsperf per  Pitouli  ts   performance now    for  let i   0  i  lt  array2 length  i      if  array1 indexOf array2 i       -1      array1 push array2 i      modifies array1 te   performance now    perf m1   te - ts  console log  Method 1 merged   array1 length   records in    perf m1   array1   JSON parse JSON stringify array1b      reset array1    test method 2  classic forEach  ts   performance now    array2 forEach v   gt  array1 includes v    null   array1 push v      modifies array1 te   performance now    perf m2   te - ts  console log  Method 2 merged   array1 length   records in    perf m2      test method 3  Simplest native option  ts   performance now    a       new Set     array1     array2       does not modify source arrays te   performance now    perf m3   te - ts  console log  Method 3 merged   a length   records in    perf m3      test method 4  Selected Answer  ts   performance now    a   array1 concat array2     does not modify source arrays for  let i   0  i  lt  a length    i      for  let j   i   1  j  lt  a length    j        if  a i      a j         a splice j--  1         te   performance now    perf m4   te - ts  console log  Method 4 merged   a length   records in    perf m4      test method 5   Kamil Kielczewski  ts   performance now     function K arr1  arr2      let r           h          while  arr1 length        let e   arr1 shift      modifies array1     if   h e   h e    1  amp  amp  r push e          while  arr2 length        let e   arr2 shift      modifies array2     if   h e   h e    1  amp  amp  r push e          return r    a   K array1  array2   te   performance now    perf m5   te - ts  console log  Method 5 merged   a length   records in    perf m4   array1   JSON parse JSON stringify array1b      reset array1 array2   JSON parse JSON stringify array2b      reset array2   for  let i   1  i  lt  6  i        console log  Method    i   speed is    perf  m    i    perf m1   100  toFixed 2      of Method 1      x000D   x000D   x000D

User · Answer

Merge an unlimited number of arrays or non-arrays and keep it unique   function flatMerge         return Array prototype reduce call arguments  function  result  current            if    current instanceof Array                 if  result indexOf current      -1                    result push current                           else               current forEach function  value                    console log value                   if  result indexOf value      -1                        result push value                                                       return result                 flatMerge  1 2 3   4  4   3  2  1  5    7  6  8  9   5   4   2   3  2  5        1  2  3  4  5  7  6  8  9   flatMerge  1 2 3    3  2  1  5    7  6  8  9        1  2  3  5  7  6  8  9   flatMerge 1  3  5  7       1  3  5  7

User · Answer

I learned a cheeky little way to concatenate two arrays with the spread operator   var array1     tom    dick    harry    var array2     martin    ricky     array1 push    array2     The       spread operator splits the following array into individual items and then push can handle them as separate arguments

User · Answer

Just steer clear of nested loops  O n 2    and  indexOf     O n     x000D   x000D  function merge a  b      var hash         var i       for  i   0  i  lt  a length  i          hash a i     true        for  i   0  i  lt  b length  i          hash b i     true        return Object keys hash      var array1     Vijendra    Singh    var array2     Singh    Shakya     var array3   merge array1  array2    console log array3   x000D   x000D   x000D

User · Answer

Simplified best of this answer and turned it into a nice function   function mergeUnique arr1  arr2       return arr1 concat arr2 filter function  item            return arr1 indexOf item      -1

User · Answer

This is my second answer  but I believe the fastest  I d like someone to check for me and reply in the comments   My first attempt hit about 99k ops sec and this go around is saying 390k ops sec vs the other leading jsperf test of 140k  for me    http   jsperf com merge-two-arrays-keeping-only-unique-values 26  I tried to minimize as much array interaction as possible this time around and it looked like I netted some performance   function findMerge a1  a2        var len1   a1 length       for  var x   0  x  lt  a2 length  x              var found   false           for  var y   0  y  lt  len1  y                  if  a2 x      a1 y                     found   true                  break                                   if  found               a1 push a2 splice x--  1  0                         return a1      Edit  I made some changes to my function  and the performance is drastic compared to others on the jsperf site

User · Answer

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  lt  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

User · Answer

This is simple and can be done in one line with jQuery   var arr1     Vijendra    Singh    arr2    Singh    Shakya       unique arr1 concat arr2    one line    Vijendra    Singh    Shakya

User · Answer

If you do not want duplicates of a specific property  for example the ID   let noDuplicate   array1 filter   i   gt  array2 findIndex a   gt  i id  a id   -1    let result       noDuplicate     array2

User · Answer

Here an option for objects with object arrays  const a     param1   quot 1 quot   param2  1   param1   quot 2 quot   param2  2   param1   quot 4 quot   param2  4   const b     param1   quot 1 quot   param2  1   param1   quot 4 quot   param2  5     var result   a concat b filter item   gt            JSON stringify a  includes JSON stringify item            console log result     Result   param1   quot 1 quot   param2  1   param1   quot 2 quot   param2  2   param1   quot 4 quot   param2  4   param1   quot 4 quot   param2  5

User · Answer

Given two sorted arrays of simple types without duplicates  this will merge them in O n  time  and the output will be also sorted   function merge a  b        let i 0      let j 0      let c           for                if  i    a length                if  j    b length  return c              c push b j                else if  j    b length    a i   lt  b j                 c push a i                else               if  a i     b j     i       skip duplicates             c push b j

User · Answer

Using a Set  ECMAScript 2015   it will be as simple as that    x000D   x000D  const array1     Vijendra    Singh    x000D  const array2     Singh    Shakya    x000D  console log Array from new Set array1 concat array2      x000D   x000D   x000D

User · Answer

There are so many solutions for merging two arrays   They can be divided into two main categories except the use of 3rd party libraries like lodash or underscore js    a  combine two arrays and remove duplicated items   b  filter out items before combining them   Combine two arrays and remove duplicated items  Combining     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   Unifying  There are many ways to unifying an array  I personally suggest below two methods      a little bit tricky const merged   combined filter  item  index    gt  combined indexOf item      index   const merged       new Set combined      Filter out items before combining them  There are also many ways  but I personally suggest the below code due to its simplicity   const merged   array1 concat array2 filter secItem   gt   array1 includes secItem

User · Answer

1 merge two array into one array     var arr1    0  1  2  4      var arr2    4  5  6         for merge array we use  Array concat      let combineArray   arr1 concat arr2     output     alert combineArray     now out put is 0 1 2 4 4 5 6 but 4 reapeat       2 same thing with  Spread Syntex      let spreadArray       arr1     arr2       alert spreadArray      now out put is 0 1 2 4 4 5 6 but 4 reapete                if we need remove duplicate element method use are        1 Using set        2 using  filter        3 using  reduce

User · Answer

for the sake of it    here is a single line solution   const x       new Set    C    B     B    A    reduce   a  e    gt  a concat e         sort        A    B    C     Not particularly readable but it may help someone    Applies a reduce function with the initial accumulator value set to an empty array  The reduce function uses concat to append each sub-array onto the accumulator array  The result of this is passed as a constructor parameter to create a new Set  The spread operator is used to convert the Set to an array  The sort   function is applied to the new array

User · Answer

This is fast  collates any number of arrays  and works with both numbers and strings   function collate a      Pass an array of arrays to collate into one array     var h     n      s            for  var i 0  i  lt  a length  i    for  var j 0  j  lt  a i  length  j             typeof a i  j       number    h n a i  j     true   h s a i  j     true       var b   Object keys h n       for  var i 0  i lt  b length  i            b i  Number b i        return b concat Object keys h s        gt  a      1 2 3    3 4 5    1 5 6     spoon    fork    5      gt  collate  a     1  2  3  4  5  6   5    spoon    fork     If you don t need to distinguish between 5 and  5   then  function collate a       var h           for  i 0  i  lt  a length  i    for  var j 0  j  lt  a i  length  j            h a i  j     typeof a i  j       number       for  i 0  b Object keys h   i lt  b length  i            if  h b i                b i  Number b i        return b     1  2  3  4   5   6   spoon    fork     will do   And if you don t mind  or would prefer  all values ending up as strings anyway then just this   function collate a       var h           for  var i 0  i  lt  a length  i            for  var j 0  j  lt  a i  length  j                h a i  j     true      return Object keys h      1    2    3    4    5    6    spoon    fork     If you don t actually need an array  but just want to collect the unique values and iterate over them  then  in most browsers  and node js     h   new Map    for  i 0  i  lt  a length  i        for  var j 0  j  lt  a i  length  j            h set a i  j      It might be preferable

User · Answer

To just merge the arrays  without removing duplicates  ES5 version use Array concat   x000D   x000D  var array1     Vijendra    Singh    var array2     Singh    Shakya     console log array1 concat array2    x000D   x000D   x000D   ES6 version use destructuring const array1     quot Vijendra quot   quot Singh quot    const array2     quot Singh quot    quot Shakya quot    const array3       array1     array2    Since there is no  built in  way to remove duplicates  ECMA-262 actually has Array forEach which would be great for this   we have to do it manually  Array prototype unique   function         var a   this concat        for var i 0  i lt a length    i            for var j i 1  j lt a length    j                if a i      a j                   a splice j--  1                        return a      Then  to use it  var array1     quot Vijendra quot   quot Singh quot    var array2     quot Singh quot    quot Shakya quot       Merges both arrays and gets unique items var array3   array1 concat array2  unique      This will also preserve the order of the arrays  i e  no sorting needed   Since many people are annoyed about prototype augmentation of Array prototype and for in loops  here is a less invasive way to use it  function arrayUnique array        var a   array concat        for var i 0  i lt a length    i            for var j i 1  j lt a length    j                if a i      a j                   a splice j--  1                        return a     var array1     quot Vijendra quot   quot Singh quot    var array2     quot Singh quot    quot Shakya quot           Merges both arrays and gets unique items var array3   arrayUnique array1 concat array2     For those who are fortunate enough to work with browsers where ES5 is available  you can use Object defineProperty like this  Object defineProperty Array prototype   unique         enumerable  false      configurable  false      writable  false      value  function             var a   this concat            for var i 0  i lt a length    i                for var j i 1  j lt a length    j                    if a i      a j                       a splice j--  1                                    return a

User · Answer

With Underscore js or Lo-Dash you can do    x000D   x000D  console log   union  1  2  3    101  2  1  10    2  1     x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 15 lodash min js  gt  lt  script gt  x000D   x000D   x000D    http   underscorejs org  union  http   lodash com docs union

User · Answer

Based on jsperf  the fastest way to merge two arrays in a new one is the following   for  var i   0  i  lt  array2 length  i        if  array1 indexOf array2 i       -1        array1 push array2 i      This one is 17  slower   array2 forEach v   gt  array1 includes v    null   array1 push v      This one is 45  slower   var a       new Set     array1     array2       And the accepted answers is 55  slower  and much longer to write   var a   array1 concat array2   for  var i   0  i  lt  a length    i        for  var j   i   1  j  lt  a length    j            if  a i      a j               a splice j--  1             https   jsperf com merge-2-arrays-without-duplicate

User · Answer

This is an ECMAScript nbsp 6 solution using spread operator and array generics   Currently it only works with Firefox  and possibly Internet nbsp Explorer Technical Preview   But if you use Babel  you can have it now    x000D   x000D  const input     x000D     1  2  3   x000D     101  2  1  10   x000D     2  1  x000D     x000D  const mergeDedupe    arr    gt    x000D    return     new Set    concat    arr     x000D    x000D   x000D  console log  output   mergeDedupe input    x000D   x000D   x000D

User · Answer

Just throwing in my two cents   function mergeStringArrays a  b       var hash           var ret            for var i 0  i  lt  a length  i             var e   a i           if   hash e                hash e    true              ret push e                        for var i 0  i  lt  b length  i             var e   b i           if   hash e                hash e    true              ret push e                        return ret      This is a method I use a lot  it uses an object as a hashlookup table to do the duplicate checking  Assuming that the hash is O 1   then this runs in O n  where n is a length   b length  I honestly have no idea how the browser does the hash  but it performs well on many thousands of data points

User · Answer

You can achieve it simply using Underscore js s    uniq   array3     uniq array1 concat array2    console log array3    It will print   Vijendra    Singh    Shakya

User · Answer

var a    1 2 3  var b    1 2 4 5    I like one liners  This will push distinct b elements to a  b forEach item   gt  a includes item    null   a push item      And another version that will not modify a  var c   a slice    b forEach item   gt  c includes item    null   c push item

User · Answer

It can be done using Set    x000D   x000D  var array1     Vijendra   Singh    x000D  var array2     Singh    Shakya    x000D   x000D  var array3   array1 concat array2   x000D  var tempSet   new Set array3   x000D  array3   Array from tempSet   x000D   x000D    show output x000D  document body querySelector  div   innerHTML   JSON stringify array3   x000D   lt div style  width 100  height 4rem line-height 4rem background-color steelblue color  DDD text-align center font-family Calibri   gt   x000D    temp text  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is a simple example   var unique   function array        var unique          for  var i   0  i  lt  array length  i    1            if  unique indexOf array i      -1                unique push array i                       return unique    var uniqueList   unique   AAPL    MSFT   concat   MSFT    BBEP    GE        We define unique array  to remove redundant elements and use the concat function to combine two arrays

User · Answer

The simplest solution with filter   var array1     Vijendra   Singh    var array2     Singh    Shakya     var mergedArrayWithoutDuplicates   array1 concat    array2 filter seccondArrayItem   gt   array1 includes seccondArrayItem

User · Answer

For n arrays  you can get the union like so  function union arrays        return new Set arrays flat    keys

User · Answer

You can do it simply with ECMAScript nbsp 6   var array1     Vijendra    Singh    var array2     Singh    Shakya    var array3       new Set     array1     array2     console log array3        Vijendra    Singh    Shakya       Use the spread operator for concatenating the array  Use Set for creating a distinct set of elements  Again use the spread operator to convert the Set into an array

User · Answer

DeDuplicate single or Merge and DeDuplicate multiple array inputs  Example below   useing ES6 - Set  for of  destructuring  I wrote this simple function which takes multiple array arguments  Does pretty much the same as the solution above it just have more practical use case  This function doesn t concatenate duplicate values in to one array only so that it can delete them at some later stage   SHORT FUNCTION DEFINITION   only 9 lines          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    gt       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       USE EXAMPLE CODEPEN      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

User · Answer

Modular  General  This could be achieved by composing two essential functions    const getUniqueMerge       arrs    gt  getUniqueArr mergeArrs    arrs   const getUniqueArr    array    gt  Array from new Set array     const mergeArrs       arrs    gt     concat    arrs    It can handle unlimited arrays  or values  console log getUniqueMerge   Vijendra   Singh     Singh    Shakya         Vijendra    Singh    Shakya    console log getUniqueMerge   Sheldon    Cooper      and    Cooper    Amy    and     Farrah    Amy    Fowler         Sheldon    Cooper    and    Amy    Farrah    Fowler

User · Answer

If you re purely using underscore js  it doesn t have unionWith  unionBy  you can try out     uniq   union arr1  arr2    obj    gt  obj key    key is the key param of each object    this should help to get unique after union of both arrays

User · Answer

Another approach for your review with reduce func   function mergeDistinct arResult  candidate     if  -1    arResult indexOf candidate         arResult push candidate         return arResult     var array1     Vijendra   Singh    var array2     Singh    Shakya     var arMerge       arMerge   array1 reduce mergeDistinct  arMerge   arMerge   array2 reduce mergeDistinct  arMerge      Vijendra   Singh   Shakya

User · Answer

I think this works faster   removeDup   a   gt         for  let i   a length - 1  i  gt   0  i--            for  let j   i-1  j  gt   0  j--                if  a i      a j                   a splice j--  1                        return a

User · Answer

First concatenate the two arrays  next filter out only the unique items    x000D   x000D  var a    1  2  3   b    101  2  1  10  x000D  var c   a concat b  x000D  var d   c filter  item  pos    gt  c indexOf item      pos  x000D   x000D  console log d     d is  1  2  3  101  10  x000D   x000D   x000D    Edit  As suggested a more performance wise solution would be to filter out the unique items in b before concatenating with a    x000D   x000D  var a    1  2  3   b    101  2  1  10  x000D  var c   a concat b filter  item    gt  a indexOf item   lt  0   x000D   x000D  console log c     c is  1  2  3  101  10  x000D   x000D   x000D

User · Answer

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  gt  gt  gt  0       for    from  lt  len  from                if  from in this  amp  amp            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  lt  merged length  i      if  t   merged indexOf i   1  merged i       -1          merged splice t  1       i--   in case of multiple occurrences       Implementation of indexOf method for other browsers is taken from MDC

User · Answer

looks like the accepted answer is the slowest in my tests   note I am merging 2 arrays of objects by Key   lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  gt     lt title gt JS Bin lt  title gt   lt  head gt   lt body gt   lt button type  button  onclick  doit    gt do it lt  button gt   lt script gt  function doit        var items           var items2           var itemskeys           for var i   0  i  lt  10000  i             items push  K i  C  123             itemskeys i    i             for var i   9000  i  lt  11000  i             items2 push  K i  C  123                console time  merge        var res   items slice 0          method1        method0          method2         console log res length       console timeEnd  merge         function method0            for var i   0  i  lt  items2 length  i                 var isok   1              var k   items2 i  K              if itemskeys k     null                   itemskeys i    res length                  res push items2 i                                       function method1            for var i   0  i  lt  items2 length  i                 var isok   1              var k   items2 i  K               for var j   0  j  lt  items length  j                     if items j  K    k                       isok   0                      break                                               if isok  res push items2 i                           function method2            res   res concat items2           for var i   0  i  lt  res length    i                for var j   i 1  j  lt  res length    j                    if res i  K     res j  K                      res splice j--  1                                    lt  script gt   lt  body gt   lt  html gt

User · Answer

New solution   which uses Array prototype indexOf and Array prototype concat     Array prototype uniqueMerge   function  a         for   var nonDuplicates       i   0  l   a length  i lt l    i             if   this indexOf  a i        -1                 nonDuplicates push  a i                         return this concat  nonDuplicates        Usage    gt  gt  gt    Vijendra    Singh   uniqueMerge   Singh    Shakya      Vijendra    Singh    Shakya     Array prototype indexOf   for internet explorer     Array prototype indexOf   Array prototype indexOf    function elt          var len   this length  gt  gt  gt  0       var from   Number arguments 1      0      from    from  lt  0    Math ceil from   Math floor from        if  from  lt  0 from    len       for    from  lt  len  from                if  from in this  amp  amp  this from      elt return from            return -1

User · Answer

You can use loadash unionWith -   unionWith  arrays    comparator    This method is like   union except that it accepts comparator which is invoked to compare elements of arrays  Result values are chosen from the first array in which the value occurs  The comparator is invoked with two arguments   arrVal  othVal     x000D   x000D  var array1     Vijendra   Singh    x000D  var array2     Singh    Shakya    x000D    x000D  var array3     unionWith array1  array2    isEqual   x000D  console log array3   x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 11 lodash min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Why don t you use an object  It looks like you re trying to model a set   This won t preserve the order  however   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

User · Answer

Use   Array prototype merge   function  arr        var key      for key in arr           this key    arr key

User · Answer

The easiest way to do this is either to use concat   to merge the arrays and then use filter   to remove the duplicates  or to use concat   and then put the merged array inside a Set     First way    const firstArray    1 2  2   const secondArray    3 4      now lets merge them const mergedArray   firstArray concat secondArray       1 2 2 3 4    now use filter to remove dups const removeDuplicates   mergedArray filter  elem  index    gt   mergedArray indexOf elem      index       1 2 3  4    Second way  but with performance implications on the UI    const firstArray    1 2  2   const secondArray    3 4      now lets merge them const mergedArray   firstArray concat secondArray       1 2 2 3 4  const removeDuplicates   new Set mergedArray

User · Answer

Array prototype union   function  other array       you can include a test to check whether other array really is an array      other array forEach function v    if this indexOf v      -1   this push v      this

User · Answer

You can try this    x000D   x000D  const union    a  b    gt  Array from new Set     a     b     x000D   x000D  console log union   neymar   messi      ronaldo   neymar      x000D   x000D   x000D

[javascript] How to merge two arrays in JavaScript and de-duplicate items

Without duplicate

With duplicate

Examples related to javascript

Examples related to arrays

Examples related to merge