La norme ECMAScript5 a été publiée le 3 décembre 2009 et elle apporte de nouvelles façons d'améliorer les opérations existantes de tableaux de tableaux. Cependant, ces nouvelles méthodes de tableau ne sont pas vraiment devenues populaires car il y avait un manque de navigateurs compatibles ES5 sur le marché à l'époque.
Array "Extras"
Personne ne doute de l'aspect pratique de ces méthodes, mais l'écriture de polyfill (PS: Plugin compatible avec les navigateurs plus âgés) n'en vaut pas la peine. Il transforme "doit implémenter" en "meilleur implémentation". Certaines personnes appellent en fait ces méthodes d'artisanat du tableau des "extras". Pourquoi!
Mais les temps changent. Si vous regardez les projets JS open source populaires sur GitHub, vous verrez que la tendance change. Tout le monde veut réduire de nombreuses dépendances (bibliothèques tierces) et les implémenter avec uniquement du code local.
Ok, commençons.
Mes 5 tableaux
Dans ES5, il existe 9 méthodes de tableau dans le total http://kangax.github.io/compat-table/es5/
Remarque * neuf méthodes
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
Je choisirai 5 méthodes, ce que je pense personnellement être les plus utiles et de nombreux développeurs rencontreront.
1) Indexation
La méthode indexof () renvoie la position du premier élément trouvé dans le tableau, et -1 s'il n'existe pas.
Lorsque l'index n'est pas utilisé
var arr = ['Apple', 'Orange', 'Pear'], Found = false; for (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] === 'orange') {find = true;}} console.log ("Found:", fondé);Après utilisation
var arr = ['Apple', 'Orange', 'Pear']; console.log ("Found:", arr.indexof ("orange")! = -1);2) Filtre
La méthode filtre () crée un nouveau tableau correspondant aux critères du filtre.
Lorsque le filtre () 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, l = arr.length; i <l; i ++) {if (arr [i] .name === "orange") {newarr.push (arr [i]);}} console.log ("Filter Results:", newarr);Utilisez Filter ():
var arr = [{"name": "Apple", "count": 2}, {"name": "orange", "count": 5}, {"name": "pear", "count": 3}, {"name": "orange", "count": 16},]; var newarr = arr.filter (fonction (item) {return item.name === "orange";}); console.log ("Résultats de filtre:", newarr);3) foreach ()
ForEach exécute la méthode correspondante pour chaque élément
var arr = [1,2,3,4,5,6,7,8]; // utilise le "pour" Loop to ItereterFor (var i = 0, l = arr.length; i <l; i ++) {console.log (arr [i]);} console.log ("========================= iteratEarr.ForEach (fonction (item, index) {console.log (item);});foreach est utilisé pour remplacer la boucle pour
4) map ()
Après que MAP () effectue une certaine opération (MAP) sur chaque élément du tableau, un nouveau tableau sera retourné.
N'utilisez pas la carte
var oldarr = [{first_name: "colin", last_name: "toh"}, {premier_name: "addy", last_name: "osmani"}, {premier_name: "yehuda", last_name: "katz"}]; function getNewAr () {var newarr = []; for (var i = 0, l = oldarr.length; i <l; i ++) {var item = oldarr [i]; item.full_name = [item.first_name, item.last_name] .join ("); newarr [i] = item;} return newarr;} console.log (getNewarr ());Après avoir utilisé la carte
var oldarr = [{first_name: "colin", last_name: "toh"}, {premier_name: "addy", last_name: "osmani"}, {premier_name: "yehuda", last_name: "katz"}]; fonction getNewarr () {return oldarr.map (fonction (item, index) {item.full_name = [item.first_name, item.last_name] .join (""); return item;}); } console.log (getNewarr ());Map () est une fonction très pratique lors du traitement des données renvoyées par le serveur.
5) réduire ()
Réduction () peut implémenter la fonction d'un accumulateur, réduisant chaque valeur du tableau (de gauche à droite) à une valeur.
Pour être honnête, il était un peu difficile de comprendre cette phrase au début, c'était trop abstrait.
Scénario: statistiques combien de mots non répatables sont dans un tableau
Lorsque vous n'utilisez pas de réduction
var arr = ["Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; fonction getwordcnt () {var obj = {}; for (var i = 0, l = arr.length; i <l; i ++) {var item = arr [i]; obj [item] = (obj [item] +1) || 1; } return obj;} console.log (getwordcnt ());Après avoir utilisé réduction ()
var arr = ["Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; fonction getwordcnt () {return arr.reduce (function (prev, next) {prev [suivant] = (prev [suivant] + 1) || 1; return Prev;}, {});} console.log (getwordcnt ());Permettez-moi d'expliquer ma propre compréhension de la réduction en premier. Réduire (rappel, initialValue) passera en deux variables. Fonction de rappel (rappel) et InitialValue. Supposons que la fonction a un paramètre entrant, prev et suivant, index et tableau. Vous devez comprendre le prev et ensuite.
D'une manière générale, le PREV commence par le premier élément du tableau, et ensuite est le deuxième élément. Mais lorsque vous passez dans la valeur initiale (InitialValue), le premier PREV sera InitialValue, et le prochain sera le premier élément du tableau.
Par exemple:
/ ** La différence entre les deux, l'exécutez-la dans la console et vous saurez * / var arr = ["Apple", "Orange"]; fonction nopassValue () {return arr.reduce (fonction (prev, suivant) {console.log ("prev:", prev); console.log ("Suivant:", Next); return prov + "" + suivante;}); arr.reduce (fonction (prev, next) {console.log ("prev:", prov); console.log ("next:", next); prev [next] = 1; return prev;}, {});} console.log ("pas de paramètre supplémentaire:", nopassvalue ()); console.log ("---------------"); Console.Log (}} paramètre: ", passvalue ());