New array methods: 1. from(), which can convert an array-like or iterable object into a real array; 2. of(), which can convert a set of values into an array, which makes up for the shortcomings of the array constructor Array() ; 3. find() and findIndex(), return the first array element that meets the conditions; 4. fill() and so on.
How to quickly get started with VUE3.0: Enter
the operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.
1. Array.from()
The Array.from method is used to convert two types of objects into real arrays:
array-like objects and
iterable objects (including ES6 new The data structure Set and Map)
means that as long as the data structure of the Iterator interface is deployed, Array.from can convert it into an array.
In actual development, it can generally be used to convert the NodeList collection returned by the DOM operation, as well as the arguments inside the function.
Whenthe object
passes a parameter, it is used to convert the class array into a real array
array to remove duplication.
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...The same effect can also be achieved console.log([...new Set(arr)]) //[1,2,3,5]
For browsers that do not deploy this method, you can use Array. prototype.slice method instead of
cosnt toArray = (() => {
Array.from ? Array.from : obj => [].slice.call(obj)
})() can also receive a second parameter, which is passed into a function to achieve an effect similar to the map method, processing each element and returning the processed array
Array.from([1,2,3 ], item => item *2) //[2,4,6]
The length of the returned string
can be used to convert the string into an array, and then return the length of the string, because it can correctly handle various Unicode characters, This avoids JS’s own bug of counting Unicode characters greater than /uFFFF as 2 characters
function countLength(string) {
return Array.from(string).length
} 2. Array.of()
The Array.of method is used to convert a set of values into an array. Make up for the shortcomings of the array constructor Array(). Because the number of parameters is different, the behavior of Array() will be different
//The following code shows the difference Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]
new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]
//The Array.of method can be simulated with the following code.
function ArrayOf() {
return [].slice.call(arguments);
} 3. Find() and findIndex() of array instances.
find()
returns the first array member that meets the conditions. Its parameter is a callback function. All array members execute this function in sequence until the first one that meets the conditions is found. member, and then return the member. If there is no member that meets the conditions, return undefined.
The callback function of this method receives three parameters: current value, current position, original array
example 1
[1,12,4,0,5] .find((item,index, arr) => return item < 1) // 0
Example 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find also supports this kind of complex search var points = [
{
x: 10,
y: 20
},
{
x: 20,
y: 30
},
{
x: 30,
y: 40
},
{
x: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.find(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 } The writing and usage of findIndex()
is basically the same as the find() method. It just returns the position of the first array member that meets the conditions. If there is none, it returns -1.
Example 1
[1 ,2,4,15,0].findIndex((item, index,arr) => return item > 10) //3Example
2
var points = [
{
x: 10,
y: 20
},
{
x: 20,
y: 30
},
{
x: 30,
y: 40
},
{
x: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.findIndex(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
return point.x % 6 == 0 && point.y % 7 == 0;
}); //1 4. The fill(
// The fill method fills an array with the given value.
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//The fill method can also accept the second and third parameters, which are used to specify the starting and ending positions of filling.
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// Note that if the filled type is an object, then the object assigned is the same memory address, not the deep copy object.
let arr = new Array(3).fill({
name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] Both methods can find NaN in the array, but indexOf() in ES5 cannot find NaN. 5.
The three methodsentries(), keys() and values() of the array instance
are all used to traverse the array, and all return a traverser object. The for...of loop can be used to traverse the array.
The difference is:
keys() is a pair of key names. The traversal of
values() is a traversal of key values.
entries() is a traversal of 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);
}
//ab
for (let [index, elem] of ["a", "b"].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
var a = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6. The includes() method returns a Boolean value
. This method returns a Boolean value, indicating Whether an array contains a given value
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
can also receive a second parameter, indicating the starting position of the search, the default is 0. If the second parameter is a negative number, it indicates the position of the number. If the second parameter is greater than the length of the array, the includes method starts from subscript 0
to make up for the shortcomings of the indexOf method that is not semantic enough and misjudges NaN
[1, 23, NaN].includes(NaN) //true
compatible method:
function contains = ( () => {
Array.prototype.includes
?(arr , val) => arr.includes(val)
:(arr , val) => arr.some(item => return item === val)
})() 7. Flat() of array instances, flatMap()
// flat()
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
//flatMap()
[2, 3, 4].flatMap((x) => [x, x * 2])
//After map is executed, it is [[2, 4], [3, 6], [4, 8]]
//Then execute the flat() method to get the following result // [2, 4, 3, 6, 4, 8]
// flatMap() can only expand one level of array.
// Equivalent to .flat()
[1, 2, 3, 4].flatMap(x => [
[x*2]
])
//After map is executed, it is [[[2]], [[4]], [[6]], [[8]]]
//Then execute the flat() method to get the following results // [[2], [4], [6], [8]] Copy code 8. The copywithin() of the array instance
will copy the member at the specified position inside the current array. Copy to other positions, and then return to the current array, which will change the original array
to receive three parameters:
1. target (required) start replacing data from this position
2. start (optional) start reading data from this position, the default is 0, If it is a negative number, it means
stopping reading data before reaching the number 3 and end (optional). The default is equal to the array length. If it is a negative number, it means that
all three parameters should be numbers. If not, they will be automatically converted to numerical values
[1,2,3,4,5].copywithin(0,3); //[4,5,3 ,4,5] means that the members from subscript 3 to the end (4,5) are copied to the position starting from subscript 0, and the original 1 and 2 are replaced.