Two static methods provided by ES6:
ES6 provides methods for manipulating, populating, and filtering arrays:
Array.prototype.copyWidthin
Array.prototype.fill
Array.prototype.find
Array.prototype.findIndex
The methods in ES6 for array iterations:
Array.prototype.keys
Array.prototype.values
Array.prototype.entries
Array.prototype[Symbol.iterator]
The next step is to look at the use of these methods.
Array.from()
Array.from()
The Array-like method is primarily used to convert two types of objects (array-like objects [object] and Ergodic objects [iterable]) to true arrays.
In ES5, you often use the following method to convert an array-like object into an array:
function cast () { return Array.prototype.slice.call (arguments);} Cast (// ["A", "B", "C", "D"]
In ES6, you can use Array.from
an array-like object to convert to a real array.
Let Arraylike = { ' 0 ': ' A ', ' 1 ': ' B ', ' 2 ': ' C ', 3// ["A", "B", "C"]
In ES6, the extension operator ( ...
) can also convert some data structures into arrays. It just needs to call the Walker interface behind it Symbol.iterator
.
function cast () { return [... arguments]}cast (// ["A", "B", "C"]
It is important to note that if an object does not have a walker interface deployed, it is not possible to convert similar array objects into arrays using an extension operator.
Array.from
Three parameters are accepted, but only input
necessary:
input
: You want to convert similar array objects and objects that can be traversed
map
: An array-like map
method used to process each element, placing the processed value in the returned array
context
: Used in Bindings map
this
As long as the iterator
data structure of the interface is deployed, Array.from
it can be converted to an array:
Let arr = Array.from (' w3cplus.com '// ["W", "3", "C", "P", "L", "U", "S", ".", "C", "O", "M"] New Set ([' A ', ' B '=//["A", "B"]
The above code, because both the character Fulu and the set structure have iterator
interfaces, can be Array.from
converted to a real array. If the argument is a true array, Array.from
It also returns an identical new array:
Let arr = Array.from ([1, 2, 3// [+]
As I said earlier, Array.from
you can also accept the second parameter, which acts like an array map
method, which is used to process each element and put the processed value into the returned array:
Array.from (arraylike, x = x * x); // equivalent to Array.from (arraylike). map (x = = x * x); Array.from ([1, 2, 3], (x) = x * x)// [1, 4, 9]
If you map
use a keyword inside a function, this
you can also pass Array.from
in the third parameter, which is used to bind this
.
Array.from()
You can convert various values to real arrays and also provide map
functionality. This actually means that as long as there is an original data structure, you can work with its value first, then turn it into a canonical array structure, and you can use a large number of array methods.
Array.from ({length:2}, () = ' Jack ')// [' Jack ', ' Jack ']
Array.from
the first parameter in the preceding code specifies the number of times the second parameter is run. This feature makes the method more flexible to use.
Array.from()
Another application is to convert the string to an array and then return the length of the string. Because it handles a variety of Unicode
characters correctly, you can avoid a bug that JavaScript will be larger than \uFFFF
the Unicode character, which counts as two characters.
function Countsymbols (String) { return array.from (string). length;
Array.from()
you can also return various data types using:
function typesof () { returntypeof value)}typesof (null, [], NaN) // <-[' object ', ' object ' , ' number ']
You can also use map
the method to implement the functionality of the above code:
function typesof (... all) {returntypeof value)}typesof (null, [], NaN) // <-[' object ', ' object ', ' number ']
Array.of
Use Array.of
a method to convert a set of values to an array.
function of () { return Array.prototype.slice.call (arguments)}
But you can't use Array.of
them instead Array.prototype.slice.call
, they behave differently:
Array.prototype.slice.call ([1, 2, 3])// <-[1, 2, 3]array.of (1, 2, 3)// <-[1, 2, 3]array.of (3)// <-[1]
The main purpose of this method is mainly to compensate for the insufficiency of the array constructor Array()
, because the different number of parameters leads to the Array()
difference in behavior:
NewArray ()//<-[]NewArray (undefined)//<-[undefined]NewArray (1)//<-[undefined x 1]NewArray (3)//<-[undefined x 3]NewArray (1, 2)//<-[1, 2]NewArray (-1)//<-rangeerror:invalid Array length
Array.of
Can basically be used to replace Array()
or new Array()
, and there are no overloads caused by different parameters, and their behavior is very uniform:
Array.of () // <-[] array.of (undefined) // <-[undefined] Array.of (1)// <-[1]Array.of (3)// <-[3]Array.of (1 , 2)// <-[1, 2]array.of ( -1)// <-[-1]
Array.of
Method can use the following code to simulate the implementation:
function arrayof () { return [].slice.call (arguments);}
copyWidthin
copyWidthin
Method can copy an array item of the specified position to another location (overwriting the original array item) inside the current array, and then return the current array. The copyWidthin
current array is modified using the method.
this. Length)
copyWidthin
Three parameters will be accepted:
target
: This parameter is required to replace the array item from that position
start
: This is an optional parameter from which to begin reading array items, by default 0
, if negative, to start reading from right to left of the array
end
: This is an optional parameter that stops reading the array item to that location, by default equals Array.length
. If negative, indicates the reciprocal
Let's start with a simple example, which declares an items
array:
var // <-[1, 2, 3, undefined x 7]
The following code items
begins by pasting the array item in the sixth position of the array. Pasting past array items is items
the second bit from the beginning to the end of the third position.
Items.copywithin (6, 1, 3)// <-[1, 2, 3, UNDEFINEDX3, 2, 3, UNDEFINEDX2]
Here are more examples:
//Copy the 3rd number to the number No. 0 bit[1, 2, 3, 4, 5].copywithin (0, 3, 4)//[4, 2, 3, 4, 5]//-2 is equivalent to 3rd digits, 1 is equivalent to the number of 4th digits[1, 2, 3, 4, 5].copywithin (0,-2,-1)//[4, 2, 3, 4, 5]//Copy the 3rd number to the number No. 0 bit[].copywithin.call ({length:5, 3:1}, 0, 3)//{0:1, 3:1, length:5}//end the number 2nd to the array and copy it to the number No. 0 bitvarI32A =NewInt32array ([1, 2, 3, 4, 5]); I32a.copywithin (0, 2);//Int32array [3, 4, 5, 4, 5]//for platforms that do not have a Copywithin method deployed Typedarray//you need to use the following notation[].copywithin.call (NewInt32array ([1, 2, 3, 4, 5]), 0, 3, 4);//Int32array [4, 2, 3, 4, 5]
Array.prototype.fill
Array.prototype.fill
method to populate an array with the given values:
[' A ', ' B ', ' C '].fill (0)// <-[0, 0, 0]new Array (3). Fill (0)// <-[0, 0, 0]
The above method is convenient for initializing an empty array. The elements that are already in the array are erased.
In addition, the Array.prototype.fill
method can accept the second and third parameters, which specify the starting and ending positions of the fill.
[' A ', ' B ', ' C ',,,].fill (0, 2)// <-[' A ', ' B ', 0, 0, 0]new Array (5). Fill (0, 0, 3 )// <-[0, 0, 0, undefined x 2]
Array.prototype.fill
The provided value can be arbitrary, not only a numeric value, but also a primitive type:
New Array (3). Fill ({})// <-[{}, {}, {}]
However, this method can not accept the array mapping method, but can accept an index parameter or similar to the following way:
New Array (3). Fill (function foo () {})// <-[function foo () {}, function foo () {}, function Foo () {}]
Array.prototype.find
Array.prototype.find
method is used to find the first array member that matches a condition. Its argument is a callback function, and all array members execute the callback function sequentially until they find the first true
array item that returns a value, and then return the array item. Returns if there are no array items that match the criteria undefined
.
[1, 2, 3, 4, 5].find (item = item > 2)// <-3[1, 2, 3, 4, 5].find (item, i) = = = = 3)// <-4[1, 2, 3, 4, 5].find (item = = = = Infinity)// <- Undefined
In addition, the callback function of this method can accept three parameters, which are the current value, the current position, and the original array.
[1, 5, 15].find (function(value, index, arr) { return value > 9 // Ten
Array.prototype.findIndex
This method is similar to .some
and .find
method. Like .some
return true
; .find
item
If array[index] === item
it is returned index
.
Array.prototype.findIndex
method is used primarily to return the position of an array item in an array. It Array.prototype.find
is very similar to the method, which accepts a callback function that returns the position of the array item in the array if it conforms to the condition of the callback function, and returns if all array items do not conform to the callback function condition -1
.
[1, 2, 3, 4, 5].find (item = item > 2)// <-2[1, 2, 3, 4, 5].find (item, i) => ; i = = 3)// <-3[1, 2, 3, 4, 5].find (item = = = = Infinity)// <--1
This method can also accept the second parameter, which is used to bind the object of a callback function this
.
Note: Array.prototype.find
And Array.prototype.findIndex
two methods can be found NaN
to compensate for the lack of array indexOf
methods.
[Nan].indexof (NaN) // -1 = = object.is (NaN, y))// 0
In the preceding code, the indexOf
method does not recognize the members of the array NaN
, but the method findIndex
can do so Object.is
.
ES6 How to iterate through an array
ES6 provides three new methods: entries()
, keys()
and values()
, to iterate over an array. They all return a Walker object that can be traversed with a loop, with the only difference being the traversal of the for...of
keys()
key name of the array, the traversal of the values()
array key value, and the entries()
traversal of the value's key-value pairs.
for (Let index of [' A ', ' B '].keys ()) { console.log (index);} // 0 // 1 for (Let elem of [' A ', ' B '].values ()) { console.log (elem);} // ' A ' // ' B ' for (Let [index, Elem] of [' A ', ' B '].entries ()) { Console.log (index, elem);} // 0 "a" // 1 "B"
If you do not use for...of
loops, you can manually invoke the method of the Walker object to next
Traverse:
Let letter = [' A ', ' B ', ' C '=// [0, ' a ']// [1, ' B ']// [2, ' C ']
Javascrip ES6 Array method