Detailliertes Beispiel der neuen Array-Methode in ECMAScript5_Javascript-Kenntnissen

ECMAScript5 bietet eine Reihe neuer API-Schnittstellen, die in den neuen Browsern IE9, Chrome und FirFor unterstützt werden. Es gibt auch einige APIs, die nicht von allen Browsern unterstützt werden Stellt nur die meisten der unterstützten APIs vor. Mit der neuen API können wir sehr zuverlässige Klassen entwerfen und dabei den ursprünglichen JavaScript-Stil beibehalten.

Der ECMAScript5-Standard wurde am 3. Dezember 2009 veröffentlicht. Er bringt einige neue Methoden mit sich, um bestehende Array-Array-Operationen zu verbessern. (Kompatibilität beachten)

In ES5 gibt es insgesamt 9 Array-Methoden: http://kangax.github.io/compat-table/es5/

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight 

7 der Methoden sind unten aufgeführt. Die ersten 5 Methoden sind sehr verbreitet und werden von vielen Entwicklern verwendet:

1. indexOf()

Die Methode indexOf() gibt die Position des ersten im Array gefundenen Elements zurück oder -1, wenn es nicht existiert.

var arr = ['apple', 'orange', 'pear'],
found = false;
// 未使用
for (var i = 0, l = arr.length; i < l; i++) {
if (arr[i] === 'orange') {
found = true;
}
}
console.log("found:", found); // ==> found: true
// 使用后
console.log("found:", arr.indexOf("orange") != -1); // ==> found: true 

2. filter()

Die Methode filter() erstellt ein neues Array, das den Filterbedingungen entspricht.

Wenn filter() nicht verwendet wird:

var arr=[{"name":"apple", "count": 2},{"name":"orange", "count": 5},{"name":"pear", "count": 3},{"name":"orange", "count": 16},]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].name === "orange") {
newArr.push(arr[i]);
}
}
console.log("Filter results:", newArr); 

verwendeter Filter():

var newArr = arr.filter(function(item) {
return item.name === "orange";
});
console.log("Filter results:", newArr); 

3. forEach()

forEach führt für jedes Element die entsprechende Methode aus und wird verwendet, um die for-Schleife zu ersetzen.

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 使用for循环
for (var i = 0, l = arr.length; i < l; i++) {
console.log(arr[i]);
}
// 使用forEach循环
arr.forEach(function(item, index) {
console.log(item);
}); 

4. Karte()

Nachdem map() für jedes Element des Arrays bestimmte Operationen (Mapping) ausgeführt hat, wird ein neues Array zurückgegeben.

var oldArr = [{first_name: "Colin",last_name: "Toh"}, {first_name: "Addy",last_name: "Osmani"}, {first_name: "Yehuda",last_name: "Katz"}];
function getNewArr() {
var newArr = [];
for (var i = 0; i < oldArr.length; i++) {
var item = oldArr[i];
item.full_name = [item.first_name, item.last_name].join(" ");
newArr[i] = item;
}
return newArr;
}
var personName = getNewArr();
personName.forEach(function(item, index) {
console.log(item);
})
/****输出结果：
Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
****/ 

Verwenden Sie die Methode „map()“:

function getNewArr() {
return oldArr.map(function(item, index) {
item.full_name = [item.first_name, item.last_name].join(" ");
return item;
})
}
var personName = getNewArr();
personName.forEach(function(item, index) {
console.log(item);
})
/****输出结果：
Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
****/ 

5. Reduzieren()

reduce() kann die Funktion eines Akkumulators implementieren und jeden Wert des Arrays (von links nach rechts) auf einen Wert reduzieren. Es kann auch so verstanden werden: Lassen Sie die vorherigen und nachfolgenden Elemente im Array eine Operation ausführen und den Endwert akkumulieren

Szenario: Zählen Sie, wie viele eindeutige Wörter es in einem Array gibt;

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
function getWordCnt() {
var obj = {};
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
obj[item] = (obj[item] + 1) || 1;
}
return obj;
}
console.log(getWordCnt());
// 输出结果：
// Object {apple: 2, orange: 3, pear: 1} 

Nach der Verwendung von Reduce():

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
function getWordCnt() {
return arr.reduce(function(prev, next) {
prev[next] = (prev[next] + 1) || 1;
return prev;
}, {});
}
console.log(getWordCnt());
// 输出结果：
// Object {apple: 2, orange: 3, pear: 1} 

6, array.some(callback[, thisObject]); callback: Funktion zum Testen bestimmter Elemente. thisObject: Das Objekt wird als Ausführungsrückruf verwendet.

Erkennen Sie, ob bestimmte Elemente im Array die Bedingungen erfüllen;

var scores = [45, 60, 70, 65, 95, 85];
var current = 60;
function passed(score) {
return score > current;
}
console.log(scores.some(passed)); // == > true 

7. array.every(callback[, thisObject]);

callback : Funktion wird zum Testen jedes Elements verwendet. thisObject: Das Objekt wird als Ausführungsrückruf verwendet. Überprüfen Sie, ob jedes Element im Array die Bedingungen erfüllt;

Das obige Beispiel stellt Ihnen die neue Array-Methode in ECMAScript5 vor. Ich hoffe, es wird Ihnen hilfreich sein!

var scores = [45, 60, 70, 65, 95, 85];
var current = 60;
function passed(score) {
return score > current;
}
console.log(scores.every(passed)); // == > false