This article introduces the new array operation methods that ECMAScript 6 will bring us, and how to apply these new array features in existing browsers.
Note: I will use the terms constructor and class interchangeably.
Class method
Methods owned by Array itself.
Array.from(arrayLike, mapFunc?, thisArg?)
The basic function of Array.from() is to convert two types of objects into arrays.
Array-like objects
This type of object has length and index properties. The result of the DOM operator belongs to this class, such as document.getElementsByClassName().
Iterable objects
When this type of object takes a value, it can only take one element at a time. Arrays are iterable, just like the new array structures in ECMAScript, Map and Set.
The following code is an example of converting an array-like object to an array:
The result of querySelectorAll() is not an array, and there is no forEach() method. This is why we need to convert it to an array before using this method.
Use Mapping via Array.from()
Array.from() is also an alternative to using map() with generics.
The second parameter in both methods is an arrow function.
In this example, the result of document.querySelectorAll() is an array-like object, not an array. This is why we cannot call map() directly. In the first example, in order to use forEach(), we convert the array-like object into an array. Here we use the generic method and the two-parameter version of Array.from(), eliminating the intermediate step.
Holes
Array.from() ignores missing elements - holes - in the array and treats them as undefined elements.
This means that you can use Array.from() to create or fill an array:
If you want to fill an array with a fixed value, then Array.prototype.fill() (see below) will be a better choice. The first is the two ways of the above example.
from()
in Array subclass
Another use case for Array.from() is to convert an array-like object or iterable object to an instance of an array (Array) subclass. If you create an Array subclass MyArray and want to convert such an object into an instance of MyArray, you can simply use MyArray.from(). The reason this can be used is that in ECMAScript 6 constructors are inherited (the parent class constructor is the prototype of its subclass constructor).
You can combine this functionality with mapping, completing the map operation in a place where you control the result constructor:
If you want to convert a set of values into an array, you should use an array literal. Especially when there is only one value and it is a number, the array constructor will fail. Please refer to this page for more information.
What should we do if we want to convert a set of values into an instance of a numeric sub-constructor? This is the value of Array.of() (remember, the array subconstructor inherits all array methods, including of() of course).
Array.of() will be very convenient to wrap and nest the value in an array, without the weird processing method like Array(). But also pay attention to Array.prototype.map(), there are pitfalls here:
As you can see, map() will pass three parameters to its callback. The last two are often overlooked (details).
Prototype methods
Many new methods will be available for array instances.
Iterating over arrays
The following methods will help complete iteration in the array:
Each of the above methods will return a string of values, but not as an array. They will be displayed one after another through the iterator. Let's look at an example (I'll use Array.from() to put the contents of the iterator in an array):
You can combine entries() with the for-of loop in ECMAScript 6 to easily decompose the iterated object into key-value pairs:
Note: This code can already run in the latest Firefox browser. t Firefox.
Find array elements
Array.prototype.find(predicate, thisArg?) will return the first element that satisfies the callback function. If no element satisfies the condition, it returns undefined. For example:
will return the index of the first element that satisfies the callback function. If no satisfying elements are found, -1 is returned. For example:
Both find* methods will ignore holes, that is, they will not pay attention to undefined elements. The completion function signature of the callback is:
predicate(element, index, array)
Find NaN
Array.prototype.indexOf() has a well-known limitation, that is, it cannot find NaN. Because it uses identity (===) to find matching elements:
Using findIndex(), you can use Object.is(), which will not cause such problems:
You can also take a more general approach and create a helper function elemIs():
Fill an array with the given value:
Holes will not receive any special treatment:
You can also limit the start and end of your filling:
When can I use the new array methods?
Some methods are already available in the browser.