Comments on: Javascript Array Merge: array_merge

By: Andrew Noyes

Andrew Noyes — Mon, 27 Apr 2009 08:01:57 +0000

Here’s my take on array_merge for JavaScript:

http://gist.github.com/102384

For better or for worse, it allows collections to be merged into arrays. It checks the type of the objects strongly to make sure they’re compatible. It works fine in Firefox and Safari that I know of.

By: Andrew Noyes

Andrew Noyes — Mon, 27 Apr 2009 02:34:33 +0000

I like how Subhasis Deb’s function differentiates between Arrays and Objects, since Objects functionally simulate PHP associative arrays, and more often than not are what I use for handling data. However, there are a few things I would recommend changing. First of all, the for…in loop pattern is incredibly inefficient with arrays, and I also never recommend using it for readability purposes. I switch between JavaScript and PHP all the time, and in PHP, we have the notation foreach ($var as $arr) to loop through the array, where $var is the value of the current iteration. However, in JavaScript, the for…in notation simply initializes an index. This isn’t a big deal if you work with JavaScript all the time, but I’ve been tripped up by more than one loop where I was expecting the val in for (var val in myArr) to be equal to one of myArr’s values, rather than an interator. Secondly, rather than using a loop, you can use concat, which is a native method and nearly infinitely faster than using a JavaScript loop.

There is one major bug in this function if you’re scripting in a multi-frame DOM environment. Objects in different windows do not share their constructor with the objects in the window that spawned them, so the evaluation [].constructor == Array is actually false in child windows. Since this check is false, the next check asks if the arguments are an instance of Object, which is always true since everything is an Object in JavaScript.(i.e. [] instanceof Object evaluates true). The solution to this is to call the constructor in the context of the global Object object using the apply method:

Object.prototype.toString.apply([]); // == “[object Array]”

This also leaves out array-like values, which are very important in DOM scripting, since document.getElementsByTagName doesn’t return an Array, it returns a NodeList, which is not an instanceof Array. Because of these array-like objects, Arrays are part of a broader group of objects called Collections. For this, I picked up this handy check from the YUI source code to check if an element is a collection (Arrays included):

function isValidCollection(obj) {
    try {
        return (
            obj &&    // Element exists
            typeof obj != "string" &&    // Weeds out strings for length test
            obj.length &&
            !obj.tagName &&    // Isn't an HTML node
            !obj.alert &&    // not window
            typeof obj[0] != "undefined"     // Has at least one element
        );
    } catch (e) {
        return false;
    }
}

I might rewrite this function to be sensitive to array-like objects and be a little more compatible with multi-frame environments.

By: gregory

gregory — Fri, 26 Dec 2008 05:05:45 +0000

I have a prototype that handles more complex merging of arrays as well as inserting arrays into other arrays all without needing a for / while loops. Read more about it here: http://gregorytomlinson.com/encoded/2008/12/25/javascript-array-merge/

By: Scott Meves

Scott Meves — Wed, 26 Nov 2008 18:21:39 +0000

@Subhasis Deb: Thanks! Sorry our comment code formatting is so messed up.

By: Subhasis Deb

Subhasis Deb — Tue, 25 Nov 2008 08:17:24 +0000

Following is my version of independent array_merge (compact):

/***
* Simulate php array_merge function
*
... [more] * @param {Object/Array} arr1
* @param {Object/Array} arr2
* var a1 = {'aa':100, 'bb':2, 'cc':[6,7], 'dd':[12,13], 'ee':{'15':15,'16':16}};
* var b1 = {'xx':101, 'bb':5, 'cc':8, 'dd':[14,15], 'ee':{'17':17,'18':18}};
* var c = array_merge(a1, b1);
* console.log(c) [in firebug]
* Output: {'aa':100, 'bb': 5, 'cc':[6,7], 'dd':[12,13,14,15], 'ee':{'15':15,'16':16,'17':17,'18':18}, 'xx':101}
*/
var array_merge = function(arr1, arr2){
  if((arr1 &amp;&amp; (arr1 instanceof Array)) &amp;&amp; (arr2 &amp;&amp; (arr2 instanceof Array))){
    for (var idx in arr2) {
      arr1.push(arr2[idx]);
    }
  }else if((arr1 &amp;&amp; (arr1 instanceof Object)) &amp;&amp; (arr2 &amp;&amp; (arr2 instanceof Object))){
    for(var idx in arr2){
      if(idx in arr1){
        if (typeof arr1[idx] == 'object' &amp;&amp; typeof arr2 == 'object') {
          arr1[idx] = array_merge(arr1[idx], arr2[idx]);
        }else{
          arr1[idx] = arr2[idx];
        }
      }else{
        arr1[idx] = arr2[idx];
      }
    }
  }
  return arr1;
}

By: Mrsoul

Mrsoul — Mon, 11 Aug 2008 09:09:39 +0000

Another example for merge:

function array_merge(arr) {
	var merged = arr;
	for (var i = 1; i &lt; arguments.length; i++) {
		merged = merged.concat(arguments[i]);
	}
	return merged;
}
 
arr4 = array_merge(arr1, arr2, arr3);

By: Scott Meves

Scott Meves — Fri, 06 Jun 2008 04:05:22 +0000

concat is KING

By: Rumble

Rumble — Tue, 07 Aug 2007 15:05:37 +0000

You can do this even quicker!

one = one.concat(two);

Job done!