Array.From

Discussion

1. hexx

   small note -> babel doesn’t transpile Array.from() – so keep that in mind to include it ;)
• hexx

  [].slice.call(stuff) isn’t much longer than Array.from(stuff)
• XPoli

  Array.apply(0, stuff) is also a good solution
• Prashant Palikhe

  It’s not about which one is shorter, Array.from is just more declarative approach to doing the same thing.
• Evan

  There’s a babel plug-in for Array.from()

  https://babeljs.io/docs/usage/polyfill/
2. jide

   When using ES6, you can use the spread operator with array-like objects like this :

   const args = [...arguments];
   const nodes = [...document.querySelectorAll('div')];
   

   You can even use this with Sets, a cool trick to make an array unique :

   const myUniqueArray = [...new Set(myArray)];
   
3. Aleksander Nowodziński

   Instead of spread you could use rest operator:

   function something( ...args ) {
     // Array['yes', 1, {}]
   }
   something('yes', 1, {});
   
4. Paul Fitzgerald

   Is the section “Convert String to Array” definitely correct?

   When I check the console I see the below:

   'JavaScript'.split('')
   Array [ "J", "a", "v", "a", "S", "c", "r", "i", "p", "t" ]
   Array.from('JavaScript');
   Array [ "JavaScript" ]
   
• Espen

  That’s actually a bit funny. If you run that code in dev tools opened from this article, the Array.from function is overwritten by MooTools, and no longer works like the “native” version.

  Array.from = function(e) {
      return null  == e ? [] : o.isEnumerable(e) && "string" != typeof e ? "array" == t(e) ? e : s.call(e) : [e]
  }

  Run it in a new browser window and it should work.
• freginold

  Paul, did the same thing for me, but if I run the code somewhere else (tried it on repl.it) it works just as it’s supposed to.
5. David Walsh

   What he said…old MooTools has it wrong. I’ll be removing MooTools and all frameworks from the site soon.
6. Peter Bengtsson

   I built a site in reactjs with es6 recently. Standard stack (these days).
   The damn thing wouldn’t work on old Android browsers and certain browser in WebPageTest. “TypeError: function is undefined” (or something like that).

   Turns out these old browsers choked on the first occurrence of Array.from().

   Adding babel-polyfill made my day.
7. Roni

   What about performance, which one is the best approach??
• Eric Guittiere

  Looks like

  Array.prototype.slice.call(arraylike);

  is the fastest option (in Chrome and Firefox).

  [...arraylike]

  and

  Array.apply(0, arraylike);

  are second or third depending (different results in Chrome and FF), and unfortunately

  Array.from(arraylike);

  is the slowest by far on both browsers… :(
8. Wanderson

   var a = Array.from({ length: 26 }, (a, i) => String.fromCharCode(97 + i));