What is the simplest, briefest way to convert an object or an ArrayLikeObject to an array using jQuery?

Question

Given an object

  var obj = {0: "a", 1: "b", 2: "c"};

and expected result

  var arr = ["a", "b", "c"];

or an ArrayLikeObject

  var divs = document.querySelectorAll("div");

with expected result

  var arr = [<div>a</div>, <div>b</div>, <div>c</div>];

The expected results could be returned using $.map() as described at

• Converting JSON Object into Javascript array

• Converting a JS object to an array

Question:

What is the simplest, briefest approach using jQuery to convert an object or an ArrayLikeObject to an array ?

Answer 1

Use $.merge()

jQuery.merge( first, second )

first
Type: ArrayLikeObject
The first array-like object to merge, the elements of second added.

second
Type: ArrayLikeObject
The second array-like object to merge into the first, unaltered.

var obj = {0: "a", 1: "b", 2: "c"};
var arr = $.merge([], obj);
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

---

var divs = document.querySelectorAll("div");
var arr = $.merge([], divs);
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>a</div>
<div>b</div>
<div>c</div>

---

Alternatively, you could use $.extend()

var obj = {0: "a", 1: "b", 2: "c"};
var arr = $.extend([], obj);
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

var divs = document.querySelectorAll("div");
var arr = $.extend([], divs);
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>a</div>
<div>b</div>
<div>c</div>

Answer 2

With array-like objects, you can use jQuery.makeArray(). (Also, with Array.from().)

var divs = document.querySelectorAll("div");
var arr = jQuery.makeArray(divs);

function foo() {
    return jQuery.makeArray(arguments);
}

foo(1, 'bar', false); // [1, 'bar', false]

---

It can also nearly work for the 1st object, but it'll need to be given a length (set to 1 + the greatest, positive, integer property).

var obj = { 0: "a", 1: "b", 2: "c", length: 3 };
var arr = jQuery.makeArray(obj);

If the length is unknown, you could figure it out first (ref: 9.4.2):

var obj = { 0: "a", 1: "b", 2: "c" };

obj.length = Object.keys(obj).reduce(function (prev, key) {
    var index = parseInt(key, 10);

    // 9.4.2 Array Exotic Objects
    // A String property name P is an array index if and only if...
    // ... ToString(ToUint32(P)) is equal to P...
    var isInteger = key === String(index);
    // ... and ToUint32(P) is not equal to 232−1.
    var isUInt32 = index >= 0 && index < Math.pow(2, 32) - 1;

    return isInteger && isUInt32 ? index + 1 : prev;
}, 0);

var arr = jQuery.makeArray(obj);

Or, let the engine figure it out, using jQuery.merge() with an array and the obj as already suggested.

Answer 3

Consider using Underscore:

_.values({0: "a", 1: "b", 2: "c"});

["a", "b", "c"]