Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung des JavaScript-Arrays (Array)_Grundkenntnisse

Detaillierte Erklärung des JavaScript-Arrays (Array)_Grundkenntnisse

WBOY
Freigeben: 2016-05-16 16:06:29
Original
1258 Leute haben es durchsucht

ECMAScript-Arrays unterscheiden sich deutlich von Arrays in anderen Sprachen. Obwohl Arrays in ECMAScript ebenfalls geordnete Listen sind, kann jedes Element im Array jede Art von Daten enthalten. Die Größe von ECMAScript-Arrays kann dynamisch angepasst werden.
Es gibt zwei grundlegende Möglichkeiten, ein Array zu erstellen. Die erste besteht darin, den Array-Konstruktor zu verwenden, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

var farben = new Array();

Wenn Sie die Anzahl der im Array zu speichernden Elemente kennen, können Sie auch einen Parameter an den Konstruktor übergeben, und der Parameter wird automatisch zum Wert des Längenattributs, wie folgt:
Code kopieren Der Code lautet wie folgt:

var farben = new Array(20);

Sie können die Elemente, die in das Array aufgenommen werden sollen, auch an den Array-Konstruktor übergeben, wie im folgenden Code gezeigt:
Code kopieren Der Code lautet wie folgt:

var farben = new Array("red","blue");

Darüber hinaus können Sie den neuen Operator auch weglassen, wenn Sie den Array-Konstruktor verwenden, wie unten gezeigt:
Code kopieren Der Code lautet wie folgt:

var farben = Array(20);

Die zweite Möglichkeit, ein Array zu erstellen, besteht in der Verwendung der Array-Literal-Notation. Ein Array-Literal wird durch ein Paar eckiger Klammern dargestellt, die die durch Kommas getrennten Array-Elemente wie folgt enthalten:
Code kopieren Der Code lautet wie folgt:

var color = ["red","blue"];
var-Namen = [];
var-Werte = [1,2,]//IE8 und die vorherigen 3 Elemente, die Verwendung der anderen 2 Elemente wird nicht empfohlen

Wie bei Objekten wird der Konstruktor von Array nicht aufgerufen, wenn eine numerische Literaldarstellung verwendet wird.
Verwenden Sie beim Lesen und Festlegen der Werte eines Arrays eckige Klammern und geben Sie den 0-basierten numerischen Index des entsprechenden Werts wie folgt an:
Code kopieren Der Code lautet wie folgt:

var farben = ["rot","blau"]; //Array definieren
alarm(colors[0]); //red
farben[1] = "schwarz" //Element 2 ändern
farben[2] = "braun" //Drittes
hinzufügen

Die Anzahl der Elemente in einem Array wird in seiner Längeneigenschaft gespeichert, die immer 0 oder eine größere Zahl zurückgibt, wie unten gezeigt:
Code kopieren Der Code lautet wie folgt:

var farben = ["rot","blau"]; //Array definieren
var-Namen=[];
alarm(colors.length); //3
alarm(names.length) //0

Es ist zu beachten, dass der Längenwert des Arrays nicht schreibgeschützt ist. Wenn Sie also diesen Wert festlegen, können Sie Elemente vom Ende des Arrays verschieben oder Elemente zum Array hinzufügen, wie folgt:
Code kopieren Der Code lautet wie folgt:

var farben = ["rot","blau"];
farben.length = 1;
alarm(colors[1]); //undefiniert

Sie können auch das Längenattribut verwenden, um Daten einfach am Ende des Arrays hinzuzufügen:
Code kopieren Der Code lautet wie folgt:

var farben = ["rot","blau"];
farben[colors.length] = "black"; //
an Position 2 hinzufügen farben[colors.length] = "brown"; //
an Position 3 hinzufügen

1. Erkennungsarray

Für eine Webseite oder einen globalen Bereich können Sie den Instanzoperator verwenden:

Code kopieren Der Code lautet wie folgt:

if(Wert Instanz des Arrays){
//Vorgang ausführen
}

Die Einschränkung des Instanzoperators ist der globale Bereich. Wenn die Webseite mehrere Frames enthält, gibt es mehr als zwei globale Ausführungsumgebungen. Um dieses Problem zu lösen, hat ECMAScript5 die Methode Array.isArray() hinzugefügt, die wie folgt verwendet wird:
Code kopieren Der Code lautet wie folgt:

if(Array.isArray(value)){
//Vorgang ausführen
}

2. Konvertierungsmethode
Der Aufruf der toString()-Methode eines Arrays gibt eine durch Kommas getrennte Zeichenfolge zurück, die aus der Zeichenfolgenform jedes Werts im Array verkettet ist. Und der Aufruf von valueOf() gibt immer noch ein Array zurück. Wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

var farben = ['rot', 'blau', 'grün'];
alarm(colors.toString()); //rot,blau,grün
alarm(colors.valueOf()); //rot,blau,grün
Warnung(Farben) //rot,blau,grün

Die von Arrays geerbten Methoden toLocalString(), tiString() und valueOf() geben standardmäßig alle Array-Elemente in Form von durch Kommas getrennten Zeichenfolgen zurück. Und wenn Sie die Methode „join()“ verwenden, können Sie zum Erstellen dieser Zeichenfolge verschiedene Trennzeichen verwenden. Die Methode join() akzeptiert nur einen Parameter, nämlich die Zeichenfolge, die als Trennzeichen verwendet wird, wie unten gezeigt:
Code kopieren Der Code lautet wie folgt:

var farben = ['rot', 'blau', 'grün'];
alarm(colors.join(',')); //rot,blau,grün
alarm(colors.join('|')); //red|blue|green

Wenn der Wert eines Elements im Array null oder nicht definiert ist, wird der Wert in den Rückgabeergebnissen der Methoden join(), toLocalString(), tiString() und valueOf() durch eine leere Zeichenfolge dargestellt.

3. Stapelmethode

Javascript bietet push()- und pop()-Operationen speziell für Arrays, um ein stapelähnliches Verhalten zu erreichen.

Die push()-Methode kann eine beliebige Anzahl von Parametern empfangen, sie einzeln am Ende des Arrays hinzufügen und die Länge des geänderten Arrays zurückgeben. Die Methode pop() überläuft das letzte Element vom Ende des Arrays, verringert die Länge des Arrays und gibt das entfernte Element zurück.

Code kopieren Der Code lautet wie folgt:

var farben = new Array(); //Array definieren
var count = Colors.push("red", "blue"); //Zwei Elemente verschieben
alarm(count); //2
count = farben.push("black"); //Ein anderes Element verschieben
alarm(count); //3
var item = Colors.pop(); //Letztes Element platzen lassen
warning(item); //"black"
alarm(colors.length); //2

4. Warteschlangenmethode

Die Zugriffsregel der Stapeldatenstruktur ist LIFO (Last In First Out), während die Zugriffsregel der Warteschlange FIFO (First In First Out) ist. Die Warteschlange fügt Elemente am Ende der Liste hinzu und entfernt Elemente am Anfang.

Die Methode „shift()“ entfernt das erste Element im Array und gibt das Element mit der Länge 1 des Arrays zurück. Durch die Kombination der Methoden push() und shift() können Arrays wie Warteschlangen verwendet werden, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

var farben = new Array();
var count = farben.push("red", "blue");
count = farben.push("schwarz");
alarm(count);
var item = Colors.shift(); //Das erste Element abrufen
warning(item); //"red"
alarm(color.length); //2

ECMAScript bietet auch die unshift()-Methode für Arrays. Die Methoden unshift() und shift() bewirken das Gegenteil: Sie fügen eine beliebige Anzahl von Elementen am Anfang des Arrays hinzu und geben die Länge des neuen Arrays zurück. Daher können Sie durch die gemeinsame Verwendung der Methoden unshift() und shift() eine Warteschlange in die entgegengesetzte Richtung simulieren, indem Sie neue Elemente am Anfang des Arrays hinzufügen und Elemente am Ende des Arrays entfernen, wie folgt:

Code kopieren Der Code lautet wie folgt:

var farben = new Array();
var count = farben.push("red", "green");
alarm(count); //2
count = farben.unshift("black"); //Ein anderes Element verschieben
alarm(count); //3
var item = Colors.pop(); //Letztes Element abrufen
alarm(item) //grün
alarm(colors.length) //2

5. Neuordnungsmethode
Es gibt bereits zwei Methoden im Array, die direkt zum Umordnen verwendet werden können: reverse() und sort(). Die Methode reverse() kehrt die Reihenfolge der Array-Elemente um.

Code kopieren Der Code lautet wie folgt:

var-Werte = [2, 1, 3, 4, 5];
Werte.reverse();
alarm(values); //5,4,3,2,1

Standardmäßig ordnet die Methode sort() die Array-Elemente in aufsteigender Reihenfolge an, ruft für jedes Element die Methode toString() auf und vergleicht die Zeichenfolgen, um zu bestimmen, wie sortiert werden soll. Auch wenn jedes Element im Array ein numerischer Wert ist, vergleicht die Methode sort() Zeichenfolgen.
Code kopieren Der Code lautet wie folgt:

var-Werte = [12, 11, 3, 4, 5];
Werte.sort();
alarm(values); //12,11,3,4,5

Wir können eine Vergleichsfunktion als Parameter an die Methode sort() übergeben. Wie folgt:
Code kopieren Der Code lautet wie folgt:

Funktion vergleichen(Wert1, Wert2) {
Wenn (Wert1 < Wert2) {
Geben Sie -1 zurück
} else if (value1 > value2) {
         1 zurückgeben
} sonst {
         0 zurückgeben
}
}
var-Werte = [0, 1, 5, 10, 15];
Werte.sort(vergleichen);
Alert(Werte); //0,1,5,10,15

6. Betriebsmethode
ECMAScript bietet viele Methoden zum Bearbeiten von Arrays. Unter anderem kann die Methode concat() ein neues Array basierend auf allen Elementen im aktuellen Array erstellen.

Code kopieren Der Code lautet wie folgt:

var farben = ["rot", "grün", "blau"];
var farben2 = farben.concat("gelb", ["schwarz", "braun"]);
Warnung(Farben); //rot,grün,blau
alarm(colors2); //rot,grün,blau,gelb,schwarz,braun

Die Methode „slice()“ kann ein neues Array basierend auf einem oder mehreren Elementen des aktuellen Arrays erstellen. Sie kann einen oder zwei Parameter empfangen, die die Start- und Endpositionen der zurückzugebenden Elemente darstellen. Wenn ein Argument angegeben wird, werden alle Elemente von der durch das Argument angegebenen Position bis zum Ende des aktuellen Arrays zurückgegeben. Zwei Parameter geben alle Elemente zurück, die an der angegebenen Position beginnen – mit Ausnahme der Elemente an der Endposition. Beachten Sie, dass die Methode slip() keinen Einfluss auf das ursprüngliche Array hat.
Code kopieren Der Code lautet wie folgt:

var farben=["rot", "grün", "blau", "schwarz", "braun"];
var farben2=colors.slice(1);
var farben3=colors.slice(1,4);
warning(colors2); //grün,blau,schwarz,braun
alarm(colors3); //grün,blau,schwarz

Löschen der Slice()-Methode: Sie können eine beliebige Anzahl von Elementen löschen. Geben Sie einfach zwei Parameter an: die Position des ersten zu löschenden Elements und die Anzahl der zu löschenden Elemente.
Einfügen der Slice()-Methode: Sie können eine beliebige Anzahl von Elementen an der angegebenen Position einfügen, indem Sie nur drei Parameter angeben: Startposition, 0 (Anzahl der zu löschenden Elemente) und einzufügende Elemente.
Ersetzen der Slipe()-Methode: Sie können eine beliebige Anzahl von Elementen an der angegebenen Position einfügen und gleichzeitig eine beliebige Anzahl von Elementen löschen. Sie müssen nur 3 Parameter angeben: Startposition, Anzahl der zu löschenden Elemente und eine beliebige Anzahl Anzahl der einzufügenden Elemente.
Code kopieren Der Code lautet wie folgt:

var farben = ["rot", "grün", "blau"];
//
löschen var Removed = Colors.slice(0, 1); //Element 1 entfernen
var farben3 = farben.slice(1, 4);
alarm(colors); //grün,blau
Warnung (entfernt); //rot
//
einfügen entfernt = farben.slice(1, 0, "gelb", "orange"); //
ab Position 1 einfügen alarm(colors); //grün,gelb,orange,blau
Alert(entfernt); //Leeres Array
//Ersetze
Removed = Colors.slice(1, 1,"red","purple"); //
ab Position 1 einfügen alarm(colors); //grün, „rot“, „lila“, orange, blau
alarm(entfernt); //"gelb"

7. Positionsmethode
ECMAScript5 bietet zwei Positionsmethoden für Arrays: indexOf() und lastIndexOf(). Beide Methoden erhalten zwei Parameter: das zu findende Element und einen optionalen Index, der angibt, wo die Suche beginnen soll. Die Methode indexOf() sucht sequentiell vom Anfang des Arrays an, und die Methode lastIndexOf() sucht vorwärts vom Ende des Arrays.
Beide Methoden geben die Position des zu findenden Elements im Array zurück und geben -1 zurück, wenn es nicht gefunden wird.

Code kopieren Der Code lautet wie folgt:

var-Zahlen = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alarm(numbers.indexOf(4)) //3
alarm(numbers.lastIndexOf(4)) //5
alarm(numbers.indexOf(4, 4)) //5
alarm(numbers.lastIndexOf(4, 4)) //3

8. Iterationsmethode

ECMAScript5 definiert 5 Iterationsmethoden für Arrays. Jede Methode akzeptiert zwei Parameter, der erste ist die zu iterierende Funktion und der zweite ist das Bereichsobjekt der Funktion [optional].

Die Iterationsfunktion akzeptiert drei Parameter. Der erste ist der Wert des Elements im zu iterierenden Array, der zweite ist die Position des Elements im zu iterierenden Array und der dritte ist das iterierte Array selbst.

1. every() führt die angegebene Funktion für jedes Element im Array aus. Wenn die Funktion für jedes Element „true“ zurückgibt, gibt sie „true“ zurück
2. filter() führt die angegebene Funktion für jedes Element im Array aus und gibt ein Array von Elementen zurück, für die die Funktion „true“ zurückgibt.     
3. forEach() führt die angegebene Funktion für jedes Element im Array aus. 4. map() führt die angegebene Funktion für jedes Element im Array aus > 5. some() führt die angegebene Funktion für jedes Element im Array aus. Wenn die Funktion für jedes Element true zurückgibt, gibt sie true
zurück Die von diesen Iterationsmethoden unterstützten Browser sind IE9, Firefox2, Safari3, Opera 9.5, Chrome
Unter diesen Methoden sind every() und some() die ähnlichsten, mit denen abgefragt wird, ob die Elemente im Array eine bestimmte Bedingung erfüllen. Bei every() muss die übergebene Funktion für jedes Element „true“ zurückgeben, bevor diese Methode „true“ zurückgibt. Die Methode some() gibt „true“ zurück, solange die übergebene Funktion für ein bestimmtes Element im Array „true“ zurückgibt.

Code kopieren Der Code lautet wie folgt:
var num = [1,2,3,4,5,6,7,8,9];
var everyResult = num.every(function(item, index, array) {
If(item > 2) {
        return true;
}
});
Alert(everyResult); //false
var someResult = num.some(function(item) {
If(item > 2) {
        return true;
}
});
Alert(someResult); //true

Filter() verwendet eine angegebene Funktion, um zu bestimmen, ob ein bestimmtes Element im zurückgegebenen Array enthalten ist.

Code kopieren Der Code lautet wie folgt:

var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
If(item > 2) {
        return true;
}
});
Alert(filterResult); //[3,4,5,4,3]

map() gibt ebenfalls ein Array zurück, und jedes Element in diesem Array ist das Ergebnis der Ausführung der übergebenen Funktion für das entsprechende Element im ursprünglichen Array.

Code kopieren Der Code lautet wie folgt:

var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
If(item > 2) {
        return true;
}
}); //[2,3,6,8,10,8,6,4,2]

forEach() führt die übergebene Funktion für jedes Element im Array aus. Diese Methode hat keinen Rückgabewert und entspricht im Wesentlichen der Verwendung einer for-Schleife zum Durchlaufen eines Arrays.

Code kopieren Der Code lautet wie folgt:

var num = [1,2,3,4,5,4,3,2,1];
num.forEach(function(item) {
//Vorgang ausführen
});

9. Zusammenführungsmethode

Zwei neue Methoden wurden zu ECMAScript5 hinzugefügt: ReduceRight() und Reduce(). Beide Methoden akzeptieren zwei Parameter: Der erste ist eine Funktion zum Durchlaufen des Arrays. Diese Funktion verfügt über vier Parameter: den vorherigen Wert, den aktuellen Wert, den Index des Elements und das Array-Objekt. Allerdings wird jeder Wert dieser Funktion automatisch als erster Parameter an das nächste Element übergeben. Der zweite wird als Anfangswert des ersten Parameters in der ersten Funktion verwendet.

Code kopieren Der Code lautet wie folgt:

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
Rückkehr zum vorherigen Stand;
});
alarm(sum);//15
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage