Es6 Array Extension

Ecmascript6 expands the array, adds static methods such as from () and of () to the array constructor, and adds find () and findindex () to the array instance (). Let's take a look at the usage of these methods.

Array. From ()

Array. From () converts an array (array-like) object and an object that can be traversed into an array and returns the result. For example, to convert a DOM node set to an array, we may write the following in the past:

var divs = document.querySelectAll("div");[].slice.call(divs).forEach(function (node) {   console.log(node);         })

Now we can write:

var divs = document.querySelectAll("div");Array.from(divs).forEach(function (node) {   console.log(node);         })

The above two statements are basically the same.

Array. From () can also convert the newly added set and map structures in es6 into Arrays:

// Convert the set structure to an array. from (New Set ([1, 2, 3, 4]); // [1, 2, 3, 4] // converts the map structure to an array. from (new map (["name", "zlw"]); // ["name", "zlw"]

The string is both a class array and can be traversed, so array. From () can also convert the string to an array:

Array.from("zlw"); // ["z", "l", "w"]

Array. From () has two optional parameters. The complete syntax is as follows:

Array.from(obj, mapFn, thisArg)

Mapfn is actually the map method of the array, processing each element of the array. Thisarg is the context of the execution environment. Array. From (OBJ, mapfn, thisarg) is equivalent to array. From (OBJ). Map (mapfn, thisarg ).

Array. ()

Array. of () converts its parameters to arrays. For example:

Array.of(1, 2, 3); // [1, 2, 3]

We know that using an array constructor can also implement the same function:

Array(1, 2, 3) // [1, 2, 3]

Their differences are:

Array.of(3); // [3]Array(3) // [undefined, undefined, undefined] 

When a parameter is input, array. of () returns an array with only one element, while array () returns an array with the length of the input parameter and with all elements being undefined.

Array. Prototype. Fill ()

The fill () method uses a value to fill all values between the given start and end positions in the array. The syntax is as follows:

fill(value, start, end)

The start and end parameters are fill intervals, including the start position, but not the end position. If this parameter is omitted, the default start value is 0, and the default end value is the array length. If either of the two optional parameters is negative, the array length and the number are used to determine the corresponding position. Example:

[1, 2, 3].fill(4) // [4, 4, 4][1, 2, 3].fill(4, 1, 2) // [1, 4, 3][1, 2, 3].fill(4, -3, -2) // [4, 2, 3] 

Array. Prototype. Find () and array. Prototype. findindex ()

The find () method returns the first element in the array that meets the conditions. If not, undefind is returned. Syntax:

array.find(callback, context);

Parameters include a callback function and an optional parameter (execution environment context ). The callback function traverses all elements of the array until a qualified element is found, and then the find () method returns the element. Example:

[1, 2, 3, 4].find(function(el, index, arr) {   return el > 2; }) // 3

[1, 2, 3, 4].find(function(el, index, arr) { 
　　return el > 4; 
}) // undefined

The findindex () method is similar to the find () method. The returned result is the index of the first qualified element. If not,-1 is returned. Example:

[1, 2, 3, 4].findIndex(function(el, index, arr) {   return el > 2; }) // 2

[1, 2, 3, 4].findIndex(function(el, index, arr) { 
　　return el > 4; 
}) // -1

Array. Prototype. Entries (), array. Prototype. Keys, and array. Prototype. Values ()

Both entries (), keys, and values return an array iterator object. Example:

var entries = [1, 2, 3].entries();console.log(entries.next().value); // [0, 1]
console.log(entries.next().value); // [1, 2]
console.log(entries.next().value); // [2, 3]

var keys = [1, 2, 3].keys();console.log(keys.next().value); // 0
console.log(keys.next().value); // 1
console.log(keys.next().value); // 2

var valuess = [1, 2, 3].values();console.log(values.next().value); // 1
console.log(values.next().value); // 2
console.log(values.next().value); // 3

The next () method of the iterator returns an object containing the value and done attributes. The value attribute is the value of the current traversal position, and the done attribute is a Boolean value, indicates whether the traversal ends.

We can also use for... of to traverse the iterator:

for (let i of entries) {  console.log(i)} // [0, 1]、[1, 2]、[2, 3]

for (let [index, value] of entries) {  console.log(index, value)} // 0 1、1 2、2 3

for (let key of keys) {  console.log(key)} // 0, 1, 2

for (let value of values) {  console.log(value)} // 1, 2, 3

Array. Prototype. copywithin ()

The syntax of the copywithin () method is as follows:

arr.copyWithin(target, start, end = this.length)

The last parameter is an optional parameter. If this parameter is omitted, the length of the array is used. This method copies a group of elements from the start position (including START) to the end position (excluding end) in the array to overwrite the element where the target is the starting position. Example:

[1, 2, 3, 4].copyWithin(0, 1) // [2, 3, 4, 4][1, 2, 3, 4].copyWithin(0, 1, 2) // [2, 2, 3, 4]

If the start and end parameters are negative, add the array length parameter to determine the corresponding position:

[1, 2, 3, 4].copyWithin(0, -2, -1) // [3, 2, 3, 4]

Note that copywithin () changes the array itself and returns the changed array instead of returning a copy of the original array.

Array derivation (array comprehensions)

Array derivation uses the for... of loop to generate a new array based on the existing array. Example:

[for (i of [1, 2, 3]) i * i]  // [1, 4, 9]

The IF statement can be used for Array derivation:

// A single if statement [for (I of [1, 2, 3]) if (I <3) I] // [1, 2] // multiple if statements [for (I of [1, 2, 3]) if (I <3) if (I> 1) I] // [2]

Note that for... of is always written at the beginning.

Array derivation also allows the use of multiple for... of loops:

[for (i of [1, 2, 3]) for (j of [4, 5, 6]) i * j] // [4, 5, 6, 8, 10, 12, 12, 15, 18]

Array derivation can also include array derivation:

[for (i of [1, 2, 3]) [for (j of [4, 5, 6]) i * j]] // [[4, 5, 6], [8, 10, 12], [12, 15, 18]]

 

For the support of es6 in various browsers, see kangax. GitHub. IO/es5-compat-table/es6 /.