Neue Array-Methoden: 1. from(), die ein Array-ähnliches oder iterierbares Objekt in ein echtes Array umwandeln kann 2. of(), das eine Reihe von Werten in ein Array umwandeln kann, was die Mängel ausgleicht; des Array-Konstruktors Array() ; 3. find() und findIndex(), geben das erste Array-Element zurück, das die Bedingungen erfüllt 4. fill() und so weiter;
So können Sie schnell mit VUE3.0 beginnen: Geben Sie
die Betriebsumgebung dieses Tutorials ein: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
1. Array.from()
Die Array.from-Methode wird verwendet, um zwei Arten von Objekten in echte Arrays umzuwandeln:
Array-ähnliche Objekte und
iterierbare Objekte (einschließlich ES6 new Die Datenstruktur Set und Map)
bedeutet, dass solange Wenn die Datenstruktur der Iterator-Schnittstelle bereitgestellt wird, kann Array.from sie in ein Array konvertieren.
In der tatsächlichen Entwicklung kann es im Allgemeinen zum Konvertieren der von der DOM-Operation zurückgegebenen NodeList-Sammlung sowie der Argumente innerhalb der Funktion verwendet werden.
Wenndas Objekt
einen Parameter übergibt, wird dieser verwendet, um das Klassenarray in ein echtes Array-
Array umzuwandeln, um Duplikate zu vermeiden.
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...Derselbe Effekt kann auch erzielt werden console.log([...new Set(arr)]) //[1,2,3,5]
Für Browser, die diese Methode nicht bereitstellen, können Sie sie verwenden Array.prototyp.slice-Methode anstelle von
cosnt toArray = (() => {
Array.from ? Array.from : obj => [].slice.call(obj)
})() kann auch einen zweiten Parameter empfangen, der an eine Funktion übergeben wird, um einen ähnlichen Effekt wie die Map-Methode zu erzielen, indem jedes Element verarbeitet und das verarbeitete Array
Array.from([1,2,3 ], item =>zurückgegeben wird
item *2) //[2,4,6]
Die Länge der zurückgegebenen Zeichenfolge
kann verwendet werden, um die Zeichenfolge in ein Array umzuwandeln und dann die Länge der Zeichenfolge zurückzugeben, da verschiedene Unicode-Zeichen korrekt verarbeitet werden können. Dies wird vermieden JS-eigener Fehler beim Zählen von Unicode-Zeichen größer als /uFFFF als 2-Zeichen
-Funktion countLength(string) {
Rückgabe Array.from(string).length
} 2. Array.of()
Die Methode Array.of wird verwendet, um eine Reihe von Werten in ein Array umzuwandeln. Machen Sie die Mängel des Array-Konstruktors Array() wett. Da die Anzahl der Parameter unterschiedlich ist, ist das Verhalten von Array() unterschiedlich
//Der folgende Code zeigt den Unterschied Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]
neues Array(3); // [, , ,]
neues Array(3, 11, 8); // [3, 11, 8]
//Die Array.of-Methode kann mit dem folgenden Code simuliert werden.
Funktion ArrayOf() {
return [].slice.call(arguments);
} 3. Find() und findIndex( )
von Array-Instanzen
geben das erste Array-Mitglied zurück, das die Bedingungen erfüllt. Sein Parameter ist eine Rückruffunktion, bis das erste die Bedingungen erfüllt Wenn kein Mitglied vorhanden ist, das die Bedingungen erfüllt,
erhält die Rückruffunktion dieser Methode drei Parameter: aktueller Wert, aktuelle Position, ursprüngliches Array-
Beispiel
1
,0,5] .find((item,index, arr) => return item < 1) // 0
Beispiel 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find unterstützt auch diese Art der komplexen Suche var point = [
{
x: 10,
Jahr: 20
},
{
x: 20,
Jahr: 30
},
{
x: 30,
Jahr: 40
},
{
x: 40,
Jahr: 50
},
{
x: 50,
Jahr: 60
}
];
point.find(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 } Die Schreibweise und Verwendung von findIndex()
ist im Grunde die gleiche wie bei der find()-Methode. Sie gibt lediglich die Position des ersten Array-Mitglieds zurück, das die Bedingungen erfüllt ist keine, es gibt -1 zurück.
Beispiel 1
[1 ,2,4,15,0].findIndex((item, index,arr) => return item > 10) //3Beispiel
2
var point = [
{
x: 10,
Jahr: 20
},
{
x: 20,
Jahr: 30
},
{
x: 30,
Jahr: 40
},
{
x: 40,
Jahr: 50
},
{
x: 50,
Jahr: 60
}
];
point.findIndex(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
point.findIndex(function matcher(point) {
return point.x % 6 == 0 && point.y % 7 == 0;
}); //1 4. Die Methode fill(
// Die Fill-Methode füllt ein Array mit dem angegebenen Wert.
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
// Die Füllmethode kann auch den zweiten und dritten Parameter akzeptieren, mit denen die Start- und Endposition des Füllvorgangs angegeben wird.
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// Beachten Sie, dass, wenn der ausgefüllte Typ ein Objekt ist, das zugewiesene Objekt dieselbe Speicheradresse hat, nicht das Deep-Copy-Objekt.
let arr = new Array(3).fill({
Name: „Mike“
});
arr[0].name = "Ben";
console.log(arr);
// [{name: „Ben“}, {name: „Ben“}, {name: „Ben“}] Beide Methoden können NaN im Array finden, aber indexOf() in ES5 kann NaN 5 nicht finden
Die Methoden„entrys()“, „keys()“ und „values()“ der Array-Instanz
werden alle zum Durchlaufen des Arrays verwendet und alle geben ein Traverser-Objekt zurück. Die for...of-Schleife kann zumDurchlaufen
des Arrays verwendet werden.
„keys()“ ist ein Paar von Schlüsselnamen. Das „Traversal“ von
„values()“ ist ein „Traversal“
von
Schlüsselwerten ()) {
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. Die Methode Includes() gibt einen booleschen Wert
zurück , gibt an, ob ein Array einen bestimmten Wert enthält
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
kann auch einen zweiten Parameter empfangen, der die Startposition der Suche angibt, der Standardwert ist 0. Wenn der zweite Parameter eine negative Zahl ist, gibt er die Position der Zahl an. Wenn der zweite Parameter größer als die Länge des Arrays ist, beginnt die Includes-Methode bei Index 0,
um die Mängel der indexOf-Methode auszugleichen, die nicht semantisch genug ist und NaN
[1, 23, NaN] falsch einschätzt.includes(NaN) //wahre
kompatible Methode:
Funktion enthält = ( () => {
Array.prototype.includes
?(arr, val) => arr.includes(val)
:(arr , val) => arr.some(item => return item === val)
})() 7. Flat() von Array-Instanzen, 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])
//Nachdem die Karte ausgeführt wurde, ist sie [[2, 4], [3, 6], [4, 8]]
//Führen Sie dann die Methode flat() aus, um das folgende Ergebnis zu erhalten // [2, 4, 3, 6, 4, 8]
// flatMap() kann nur eine Array-Ebene erweitern.
// Entspricht .flat()
[1, 2, 3, 4].flatMap(x => [
[x*2]
])
//Nachdem die Karte ausgeführt wurde, ist sie [[[2]], [[4]], [[6]], [[8]]]
//Führen Sie dann die Methode flat() aus, um die folgenden Ergebnisse zu erhalten // [[2], [4], [6], [8]] Code 8 kopieren. Copywithin() der Array-Instanz
kopiert das Mitglied unter Kopieren Sie die angegebene Position innerhalb des aktuellen Arrays und kehren Sie dann zum aktuellen Array zurück. Dadurch wird das ursprüngliche Array geändert,
um drei Parameter zu erhalten:
1. Ziel (erforderlich) Beginn der Datenersetzung ab dieser Position
2. Start (optional) Beginnen Sie mit dem Lesen von Daten ab dieser Position. Der Standardwert ist 0. Wenn es sich um eine negative Zahl handelt, bedeutet dies, dass
das Lesen von Daten gestoppt wird, bevor die Zahl 3 erreicht wird, und endet (optional). Der Standardwert entspricht der Array-Länge. Wenn es sich um eine negative Zahl handelt, bedeutet dies, dass
alle drei Parameter Zahlen sein sollten. Andernfalls werden sie automatisch in numerische Werte umgewandelt
[1,2,3,4,5].copywithin(0,3); /[4,5,3 ,4,5] bedeutet, dass die Mitglieder vom Index 3 bis zum Ende (4,5) an die Position ab Index 0 kopiert werden und die ursprünglichen 1 und 2 ersetzt werden.