Zusammenfassung und gemeinsame Nutzung der JavaScript-Array-Operationsfunktionen

Array Advanced

wurden die Grundkonzepte von Arrays und einige einfache Funktionen zur Array-Elementoperation vorgestellt. Tatsächlich bieten Arrays noch viele weitere Funktionen.

push , pop , shift und unshift sind Funktionen, die an beiden Enden des Arrays ausgeführt werden. Sie wurden oben erwähnt und werden in diesem Artikel nicht wiederholt.

Das Löschen von Elementen (Objektmethode)

wurde im vorherigen Artikel kurz vorgestellt. Ein Array ist ein spezielles Objekt, daher können wir versuchen, die Attributlöschmethode des Objekts zu verwenden: delete .

Beispiel:

let arr = [1,2,3,4,5];delete arr[2];console.log(arr);

Die Ergebnisse der Codeausführung lauten wie folgt:

Achten Sie auf die gelbe Position im Bild. Obwohl das Element gelöscht wurde, beträgt die Länge des Arrays immer noch 5 , und an der gelöschten Position ist ein zusätzlicher空vorhanden. Wenn wir auf das Element mit Index 2 zugreifen, erhalten wir folgendes Ergebnis:

Der Grund für dieses Phänomen ist, dass delete obj.key den entsprechenden Wert über key entfernt. Das heißt, delete arr[2] löscht das 2:3 -Schlüssel-Wert-Paar im Array. Wenn wir auf Index 2 zugreifen, ist es undefined .

In einem Array hoffen wir oft, dass nach dem Löschen eines Elements die Position des Elements durch nachfolgende Elemente aufgefüllt wird und die Länge des Arrays kürzer wird.

Zu diesem Zeitpunkt benötigen wir splice() .

ist

vorab, dass splice() sehr vielseitig ist und nicht nur Elemente löscht. Die folgende Syntax lautet:

arr.splice(start[,deleteCount,e1,e2,...,eN]. )

splice Löschen Sie ausgehend von der start die deleteCount Elemente und fügen Sie dann e1,e2,e3 und andere Elemente ein.

Ein Element löschen

Das folgende Beispiel kann ein Element aus dem Array löschen:

let arr = [1,2,3,4,5]arr.splice(0,1);//Delete the first element 1console.log(arr)

The Der obige Code löscht 1 Element an der ersten Position im Array. Die Ausführungsergebnisse sind wie folgt:

Das Löschen mehrerer Elemente

ist dasselbe wie das Löschen eines Elements. Sie müssen nur den zweiten Parameter auf die angegebene Zahl ändern. Beispiel:

let arr = [1,2,3,4,5];arr. ;//Löschen Sie die ersten drei Elemente console.log(arr);//[4,5]

Die Ergebnisse der Codeausführung lauten wie folgt:

angeben

start werden alle Elemente nach start des Arrays gelöscht. Beispiel:

let arr = [1,2,3,4,5]arr.splice(2); //Delete Console.log(arr);//[1,2] 
Codeausführungsergebnisse
 aus Index 2 und allen nachfolgenden Elementen

Elementersetzung

Wenn wir mehr als zwei Parameter angeben, können wir Array-Elemente ersetzen, zum Beispiel:

let arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]

Die Ergebnisse der Codeausführung lauten wie folgt:

Der obige Code führt tatsächlich einen zweistufigen Vorgang aus, bei dem zunächst 2 Elemente beginnend bei 0 gelöscht und dann drei neue Elemente an der Position 0 eingefügt werden.

Elementeinfügung

Wenn wir den zweiten Parameter (die Anzahl der Löschungen) auf 0 ändern, können wir nur Elemente einfügen, ohne Elemente zu löschen. Beispiel:

let arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]

Rückgabewert

Die Funktion splice() gibt das Array gelöschter Elemente zurück, zum Beispiel:

let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]

Ergebnisse der Codeausführung:

Negativer Index

Wir können negative Zahlen verwenden, um die Position anzugeben, an der mit Bedienelementen begonnen werden soll, zum Beispiel:

let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']

Die Ergebnisse der Codeausführung lauten wie folgt:

Slice()

slice() kann ein Array in einem angegebenen Bereich abfangen. Die Syntax lautet wie folgt:

arr.slice([start],[end])

gibt ein neues Array zurück, das am start beginnt und am end endet , enthält jedoch nicht end .

Beispiel:

let arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3) )//[2,3]

Ergebnis der Codeausführung:

slice() kann auch negative Indizes verwenden:

let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr . Slice(-5,-1))//[1,2,3,4]

Die Ergebnisse der Codeausführung sind wie folgt:

Wenn Sie der Methode slice() nur einen Parameter zur Verfügung stellen, wird dieser genau wie splice() bis zum Ende des Arrays gekürzt.

concat()

Die Funktion concat() kann mehrere Arrays oder andere Wertetypen zu einem langen Array verketten. Die Syntax lautet wie folgt:

arr.concat(e1, e2, e3)

Der obige Code gibt ein neues Array zurück Das neue Array wird durch arr Es wird aus e1 , e2 und e3 gebildet.

Beispiel:

let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))

Das Ergebnis der Codeausführung ist wie folgt:

Gewöhnliche Objekte werden dennoch als Ganzes in das Array eingefügt, auch wenn sie genauso aussehen wie Objekte, zum Beispiel:

let arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj))

Ergebnisse der Codeausführung:

Wenn das Objekt jedoch über die Eigenschaft Symbol.isConcatSpreadable verfügt, wird es als Array behandelt:

let arr = [1,2]let obj = {0:'x',
           1:'y',
           [Symbol.isConcatSpreadable]:true,
           length:2 }console.log(arr.concat(obj))

Ergebnisse der Codeausführung:

forEach()

durchläuft das gesamte Array und stellt eine Operationsfunktion für jedes Array-Element bereit. Syntax:

let arr = [1,2]arr.forEach((itm,idx,array)=>{
    ...})

Anwendungsbeispiel:

let arr = [1,2,3,4,5]arr.forEach((itm)=>{
    console.log(itm)})

Ergebnisse der Codeausführung:

let arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
    console.log(`arr[${idx}] in [${array}] is ${itm}`)})

Ergebnisse der Codeausführung:

indexOf, lastIndexOf und Includes

ähneln Zeichenfolgen. indexOf , lastIndexOf und includes können mit dem Index des angegebenen Elements im Abfragearray verwendet werden:

1. arr.indexOf(itm,start) : Suche nach itm ab start . Wenn gefunden, geben Sie den Index zurück, andernfalls geben Sie -1 zurück.
2. arr.lastIndexOf(itm,start) : Durchsuchen Sie das gesamte Array in umgekehrter Reihenfolge bis start und geben Sie den ersten gefundenen Index zurück (d. h. das letzte übereinstimmende Element im Array). Wenn -1
3. true false arr.includes(itm,start) itm start

zurück

; 6,"7","8","9" ,0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console. log(arr.includes(10))//falseconsole. log(arr.includes(9))//false

Diese Methoden verwenden === beim Vergleich von Array-Elementen, daher sind false und 0 unterschiedlich.

Handhabung von NaN

NaN ist eine besondere Zahl, und es gibt subtile Unterschiede zwischen den dreien bei der Handhabung NaN :

let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole. log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1Der

Grund für dieses Ergebnis hängt mit den Eigenschaften von NaN selbst zusammen, das heißt, NaN ist keiner Zahl gleich , auch er selbst.

Diese Inhalte wurden in den vorherigen Kapiteln besprochen. Denken Sie bei vergessenen Kinderschuhen daran, die Vergangenheit Revue passieren zu lassen und Neues zu lernen.

Find und findIndex

stoßen während des Programmiervorgangs häufig auf Objektarrays , und Objekte können nicht direkt mit === verglichen werden. Wie finde ich Objekte, die die Bedingungen im Array erfüllen?

Zu diesem Zeitpunkt müssen Sie find und findIndex verwenden. Die Syntax lautet wie folgt:

let result = arr.find(function(itm,idx,array){
    //itm-Array-Element //idx-Element-Subskript //Array-Array selbst //übergeben Sie eine Beurteilungsfunktion. Wenn die Funktion „true“ zurückgibt, geben Sie das aktuelle Objekt zurück itm})

Wir suchen beispielsweise nach Objekten, deren name gleich xiaoming ist :

let arr =[
    {id:1,name:'xiaoming'},
    {id:2,name:'xiaohong'},
    {id:3,name:'xiaojunn'},]let xiaoming = arr.find(function(itm,idx,array){
    if(itm.name == 'xiaoming')return true;})console.log(xiaoming)

Ergebnis der Codeausführung:

Wenn kein Objekt vorhanden ist, das die Bedingungen erfüllt, wird undefined zurückgegeben.

Der obige Code kann auch vereinfacht werden zu:

itm

)=> itm.name == 'xiaoming').

Der Zweck von arr.findIndex(func) ist fast derselbe wie arr.find(func) Der einzige Unterschied besteht darin, dass arr.findIndex den Index des qualifizierten Objekts anstelle des Objekts selbst zurückgibt -1 .

filter

find und findIndex können nur ein Objekt finden, das die Anforderungen erfüllt. Wenn in einem Array mehrere Objekte vorhanden sind, müssen Sie filter wie folgt verwenden:

let results = arr.filter(function( itm,idx,array){
    //Gleiche Verwendung wie find, gibt aber ein Array von Objekten zurück, die den Anforderungen entsprechen //Wenn nicht gefunden, wird ein leeres Array zurückgegeben})

Zum Beispiel:

let arr =[
    {id:1,name:'xiaoming'},
    {id:2,name:'xiaohong'},
    {id:3,name:'xiaojunn'},]let res = arr.filter(function(itm,idx,array){
    if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res)

Ergebnis der Codeausführung:

„map

arr.map kann eine Funktion für jedes Objekt des Arrays aufrufen und dann das verarbeitete Array zurückgeben. Dies ist eine der nützlichsten und wichtigsten Methoden von Arrays.

Syntax:

let arrNew = arr.map(function(itm,idx,array){
    //Neues Ergebnis zurückgeben})

Geben Sie beispielsweise das Längenarray zurück, das dem String-Array entspricht:

let arr = ['I','am','a','student']let arrNew = arr.map((itm) = >itm.length)//return itm.lengthconsole.log(arrNew)//[1,2,1,7]

Code-Ausführungsergebnis:

sort

arr.sort sortiert das Array an Ort und Stelle und gibt das sortierte Array zurück. Da das ursprüngliche Array jedoch geändert wurde, ist der Rückgabewert eigentlich bedeutungslos.

Die sogenannte In-Place-Sortierung bedeutet, dass innerhalb des ursprünglichen Array-Bereichs sortiert wird, anstatt ein neues Array zu erstellen

let arr = ['a','c','b']arr.sort()console.log(arr)

Codeausführung Ergebnis:

Beachten Sie, dass die sort standardmäßig in alphabetischer Reihenfolge sortiert, was für die Zeichenfolgensortierung geeignet ist. Wenn Sie andere Arten von Arrays sortieren möchten, müssen Sie die Vergleichsmethode

für numerische Arrays

, z. B. arr = [1,3,2]. arr. sort(function(a,b){
    if(a > b)return 1;
    if(a < b)return -1;
    return 0;})

Ergebnis der Codeausführung:

sort verwendet intern den Schnellsortierungsalgorithmus oder den timsort -Algorithmus, aber wir müssen uns nicht darum kümmern, wir müssen nur auf die Vergleichsfunktion achten.

Die Vergleichsfunktion kann jeden numerischen Wert zurückgeben, eine positive Zahl bedeutet > , eine negative Zahl bedeutet < und 0 bedeutet gleich, sodass wir die numerische Vergleichsmethode vereinfachen können:

let arr = [1,3,2]arr.sort(( a,b)=> a - b)

Wenn Sie in umgekehrter Reihenfolge sortieren möchten, tauschen Sie einfach die Positionen von a und b aus:

let arr = [1,3,2]arr.sort((a,b)=> b - a)

String

-Sortierung Sie haben vergessen, str.localeCompare(str1) für den String-Vergleich zu verwenden?

let arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare (b))

Code-Ausführungsergebnis:

reverse

arr.reverse wird für Reverse-Arrays verwendet

let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]

Dazu gibt es nichts zu sagen.

str.split() und arr.join()

Erinnern Sie sich an die String-Splitting-Funktion? Die Zeichenfolgenaufteilungsfunktion kann die Zeichenfolge in ein Zeichenarray aufteilen:

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']

Unbeliebt Wissen, die split -Funktion hat einen zweiten Parameter, der die Länge des generierten Arrays begrenzen kann

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming',' xiaohong']

Die Methode arr.join() ist das Gegenteil der Methode split . Sie kann ein Array zu einer Zeichenfolge kombinieren.

Zum Beispiel:

let arr = [1,2,3]let str = arr.join(';')console.log(str)

Ergebnis der Codeausführung:

Reduce, ReduceRight

arr.reduce ähnelt der Methode arr.map . Sie übergeben beide eine Methode und rufen diese Methode dann nacheinander für die Array-Elemente auf. Der Unterschied besteht darin, dass app.map jedes Array-Element verarbeitet Der Elementaufruf ist unabhängig und arr.reduce übergibt das Aufrufergebnis des vorherigen Elements an die aktuelle Elementverarbeitungsmethode.

Syntax:

let res = arr.reduce(function(prev,itm,idx,array){
    //prev ist das vom vorherigen Elementaufruf zurückgegebene Ergebnis //init dient als Ergebnis des vorherigen Elementaufrufs, wenn das erste Element ausgeführt wird}, [init])

Stellen Sie sich vor, wie Sie die Summe der Array-Elemente implementieren, aus denen sie besteht Zahlen? Es gibt keine Möglichkeit, Map zu implementieren. Sie müssen arr.reduce verwenden:

let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+ itm,0) console.log(res)//15

Der Codeausführungsprozess ist wie folgt:

arr.reduceRight hat den gleichen Zweck wie arr.reduce , außer dass Methoden für Elemente von rechts nach links aufgerufen werden.

Array.isArray()

Array ist ein Sonderfall von Objekten. Die Verwendung von typeof kann den Unterschied zwischen den beiden nicht genau unterscheiden:

console.log(typeof {})//objectconsole.log(typeof [])//object

Beide sind Objekte, wir Sie müssen Array.isArray() verwenden, um weitere Urteile zu fällen:

console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true

some, every

arr.some(func) Die Methoden arr.some(func) und arr.every(func) werden zum Überprüfen von Zahlen verwendet, und der Ausführungsmechanismus ähnelt dem von map .

some

führt die übergebene Methode für jedes Array-Element aus. Wenn die Methode true zurückgibt, gibt sie sofort true zurück. Wenn nicht alle Elemente true zurückgeben, gibt sie false zurück.

every

führt die übergebene Methode für jedes Element des Arrays aus und gibt true zurück, wenn alle Elemente true zurückgeben, andernfalls wird false zurückgegeben.

Zum Beispiel:

let arr = [1,2,3,4,5]//Bestimmen Sie, ob das Array Elemente enthält, die größer als 2 sind console.log(arr.some((itm)=>{
    if(itm > 2)return true;}))//true//Bestimmen Sie, ob alle Elemente größer als 2 sindconsole.log(arr.every((itm)=>{
    if(itm > 2)return true;}))//false

thisArg

In allen Array-Methoden außer sort gibt es einen ungewöhnlichen festen Parameter thisArg . Die Syntax lautet wie folgt:

arr.find(func,thisArg)arr.filter( func,thisArg)arr.map(func,thisArg)

Wenn wir thisArg übergeben, wird es in func this .

Dieser Parameter ist unter normalen Umständen von geringem Nutzen, aber wenn func eine Mitgliedsmethode (Methode eines Objekts) ist und this in der Methode verwendet wird, ist thisArg sehr aussagekräftig.

Zum Beispiel:

sei obj = {
    Anzahl: 3,
    func(itm){
        console.log(dies)
        return itm > this.num;//Zahlen größer als 3 finden}}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log (newArr)

Codeausführungsergebnis:

Hier können wir sehen, dass this in func der von uns übergebene thisArg -Wert ist.

Wenn wir Objektmitgliedsmethoden verwenden, ohne den Wert von thisArg anzugeben, ist this undefined , was zu einem Programmfehler führt.