Cet exemple résume les techniques de fonctionnement courantes pour les tableaux JavaScript. Partagez-le pour votre référence. Les détails sont les suivants:
Préface
Je crois que tout le monde est habitué à utiliser des opérations liées à la table couramment utilisées dans des bibliothèques de classe telles que jQuery ou sous-traitant, telles que $ .isArray, _.Some, _.find et d'autres méthodes. Voici rien de plus qu'un peu plus d'emballages pour les opérations de tableau JS natives.
Ici, nous résumerons principalement les API communes pour les opérations de tableau JavaScript. Je crois qu'il sera très utile pour tout le monde de résoudre les problèmes du programme.
1. Nature
Un tableau dans JavaScript est un objet spécial, et l'index utilisé pour représenter un décalage est une propriété de l'objet, et l'index peut être un entier. Cependant, ces index numériques sont convertis en interne en type de chaîne, car le nom d'attribut dans l'objet JavaScript doit être une chaîne.
2. Fonctionnement
1 Déterminez le type de tableau
Copiez le code comme suit: var array0 = []; // littéral
var array1 = new Array (); // constructeur
// Remarque: la méthode Array.isArray n'est pas prise en charge sous IE6 / 7/8
alert (array.isArray (array0));
// considérer la compatibilité, peut être utilisé
alerte (instance Array1 de l'arraie);
// ou
alert (object.prototype.tostring.call (array1) === '[Array d'objet]');
2 tableau et chaîne
Très simple: convertir à partir d'un tableau en une chaîne, utilisez la jointure; Convertissez-vous d'une chaîne en un tableau, utilisez Split.
Copiez le code comme suit: // join - Convertir à partir du tableau en chaîne, utilisez la jointure
console.log (['Hello', 'World']. JOIN (',')); // Bonjour le monde
// Split - Convertir à partir de la chaîne en tableau, en utilisant Split
console.log ('Hello World'.split (' ')); // ["Bonjour le monde"]
3 trouver des éléments
Je crois que tout le monde utilise souvent l'index de type de chaîne, mais sait rarement que l'index d'un tableau peut également être utilisé pour trouver des éléments.
Copiez le code comme suit: // index - trouver des éléments
console.log (['ABC', 'BCD', 'CDE']. IndexOf ('BCD')); // 1
//
var objinArray = [
{
Nom: «King»,
passer: '123'
},
{
Nom: «King1»,
Pass: '234'
}
]]
console.log (objinArray.indexof ({
Nom: «King»,
passer: '123'
})); // -1
var elementofArray = objinArray [0];
Console.log (objinArray.Indexof (ElementoFarray)); // 0
À partir de ce qui précède, nous pouvons voir que pour un tableau contenant des objets, la méthode indexof n'obtient pas les résultats de recherche correspondants par comparaison profonde, mais compare uniquement les références aux éléments correspondants.
4 connexions de tableau
Lorsque vous utilisez Concat, sachez qu'un nouveau tableau sera généré après l'utilisation de Concat.
La copie de code est la suivante: var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat (array2); // Après implémentation de la connexion du tableau, un nouveau tableau sera créé
console.log (array3);
5 catégories d'opérations de liste
Pour ajouter des éléments, vous pouvez utiliser respectivement Push and Shift, et pour supprimer les éléments, vous pouvez utiliser respectivement POP et Shift.
Copiez le code comme suit: // push / pop / shift / unsithing
Var Array = [2, 3, 4, 5];
// Ajouter à la fin du tableau
array.push (6);
console.log (array); // [2, 3, 4, 5, 6]
// Ajouter à l'en-tête du tableau
array.unshift (1);
console.log (array); // [1, 2, 3, 4, 5, 6]
// supprimer le dernier élément
var elementofpop = array.pop ();
console.log (elementofpop); // 6
console.log (array); // [1, 2, 3, 4, 5]
// Retirez le premier élément
var elementoFShift = array.shift ();
Console.log (élémentofShift); // 1
console.log (array); // [2, 3, 4, 5]
6 méthode d'épissage
Deux utilisations principales:
① Ajouter et supprimer des éléments du milieu du tableau
② Obtenez un nouveau tableau à partir du tableau d'origine
Bien sûr, les deux utilisations sont synthétisées en un seul gaz. Certains scénarios se concentrent sur l'objectif un, tandis que d'autres se concentrent sur le but de deux.
Ajoutez et supprimez les éléments de la position centrale du tableau. La méthode d'épissage ajoute des éléments au tableau. Les paramètres suivants sont nécessaires.
① Démarrer l'index (c'est-à-dire où vous souhaitez commencer à ajouter des éléments)
② Le nombre d'éléments qui doivent être supprimés ou le nombre d'éléments extraits (le paramètre est défini sur 0 lors de l'ajout d'éléments)
③ Éléments que vous souhaitez ajouter au tableau
La copie de code est la suivante: var nums = [1, 2, 3, 7, 8, 9];
Nums.splice (3, 0, 4, 5, 6);
console.log (num); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// Faire l'opération de suppression ou extraire un nouveau tableau
var newnums = nums.splice (3, 4);
console.log (num); // [1, 2, 3, 8, 9]
console.log (newnums); // [4, 5, 6, 7]
7 trier
La principale introduction aux méthodes inversées et triées. L'inversion du tableau utilise le revers, la méthode de tri peut être utilisée non seulement pour le tri simple, mais aussi pour le tri complexe.
Copiez le code comme suit: / Inversez le tableau
Var Array = [1, 2, 3, 4, 5];
array.reverse ();
console.log (array); // [5, 4, 3, 2, 1]
Nous trie d'abord le tableau d'éléments de cordes
var arrayofNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayofNames.sort ();
console.log (arrayofNames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]
Nous trie des tableaux d'éléments numériques
Copiez le code comme suit: / Si l'élément de tableau est un type numérique, le résultat de tri de la méthode ne sera pas satisfaisant.
var nums = [3, 1, 2, 100, 4, 200];
nums.sort ();
console.log (num); // [1, 100, 2, 200, 3, 4]
La méthode de tri trie les éléments dans l'ordre du dictionnaire, il suppose donc que les éléments sont tous des types de chaînes, donc même si les éléments sont des types numériques, ils sont considérés comme des types de chaînes. À l'heure actuelle, vous pouvez passer une fonction de comparaison de taille lorsque vous appelez la méthode. Lors du tri, la méthode tri () comparera les tailles de deux éléments dans le tableau en fonction de la fonction, déterminant ainsi l'ordre de l'ensemble du tableau.
Copiez le code comme suit: var compare = fonction (num1, num2) {
return num1> num2;
};
num.sort (comparer);
console.log (num); // [1, 2, 3, 4, 100, 200]
var objinArray = [
{
Nom: «King»,
passer: «123»,
Index: 2
},
{
Nom: «King1»,
passer: «234»,
Index: 1
}
]]
// commande ascendante en fonction de l'index des éléments d'objet dans le tableau
var compare = fonction (o1, o2) {
retour o1.index> o2.index;
};
objinArray.sort (comparer);
console.log (objinArray [0] .Index <objinArray [1] .Index); // vrai
8 Méthode itérateur
Comprend principalement ForEach et chaque, certains et cartes, filtre
Je crois que tout le monde peut le faire Forach, et je présenterai principalement les quatre autres méthodes.
Chaque méthode accepte une fonction avec une valeur de retour booléenne, qui est utilisée pour chaque élément du tableau. Si la fonction renvoie true pour tous les éléments, la méthode renvoie true.
La copie de code est la suivante: var nums = [2, 4, 6, 8];
// Méthode Iterator qui ne génère pas de nouveaux tableaux
var iseven = fonction (num) {
retour num% 2 === 0;
};
// Si tous sont même des nombres, renvoyez True
console.log (nums.every (iseven)); // vrai
Une méthode accepte également une fonction avec une valeur de retour booléenne. Tant qu'il y a un élément qui fait que la fonction renvoie True, la méthode renvoie true.
var iseven = fonction (num) {
retour num% 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log (nums1.some (iseven)); // vrai
Les méthodes de carte et de filtre peuvent produire de nouveaux tableaux. Le nouveau tableau renvoyé par MAP est le résultat de l'application d'une fonction à l'élément d'origine. comme:
Copiez le code comme suit: var up = function (grade) {
Grade de retour + = 5;
}
grades var = [72, 65, 81, 92, 85];
var newgrades = grades.ma
La méthode du filtre est très similaire à chaque méthode, passant dans une fonction avec une valeur de retour booléenne. Contrairement à la méthode Every (), lorsque la fonction est appliquée à tous les éléments du tableau et que le résultat est vrai, la méthode ne revient pas vraie, mais renvoie un nouveau tableau qui contient les éléments dont le résultat est vrai après l'application de la fonction.
Copiez le code comme suit: var iseven = fonction (num) {
retour num% 2 === 0;
};
var isoDd = fonction (num) {
retour num% 2! == 0;
};
var nums = [];
pour (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 cotes = nums.filter (iSoDd);
console.log (cotes); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
3. Résumé
Ce qui précède a également le problème que certaines méthodes ne sont pas prises en charge dans les navigateurs de bas niveau, et d'autres méthodes doivent être utilisées pour une implémentation compatible.
Ce sont des méthodes courantes qui peuvent ne pas être faciles à penser à tout le monde. Tout le monde pourrait aussi bien accorder plus d'attention.
J'espère que cet article sera utile à la programmation JavaScript de tous.