Exemple détaillé de la nouvelle méthode Array dans les compétences ECMAScript5_javascript

ECMAScript5 fournit une série de nouvelles interfaces API. La plupart de ces interfaces sont prises en charge dans les nouveaux navigateurs. IE9, Chrome et FirFor le prennent également en charge. Il existe également quelques API qui ne sont pas prises en charge par tous les navigateurs. présente uniquement la plupart des API prises en charge. Grâce à la nouvelle API, nous pouvons concevoir des classes très fiables tout en conservant le style JavaScript d'origine.

Le standard ECMAScript5 a été publié le 3 décembre 2009. Il apporte de nouvelles méthodes pour améliorer les opérations sur les tableaux Array existantes. (noter compatibilité)

Dans ES5, il existe un total de 9 méthodes Array : 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 des méthodes sont répertoriées ci-dessous. Les 5 premières méthodes sont très courantes et utilisées par de nombreux développeurs :

1. indexOf()

La méthode indexOf() renvoie la position du premier élément trouvé dans le tableau, ou -1 s'il n'existe pas.

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. filtre()

La méthode filter() crée un nouveau tableau correspondant aux conditions du filtre.

Lorsque filter() n'est pas utilisé :

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); 

filtre utilisé() :

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

3. pourEach()

forEach exécute la méthode correspondante pour chaque élément et est utilisé pour remplacer la boucle for.

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. carte()

Après que map() ait effectué certaines opérations (mappage) sur chaque élément du tableau, il renverra un nouveau tableau.

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"}
****/ 

Utiliser la méthode 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. réduire()

reduce() peut implémenter la fonction d'un accumulateur, réduisant chaque valeur du tableau (de gauche à droite) à une valeur. Cela peut également être compris comme : laisser les éléments précédents et suivants du tableau effectuer une sorte d'opération et accumuler la valeur finale
 ;

Scénario : comptez le nombre de mots uniques qu'il y a dans un tableau

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} 

Après avoir utilisé réduire() :

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 : fonction utilisée pour tester certains éléments.

thisObject : L'objet est utilisé comme rappel d'exécution.

Détecter si certains éléments du tableau remplissent les conditions

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  : la fonction est utilisée pour tester chaque élément. thisObject : l'objet est utilisé comme rappel d'exécution.

Vérifiez si chaque élément du tableau remplit les conditions ;

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

L'exemple ci-dessus vous présente la nouvelle méthode Array dans ECMAScript5. J'espère qu'il vous sera utile !