JavaScript Array Union Operations: From Basic Implementation to Modern Methods

Fundamental Concepts of Array Union Operations

In JavaScript programming, array union operations involve combining multiple arrays into a single new array that contains no duplicate elements. This operation holds significant value in scenarios such as data processing and set operations. This article will use the specific requirements from the Q&A data as an example to conduct an in-depth analysis of various implementation methods.

Traditional Implementation Based on Object Hashing

The implementation provided in Answer 3 utilizes object properties as a hash table to ensure element uniqueness, which was a common solution before ES6. The core code is as follows:

function union_arrays(x, y) {
  var obj = {};
  for (var i = x.length-1; i >= 0; --i)
     obj[x[i]] = x[i];
  for (var i = y.length-1; i >= 0; --i)
     obj[y[i]] = y[i];
  var res = [];
  for (var k in obj) {
    if (obj.hasOwnProperty(k))
      res.push(obj[k]);
  }
  return res;
}

This method has a time complexity of O(n), where n is the total number of elements in both arrays. The reverse traversal of arrays optimizes performance by avoiding issues related to modifying array length during iteration. The hasOwnProperty check ensures that only the object's own properties are processed, preventing interference from properties on the prototype chain.

Modern ES6 Syntax Solutions

With the widespread adoption of ECMAScript 6, Set objects and the spread operator offer a more concise implementation:

const a = [34, 35, 45, 48, 49];
const b = [48, 55];
const union = [...new Set([...a, ...b])];

This approach leverages the automatic deduplication feature of Set, resulting in clean and readable code. The spread operator [...a, ...b] merges the two arrays, new Set() creates a set to remove duplicate elements, and the final spread operator converts it back to an array.

Functional Programming Approaches

Combining concat() and filter() enables a functional programming style for union operations:

const union = a.concat(b).filter((value, index, arr) => 
  arr.indexOf(value) === index);

This method uses indexOf to check the first occurrence position of each element, retaining only the first occurrence to achieve deduplication. While the code is highly readable, its time complexity is O(n²), making it less performant with large arrays.

Third-Party Library Solutions

When using utility libraries like Underscore.js or Lodash in a project, built-in union functions can be directly invoked:

// Underscore.js
const unionArr = _.union([34,35,45,48,49], [48,55]);

// Lodash
const unionArr = _.union([34,35,45,48,49], [48,55]);

These library implementations are typically well-optimized, offering both functional correctness and good performance, making them suitable for use in large-scale projects.

Performance Comparison and Selection Recommendations

Different methods exhibit significant performance variations:

• Object Hashing Method: Time complexity O(n), space complexity O(n), suitable for most scenarios
• ES6 Set Method: Clean code with excellent performance in modern browsers
• Functional Method: Clear code but poor performance, appropriate for small datasets
• Library Functions: Comprehensive functionality, ideal for projects already using the respective libraries

In practical development, it is recommended to choose the implementation method based on the project environment, data scale, and performance requirements. For modern projects, the ES6 Set method is the optimal choice; for projects requiring compatibility with older browsers, the object hashing method is more reliable.