What You Should Know About ES6 Arrays

One of the most important features of any programming language, Arrays have several long-time requested feature updates in JavaScript ES6.

For example, there are new methods like Array.from and Array.of, which provide new functionality to the array datatype.

Array.from

Allows you to create arrays from other types of collections, so you can take advantage of Array features that are not available in the collections.

One of the most common use cases is selecting a group of DOM nodes.

Array.from(document.querySelectorAll('*')) // returns Array

Since document.querySelectorAll returns a NodeCollection, not an Array, you couldn’t use Array functions like forEach. In the past, this would not work:

document.querySelectorAll('*').forEach(...) // fails

[].slice.call(document.querySelectorAll('*'), ...) // workaround

Feeding the collection to an Array prototype method like slice, was a common workaround, but is no longer needed in ES6.

However, you may not need it anyway for DOM node collections. In Chrome, DOM node collections do have a forEach method on their own.

So this problem is likely a thing of the past. Another object we may want to convert to an Array is arguments.

We can now use built in Array functions on arguments.

Array.from can also be used instead of Array.map to map elements.

Array.from(document.querySelectorAll(‘*’), console.log)

Another useful technique is to use Array.from to populate new Arrays.

Array.from(new Array(5), k=>'val')// ['val','val','val','val','val']

Array.of

Can be used as an alternative to the Array constructor, and when passed a single number, will create that value as an element in the array, instead of creating that number of elements — which is what the Array constructor does.

Array.keys, Array.values, Array.entries

These provide methods that return iterators for the keys, values, and entries of an array, respectively. .next() can be called to advance the array.

The keys are the index of the array.

Array.values lets you instead iterate over the array values, and Array.entries lets you iterate over the array entries.

But, Array.values and Array.entires are NOT fully supported in Chrome and other browsers, so you may not want to use those in your code quite yet.

Array.find

Simply takes a function to find an element in the array, and returns undefined if it does not exist.

Array.findIndex

Works similarly to Array.find, and returns the index where the element was found, or -1.

Array.fill

Fills an array with a value, with optional start and end indexes. Has the signature Array.fill(value, start, end)

Array.copyWithin

Allows you to copy blocks of elements to other parts of the array. Has the signature Array.copyWithin(target, start, end)

The target is the element index to be copied over. Start and end are optional, and are the elements to be copied.

Here, the third element (target index=2) will be copied over with the values starting at element index 5.

In the second example, an end value of 6 means only one element (index 5–6) is copied over.

There are many more array functions scheduled to come in the next version of JavaScript (ES7). For now, these new methods provide new solutions for programmers when using arrays.