Gängige Betriebstechniken für JavaScript-Arrays

Vorwort

Ich glaube, dass jeder an die häufig verwendeten Array-bezogenen Operationen in jquery oder underscore und anderen Klassenbibliotheken 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 gängige 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. Vorgang

1 Bestimmen Sie den Array-Typ

var array0 = [];    // 字面量
var array1 = new Array();   // 构造器
// 注意：在IE6/7/8下是不支持Array.isArray方法的
alert(Array.isArray(array0));
// 考虑兼容性，可使用
alert(array1 instanceof Array);
// 或者
alert(Object.prototype.toString.call(array1) === '[object Array]');

2 Array und String

Es ist ganz einfach: Von Array in konvertieren Für Zeichenketten verwenden Sie „Join“; für die Konvertierung von Zeichenketten in Arrays verwenden Sie „Split“.

// join - 由数组转换为字符串，使用join
console.log(['Hello', 'World'].join(','));    // Hello,World
// split - 由字符串转换为数组，使用split
console.log('Hello World'.split(' '));    // ["Hello", "World"]

3 Elemente suchen

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

// indexOf - 查找元素
console.log(['abc', 'bcd', 'cde'].indexOf('bcd'));  // 1
// 
var objInArray = [
    {
        name: 'king',
        pass: '123'
    },
    {
        name: 'king1',
        pass: '234'
    }
];
console.log(objInArray.indexOf({
    name: 'king',
    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 das Array, das Objekte enthält, das entsprechende Suchergebnis nicht durch einen eingehenden Vergleich, sondern vergleicht nur die entsprechenden Referenzen Elemente.

4 Array-Verbindung

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

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 实现数组连接之后，会创建出新的数组
console.log(array3);

5 Listenähnliche Operationen

werden zum Hinzufügen von Elementen verwendet, Push und Unshift können jeweils verwendet werden und Pop kann verwendet werden Wird zum Entfernen und Verschieben von Elementen verwendet.

// push/pop/shift/unshift
var array = [2, 3, 4, 5];
// 添加到数组尾部
array.push(6);
console.log(array); // [2, 3, 4, 5, 6]
// 添加到数组头部
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5, 6]
// 移除最后一个元素
var elementOfPop = array.pop();
console.log(elementOfPop);   // 6
console.log(array); // [1, 2, 3, 4, 5]
// 移除第一个元素
var elementOfShift = array.shift();
console.log(elementOfShift);   // 1
console.log(array); // [2, 3, 4, 5]

6-Splice-Methode

hat zwei Hauptverwendungen:
① Elemente in der Mitte des Arrays hinzufügen und löschen
② Ein Element aus dem Original abrufen Array Neues Array

Natürlich werden die beiden Verwendungen in einem Rutsch 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. Sie müssen die folgenden Parameter angeben:
① Startindex (d. h., 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) ​​
③ Dem Array hinzuzufügende Elemente

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] 
// 紧接着做删除操作或者提取新的数组
var newnums = nums.splice(3, 4);
console.log(nums);  // [1, 2, 3, 8, 9]
console.log(newnums);   // [4, 5, 6, 7]

7 Sortieren

Stellt hauptsächlich die Umkehr- und Sortiermethoden vor. Die Array-Umkehrung verwendet die Umkehrung, und die Sortiermethode kann nicht nur zum einfachen Sortieren, sondern auch zum komplexen Sortieren verwendet werden.

// 反转数组
var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
我们先对字符串元素的数组进行排序
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames);  // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]

Wir sortieren das Array numerischer Elemente

// 如果数组元素时数字类型，sort()方法的排序结果就不能让人满意了
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 Wörterbuchreihenfolge, sodass davon ausgegangen wird, dass die Elemente alle vom Typ Zeichenfolge sind. Selbst wenn das Element also einen numerischen Typ hat, wird es als String-Typ 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.

var compare = function(num1, num2) {
    return num1 > num2;
};
nums.sort(compare);
console.log(nums);  // [1, 2, 3, 4, 100, 200]
var objInArray = [
    {
        name: 'king',
        pass: '123',
        index: 2
    },
    {
        name: 'king1',
        pass: '234',
        index: 1
    }
];
// 对数组中的对象元素，根据index进行升序
var compare = function(o1, o2) {
    return o1.index > o2.index;
};
objInArray.sort(compare);
console.log(objInArray[0].index < objInArray[1].index); // true

8 Iterator-Methoden

umfassen hauptsächlich forEach and every, some und map, filter
forEach. Lassen Sie uns hauptsächlich die anderen vier Methoden vorstellen.
Die Methode every akzeptiert eine Funktion, deren Rückgabewert ein boolescher Typ ist, und verwendet diese Funktion für jedes Element im Array. Diese Methode gibt „true“ zurück, wenn die Funktion für alle Elemente „true“ zurückgibt.

var nums = [2, 4, 6, 8];
// 不生成新数组的迭代器方法
var isEven = function(num) {
    return num % 2 === 0;
};
// 如果都是偶数，才返回true
console.log(nums.every(isEven)); // true
some方法也接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true。
var isEven = function(num) {
    return num % 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 bestimmten Funktion auf die ursprünglichen Elemente. Beispiel:

var up = function(grade) {
    return grade += 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.

var isEven = function(num) {
    return num % 2 === 0;
};
var isOdd = function(num) {
    return num % 2 !== 0;
};
var nums = [];
for (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 gibt immer noch Probleme mit den oben genannten Methoden, die von Low-Level-Browsern nicht unterstützt werden, und für eine kompatible Implementierung müssen andere Methoden verwendet werden.

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

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