Most efficient way to convert an HTMLCollection to an Array

Question

Is there a more efficient way to convert an HTMLCollection to an Array  other than iterating through the contents of said collection and manually pushing each item into an array

User · Answer

This works in all browsers including earlier IE versions.

var arr = [];
[].push.apply(arr, htmlCollection);

Since jsperf is still down at the moment, here is a jsfiddle that compares the performance of different methods. https://jsfiddle.net/qw9qf48j/

User · Answer

not sure if this is the most efficient  but a concise ES6 syntax might be   let arry       htmlCollection       Edit  Another one  from Chris F comment   let arry   Array from htmlCollection

User · Answer

I suppose that calling Array prototype functions on instances of HTMLCollection is a much better option than converting collections to arrays  e g      collection  or Array from collection    because in the latter case a collection is unnecessarily implicitly iterated and a new array object is created  and this eats up additional resources  Array prototype iterating functions can be safely called upon objects with consecutive numeric keys starting from  0  and a length property with a valid number value of such keys  quantity  including  e g   instances of HTMLCollection and FileList   so it s a reliable way  Also  if there is a frequent need in such operations  an empty array    can be used for quick access to Array prototype functions  or a shortcut for Array prototype can be created instead  A runnable example   x000D   x000D  const     Array prototype  const collection   document getElementById  ol   children  alert   reduce call collection   acc    textContent    i    gt      return acc       i 1     textContent       n            x000D   lt ol id  ol  gt       lt li gt foo lt  li gt       lt li gt bar lt  li gt       lt li gt bat lt  li gt       lt li gt baz lt  li gt   lt  ol gt  x000D   x000D   x000D

User · Answer

not sure if this is the most efficient  but a concise ES6 syntax might be   let arry       htmlCollection       Edit  Another one  from Chris F comment   let arry   Array from htmlCollection

User · Answer

var arr   Array prototype slice call  htmlCollection     will have the same effect using  native  code   Edit  Since this gets a lot of views  note  per  oriol s comment  that the following more concise expression is effectively equivalent   var arr      slice call htmlCollection     But note per  JussiR s comment  that unlike the  verbose  form  it does create an empty  unused  and indeed unusable array instance in the process   What compilers do about this is outside the programmer s ken   Edit  Since ECMAScript 2015  ES 6  there is also Array from   var arr   Array from htmlCollection     Edit  ECMAScript 2015 also provides the spread operator  which is functionally equivalent to Array from  although note that Array from supports a mapping function as the second argument    var arr       htmlCollection     I ve confirmed that both of the above work on NodeList   A performance comparison for the mentioned methods  http   jsben ch h2IFA

User · Answer

var arr   Array prototype slice call  htmlCollection     will have the same effect using  native  code   Edit  Since this gets a lot of views  note  per  oriol s comment  that the following more concise expression is effectively equivalent   var arr      slice call htmlCollection     But note per  JussiR s comment  that unlike the  verbose  form  it does create an empty  unused  and indeed unusable array instance in the process   What compilers do about this is outside the programmer s ken   Edit  Since ECMAScript 2015  ES 6  there is also Array from   var arr   Array from htmlCollection     Edit  ECMAScript 2015 also provides the spread operator  which is functionally equivalent to Array from  although note that Array from supports a mapping function as the second argument    var arr       htmlCollection     I ve confirmed that both of the above work on NodeList   A performance comparison for the mentioned methods  http   jsben ch h2IFA

User · Answer

This is my personal solution  based on the information here  this thread    var Divs   new Array        var Elemns   document getElementsByClassName  divisao        try           Divs   Elemns prototype slice call Elemns         catch e            Divs    A Elemns           Where  A was described by Gareth Davis in his post   function  A iterable      if   iterable  return       if   toArray  in Object iterable   return iterable toArray      var length   iterable length    0  results   new Array length     while  length--  results length    iterable length     return results      If browser supports the best way  ok  otherwise will use the cross browser

User · Answer

For a cross browser implementation I d sugguest you look at prototype js  A function   copyed from 1 6 1   function  A iterable      if   iterable  return       if   toArray  in Object iterable   return iterable toArray      var length   iterable length    0  results   new Array length     while  length--  results length    iterable length     return results      It doesn t use Array prototype slice probably because it isn t available on every browser  I m afraid the performance is pretty bad as there a the fall back is a javascript loop over the iterable

User · Answer

var arr   Array prototype slice call  htmlCollection     will have the same effect using  native  code   Edit  Since this gets a lot of views  note  per  oriol s comment  that the following more concise expression is effectively equivalent   var arr      slice call htmlCollection     But note per  JussiR s comment  that unlike the  verbose  form  it does create an empty  unused  and indeed unusable array instance in the process   What compilers do about this is outside the programmer s ken   Edit  Since ECMAScript 2015  ES 6  there is also Array from   var arr   Array from htmlCollection     Edit  ECMAScript 2015 also provides the spread operator  which is functionally equivalent to Array from  although note that Array from supports a mapping function as the second argument    var arr       htmlCollection     I ve confirmed that both of the above work on NodeList   A performance comparison for the mentioned methods  http   jsben ch h2IFA

User · Answer

I saw a more concise method of getting Array prototype methods in general that works just as well  Converting an HTMLCollection object into an Array object is demonstrated below       slice call  yourHTMLCollectionObject      And  as mentioned in the comments  for old browsers such as IE7 and earlier  you simply have to use a compatibility function  like   function toArray x        for var i   0  a       i  lt  x length  i            a push x i         return a     I know this is an old question  but I felt the accepted answer was a little incomplete  so I thought I d throw this out there FWIW

User · Answer

var arr   Array prototype slice call  htmlCollection     will have the same effect using  native  code   Edit  Since this gets a lot of views  note  per  oriol s comment  that the following more concise expression is effectively equivalent   var arr      slice call htmlCollection     But note per  JussiR s comment  that unlike the  verbose  form  it does create an empty  unused  and indeed unusable array instance in the process   What compilers do about this is outside the programmer s ken   Edit  Since ECMAScript 2015  ES 6  there is also Array from   var arr   Array from htmlCollection     Edit  ECMAScript 2015 also provides the spread operator  which is functionally equivalent to Array from  although note that Array from supports a mapping function as the second argument    var arr       htmlCollection     I ve confirmed that both of the above work on NodeList   A performance comparison for the mentioned methods  http   jsben ch h2IFA

User · Answer

To convert array-like to array in efficient way we can make use of the jQuery makeArray       makeArray  Convert an array-like object into a true JavaScript array    Usage   var domArray   jQuery makeArray htmlCollection       A little extra   If you do not want to keep reference to the array object  most of the time HTMLCollections are dynamically changes so its better to copy them into another array  This example pay close attention to performance    var domDataLength   domData length   Better performance  no need to calculate every iteration the domArray length var resultArray   new Array domDataLength     Since we know the length its improves the performance to declare the result array from the beginning   for  var i   0   i  lt  domDataLength   i          resultArray i    domArray i     Since we already declared the resultArray we can not make use of the more expensive push method      What is array-like   HTMLCollection is an  array-like  object  the array-like objects are similar to array s object but missing a lot of its functionally definition      Array-like objects look like arrays  They have various numbered   elements and a length property  But that   s where the similarity stops    Array-like objects do not have any of Array   s functions  and for-in   loops don   t even work

User · Answer

For a cross browser implementation I d sugguest you look at prototype js  A function   copyed from 1 6 1   function  A iterable      if   iterable  return       if   toArray  in Object iterable   return iterable toArray      var length   iterable length    0  results   new Array length     while  length--  results length    iterable length     return results      It doesn t use Array prototype slice probably because it isn t available on every browser  I m afraid the performance is pretty bad as there a the fall back is a javascript loop over the iterable

User · Answer

This works in all browsers including earlier IE versions.

var arr = [];
[].push.apply(arr, htmlCollection);

Since jsperf is still down at the moment, here is a jsfiddle that compares the performance of different methods. https://jsfiddle.net/qw9qf48j/

User · Answer

This is my personal solution  based on the information here  this thread    var Divs   new Array        var Elemns   document getElementsByClassName  divisao        try           Divs   Elemns prototype slice call Elemns         catch e            Divs    A Elemns           Where  A was described by Gareth Davis in his post   function  A iterable      if   iterable  return       if   toArray  in Object iterable   return iterable toArray      var length   iterable length    0  results   new Array length     while  length--  results length    iterable length     return results      If browser supports the best way  ok  otherwise will use the cross browser

User · Answer

I saw a more concise method of getting Array prototype methods in general that works just as well  Converting an HTMLCollection object into an Array object is demonstrated below       slice call  yourHTMLCollectionObject      And  as mentioned in the comments  for old browsers such as IE7 and earlier  you simply have to use a compatibility function  like   function toArray x        for var i   0  a       i  lt  x length  i            a push x i         return a     I know this is an old question  but I felt the accepted answer was a little incomplete  so I thought I d throw this out there FWIW

User · Answer

I suppose that calling Array prototype functions on instances of HTMLCollection is a much better option than converting collections to arrays  e g      collection  or Array from collection    because in the latter case a collection is unnecessarily implicitly iterated and a new array object is created  and this eats up additional resources  Array prototype iterating functions can be safely called upon objects with consecutive numeric keys starting from  0  and a length property with a valid number value of such keys  quantity  including  e g   instances of HTMLCollection and FileList   so it s a reliable way  Also  if there is a frequent need in such operations  an empty array    can be used for quick access to Array prototype functions  or a shortcut for Array prototype can be created instead  A runnable example   x000D   x000D  const     Array prototype  const collection   document getElementById  ol   children  alert   reduce call collection   acc    textContent    i    gt      return acc       i 1     textContent       n            x000D   lt ol id  ol  gt       lt li gt foo lt  li gt       lt li gt bar lt  li gt       lt li gt bat lt  li gt       lt li gt baz lt  li gt   lt  ol gt  x000D   x000D   x000D

User · Answer

To convert array-like to array in efficient way we can make use of the jQuery makeArray       makeArray  Convert an array-like object into a true JavaScript array    Usage   var domArray   jQuery makeArray htmlCollection       A little extra   If you do not want to keep reference to the array object  most of the time HTMLCollections are dynamically changes so its better to copy them into another array  This example pay close attention to performance    var domDataLength   domData length   Better performance  no need to calculate every iteration the domArray length var resultArray   new Array domDataLength     Since we know the length its improves the performance to declare the result array from the beginning   for  var i   0   i  lt  domDataLength   i          resultArray i    domArray i     Since we already declared the resultArray we can not make use of the more expensive push method      What is array-like   HTMLCollection is an  array-like  object  the array-like objects are similar to array s object but missing a lot of its functionally definition      Array-like objects look like arrays  They have various numbered   elements and a length property  But that   s where the similarity stops    Array-like objects do not have any of Array   s functions  and for-in   loops don   t even work

[javascript] Most efficient way to convert an HTMLCollection to an Array

Examples related to javascript

Examples related to arrays

Examples related to object