Zusammenfassung gängiger JavaScript-Array-Operationstechniken_Javascript-Techniken

Die Beispiele in diesem Artikel fassen gängige Betriebstechniken für JavaScript-Arrays zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorwort

Ich glaube, dass jeder an gängige Array-bezogene Operationen in jquery oder underscore und anderen Bibliotheken wie $.isArray, _.some, _.find und anderen Methoden gewöhnt ist. Dies ist nichts weiter als eine zusätzliche Verpackung für Array-Operationen in nativem JS.
Hier fassen wir hauptsächlich die häufig verwendeten APIs für JavaScript-Array-Operationen zusammen. Ich glaube, dass es für jeden hilfreich sein wird, Programmprobleme zu lösen.

1. Eigenschaften
Ein Array in JavaScript ist ein spezielles Objekt. Der zur Darstellung des Offsets verwendete Index ist eine Eigenschaft des Objekts und der Index kann eine Ganzzahl sein. Diese numerischen Indizes werden jedoch intern in Zeichenfolgentypen konvertiert, da Eigenschaftsnamen in JavaScript-Objekten Zeichenfolgen sein müssen.

2. Bedienung

1 Array-Typ bestimmen

Code kopieren Der Code lautet wie folgt:

var array0 = []; // Literal
var array1 = new Array(); // Konstruktor
// Hinweis: Die Array.isArray-Methode wird unter IE6/7/8
nicht unterstützt alarm(Array.isArray(array0));
// Unter Berücksichtigung der Kompatibilität können Sie
verwenden Alert(Array1 Instanz des Arrays);
// oder
Alert(Object.prototype.toString.call(array1) === '[object Array]');

2 Arrays und Strings

Ganz einfach: Um von einem Array in einen String zu konvertieren, verwenden Sie „Join“; für die Konvertierung von einem String in ein Array verwenden Sie „Split“.

Code kopieren Der Code lautet wie folgt:

// Join – von Array in String konvertieren, Join verwenden
console.log(['Hallo', 'Welt').join(',')); // Hallo,Welt
// Split – von String in Array konvertieren, Split
verwenden console.log('Hello World'.split(' ')); // ["Hallo", "Welt"]

3 Elemente finden

Ich glaube, dass jeder üblicherweise den String-Typ indexOf verwendet, aber nur wenige wissen, dass der indexOf eines Arrays auch zum Suchen von Elementen verwendet werden kann.

Code kopieren Der Code lautet wie folgt:

// indexOf - Element finden
console.log(['abc', 'bcd', 'cde').indexOf('bcd')); // 1

//
var objInArray = [
{
         Name: 'König',
Pass: '123'
},
{
          Name: 'king1',
Pass: '234'
}
];

console.log(objInArray.indexOf({
Name: 'König',
Pass: '123'
})); // -1

var elementOfArray = objInArray[0];
console.log(objInArray.indexOf(elementOfArray)); // 0

Wie aus dem Obigen ersichtlich ist, erhält die indexOf-Methode für ein Array, das Objekte enthält, das entsprechende Suchergebnis nicht durch einen eingehenden Vergleich, sondern vergleicht nur die Referenzen der entsprechenden Elemente.

4 Array-Verbindung

Verwenden Sie concat. Bitte beachten Sie, dass nach der Verwendung von concat ein neues Array generiert wird.

Code kopieren Der Code lautet wie folgt:

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // Nach der Implementierung der Array-Verkettung wird ein neues Array erstellt
console.log(array3);

5 Arten von Listenoperationen

Zum Hinzufügen von Elementen können Sie „Push“ bzw. „Unshift“ verwenden, und zum Entfernen von Elementen können Sie „Pop“ bzw. „Shift“ verwenden.

Code kopieren Der Code lautet wie folgt:

// push/pop/shift/unshift
var array = [2, 3, 4, 5];

//Am Ende des Arrays hinzufügen
array.push(6);
console.log(array); // [2, 3, 4, 5, 6]

//Zum Kopf des Arrays hinzufügen
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5, 6]

//Letztes Element entfernen
var elementOfPop = array.pop();
console.log(elementOfPop); // 6
console.log(array); // [1, 2, 3, 4, 5]

//Das erste Element entfernen
var elementOfShift = array.shift();
console.log(elementOfShift); // 1
console.log(array); // [2, 3, 4, 5]

6 Spleißmethoden

Zwei Hauptverwendungen:
① Fügen Sie Elemente in der Mitte des Arrays hinzu und löschen Sie sie
② Erhalten Sie ein neues Array aus dem ursprünglichen Array

Natürlich werden die beiden Verwendungen in einem Durchgang kombiniert. Einige Szenen konzentrieren sich auf die erste Verwendung, andere auf die zweite Verwendung.

Elemente aus der Mitte des Arrays hinzufügen und löschen. Die folgenden Parameter müssen angegeben werden ① Startindex (d. h. dort, wo Sie mit dem Hinzufügen von Elementen beginnen möchten)
② Die Anzahl der zu löschenden Elemente oder die Anzahl der zu extrahierenden Elemente (dieser Parameter wird beim Hinzufügen von Elementen auf 0 gesetzt) ​​
③ Elemente, die Sie dem Array
hinzufügen möchten

Code kopieren Der Code lautet wie folgt:

var nums = [1, 2, 3, 7, 8, 9 ];

nums.splice(3, 0, 4, 5, 6);
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// Dann Löschvorgang durchführen oder neues Array extrahieren
var newnums = nums.splice(3, 4);
console.log(nums); // [1, 2, 3, 8, 9]
console.log(newnums); // [4, 5, 6, 7]

7 Sortieren

Es werden hauptsächlich zwei Methoden eingeführt: Umkehren und Sortieren. Die Array-Umkehrung verwendet die Umkehrung, und die Sortiermethode kann nicht nur zum einfachen Sortieren, sondern auch zum komplexen Sortieren verwendet werden.

Code kopieren Der Code lautet wie folgt:

//Das Array umkehren

var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
Wir sortieren zunächst das Array der String-Elemente
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]

Wir sortieren ein Array numerischer Elemente

Code kopieren Der Code lautet wie folgt:

// Wenn die Array-Elemente vom numerischen Typ sind, wird das Sortierergebnis von Die Methode sort() kann nicht sehr zufriedenstellend sein

var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums); // [1, 100, 2, 200, 3, 4]

Die Sortiermethode sortiert die Elemente in lexikografischer Reihenfolge und geht daher davon aus, dass alle Elemente vom Typ „String“ sind. Selbst wenn die Elemente also vom numerischen Typ sind, werden sie als vom Typ „String“ betrachtet. Zu diesem Zeitpunkt können Sie beim Aufrufen der Methode eine Größenvergleichsfunktion übergeben. Beim Sortieren vergleicht die Methode sort() die Größe der beiden Elemente im Array basierend auf dieser Funktion, um die Reihenfolge des gesamten Arrays zu bestimmen.

Code kopieren Der Code lautet wie folgt:

var Compare = function(num1, num2) {

Gibt Nummer1 > zurück };
nums.sort(compare);
console.log(nums); // [1, 2, 3, 4, 100, 200]

var objInArray = [ {

         Name: 'König',
          pass: '123',
Index: 2
},
{
          Name: 'king1',
Pass: '234',
Index: 1
}
];
// Die Objektelemente im Array in aufsteigender Reihenfolge nach Index
sortieren var vergleichen = Funktion(o1, o2) {
Geben Sie o1.index > zurück };
objInArray.sort(compare);
console.log(objInArray[0].index < objInArray[1].index); // true


8 Iterator-Methoden

Beinhaltet hauptsächlich forEach and every, some und map, filter

Ich glaube, dass jeder forEach kennt, und ich werde hauptsächlich die anderen vier Methoden vorstellen.

Die Methode every akzeptiert eine Funktion, die einen booleschen Wert zurückgibt, und wendet die Funktion auf jedes Element im Array an. Diese Methode gibt „true“ zurück, wenn die Funktion für alle Elemente „true“ zurückgibt.

Code kopieren Der Code lautet wie folgt:

var nums = [2, 4, 6, 8];
//Iterator-Methode, die kein neues Array generiert
var isEven = function(num) {
Rückgabenummer % 2 === 0;
};
// Gibt nur true zurück, wenn es sich bei allen um gerade Zahlen handelt
console.log(nums.every(isEven)); // true

Einige Methoden akzeptieren auch eine Funktion, deren Rückgabewert ein boolescher Typ ist. Solange es ein Element gibt, das bewirkt, dass die Funktion „true“ zurückgibt, gibt die Methode „true“ zurück.
var isEven = function(num) {
Rückgabenummer % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)); // true

Beide Methoden „map“ und „filter“ können neue Arrays generieren. Das von „map“ zurückgegebene neue Array ist das Ergebnis der Anwendung einer Funktion auf die ursprünglichen Elemente. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var up = function(grade) {
Rückgabenote = 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma

Die Filtermethode ist der Methode every sehr ähnlich und übergibt eine Funktion, deren Rückgabewert ein boolescher Typ ist. Anders als die Methode every() gibt diese Methode nicht true zurück, wenn die Funktion auf alle Elemente im Array angewendet wird und das Ergebnis wahr ist, sondern ein neues Array, das das Ergebnis der Anwendung der Funktionselemente enthält.

Code kopieren Der Code lautet wie folgt:

var isEven = function(num) {
Rückgabenummer % 2 === 0;
};
var isOdd = function(num) {
Rückgabenummer % 2 !== 0;
};
var nums = [];
für (var i = 0; i < 20; i ) {
nums[i] = i 1;
}
var evens = nums.filter(isEven);
console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
var odds = nums.filter(isOdd);
console.log(odds); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

3. Zusammenfassung

Es besteht auch das Problem, dass einige der oben genannten Methoden von Low-Level-Browsern nicht unterstützt werden und für eine kompatible Implementierung andere Methoden verwendet werden müssen.

Dies sind gängige Methoden, die möglicherweise nicht jedem leicht einfallen. Vielleicht möchten Sie ihm mehr Aufmerksamkeit schenken.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.