Résumé des techniques courantes d'opération de tableau JavaScript_compétences Javascript

Les exemples de cet article résument les techniques de fonctionnement courantes pour les tableaux JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Avant-propos

Je crois que tout le monde est habitué aux opérations courantes liées aux tableaux dans jquery ou underscore et d'autres bibliothèques, telles que $.isArray, _.some, _.find et d'autres méthodes. Ce n'est rien de plus qu'un packaging supplémentaire pour les opérations sur les tableaux en js natif.
Ici, nous résumons principalement les API couramment utilisées pour les opérations sur les tableaux JavaScript. Je pense qu'il sera utile à tout le monde de résoudre les problèmes du programme.

1. Propriétés
Un tableau en JavaScript est un objet spécial. L'index utilisé pour représenter le décalage est une propriété de l'objet, et l'index peut être un entier. Toutefois, ces indices numériques sont convertis en types de chaînes en interne, car les noms de propriétés dans les objets JavaScript doivent être des chaînes.

2. Fonctionnement

1 Déterminer le type de tableau

Copier le code Le code est le suivant :

var array0 = []; var array1 = new Array(); // Constructeur
// Remarque : La méthode Array.isArray n'est pas supportée sous IE6/7/8
alert(Array.isArray(array0));
// Compte tenu de la compatibilité, vous pouvez utiliser
alert(array1 instanceof Array);
// ou
alert(Object.prototype.toString.call(array1) === '[object Array]');

2 tableaux et chaînes

Très simple : pour convertir un tableau en chaîne, utilisez join ; pour convertir une chaîne en tableau, utilisez split.

Copier le code Le code est le suivant :

// join - convertir d'un tableau en chaîne, utiliser join

console.log(['Bonjour', 'Monde'].join(',')); // Bonjour, Monde
// split - convertir une chaîne en tableau, utiliser split
console.log('Bonjour le monde'.split(' ')); // ["Bonjour", "Monde"]

3 Rechercher des éléments

Je crois que tout le monde utilise couramment le type de chaîne indexOf, mais peu de gens savent que l'indexOf d'un tableau peut également être utilisé pour rechercher des éléments.

Copier le code Le code est le suivant :

// indexOf - rechercher un élément

console.log(['abc', 'bcd', 'cde'].indexOf('bcd')); // 1
//

var objInArray = [
{
         nom : 'roi',
Passe : '123'
},
{
          nom : 'roi1',
Passe : '234'
>
];

console.log(objInArray.indexOf({

nom : 'roi',
Passe : '123'
})); // -1

var elementOfArray = objInArray[0];

console.log(objInArray.indexOf(elementOfArray)); // 0

Comme le montre ce qui précède, pour un tableau contenant des objets, la méthode indexOf n'obtient pas le résultat de recherche correspondant par comparaison approfondie, mais compare uniquement les références des éléments correspondants.

Connexion à 4 tableaux

Utilisez concat. Veuillez noter qu'un nouveau tableau sera généré après l'utilisation de concat.

Copier le code Le code est le suivant :

var array1 = [1, 2, 3];

var tableau2 = [4, 5, 6];
var array3 = array1.concat(array2); // Après avoir implémenté la concaténation des tableaux, un nouveau tableau sera créé
console.log(array3);

5 types d'opérations de liste
Pour ajouter des éléments, vous pouvez utiliser respectivement push et unshift, et pour supprimer des éléments, vous pouvez utiliser respectivement pop et shift.

Copier le code Le code est le suivant :

// push/pop/shift/unshift

var tableau = [2, 3, 4, 5];
//Ajouter à la fin du tableau

array.push(6);
console.log(array); // [2, 3, 4, 5, 6]

//Ajouter 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]

//Supprimer le premier élément

var elementOfShift = array.shift();
console.log(elementOfShift); // 1
console.log(array); // [2, 3, 4, 5]

6 méthodes d'épissure

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 combinées en une seule fois. Certaines scènes se concentrent sur la première utilisation, et d'autres se concentrent sur la seconde utilisation.

Ajouter et supprimer des éléments du milieu du tableau. La méthode splice ajoute des éléments au tableau. Les paramètres suivants doivent être fournis
. ① Index de départ (c'est-à-dire l'endroit où vous souhaitez commencer à ajouter des éléments)
② Le nombre d'éléments à supprimer ou le nombre d'éléments à extraire (ce paramètre est mis à 0 lors de l'ajout d'éléments)
③ Éléments que vous souhaitez ajouter au tableau

Copier le code Le code est le suivant :

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]
// Effectuez ensuite l'opération de suppression ou extrayez un nouveau tableau
var newnums = nums.splice(3, 4);
console.log(nums); // [1, 2, 3, 8, 9]
console.log(newnums); // [4, 5, 6, 7]

7 Tri

Introduisez principalement deux méthodes : inverser et trier. L'inversion de tableau utilise l'inversion et la méthode de tri peut être utilisée non seulement pour un tri simple, mais également pour un tri complexe.

Copier le code Le code est le suivant :

//Inverser le tableau
var tableau = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
Nous trions d'abord le tableau d'éléments de chaîne
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]

Nous trions un tableau d'éléments numériques

Copier le code Le code est le suivant :

// Si les éléments du tableau sont de type numérique, le résultat du tri de la méthode sort() ne peut pas être très satisfaisante
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums); // [1, 100, 2, 200, 3, 4]

La méthode sort trie les éléments par ordre lexicographique, elle suppose donc que les éléments sont tous de type chaîne, donc même si les éléments sont de type numérique, ils sont considérés comme étant de type chaîne. À ce stade, vous pouvez transmettre une fonction de comparaison de taille lors de l'appel de la méthode. Lors du tri, la méthode sort() comparera les tailles des deux éléments du tableau en fonction de cette fonction pour déterminer l'ordre de l'ensemble du tableau.

Copier le code Le code est le suivant :

var compare = function(num1, num2) {
Renvoie num1 > num2;
};
nums.sort(comparer);
console.log(nums); // [1, 2, 3, 4, 100, 200]

var objInArray = [
{
         nom : 'roi',
Passe : '123',
indice : 2
},
{
          nom : 'roi1',
Passe : '234',
indice : 1
>
];
// Trie les éléments de l'objet dans le tableau par ordre croissant selon l'index
var comparer = fonction (o1, o2) {
Retourner o1.index > o2.index;
};
objInArray.sort(comparer);
console.log(objInArray[0].index < objInArray[1].index); // true

8 méthodes itératrices

Comprend principalement forEach et each, certains et carte, filtre
Je pense que tout le monde connaît forEach, et je présenterai principalement les quatre autres méthodes.
La méthode each accepte une fonction qui renvoie une valeur booléenne et applique la fonction à chaque élément du tableau. Cette méthode renvoie vrai si la fonction renvoie vrai pour tous les éléments.

Copier le code Le code est le suivant :

var nums = [2, 4, 6, 8];
//Méthode itérateur qui ne génère pas de nouveau tableau
var isEven = fonction (num) {
Renvoie num % 2 === 0;
};
// Renvoie vrai uniquement s'il s'agit de nombres pairs
console.log(nums.every(isEven)); // vrai

Certaines méthodes acceptent également une fonction dont la valeur de retour est de type booléen Tant qu'il existe un élément qui fait que la fonction renvoie vrai, la méthode renvoie vrai.
var isEven = fonction (num) {
Renvoie num % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)); // vrai

Les deux méthodes map et filter peuvent générer de nouveaux tableaux. Le nouveau tableau renvoyé par map est le résultat de l'application d'une fonction aux éléments d'origine. Tel que :

Copier le code Le code est le suivant :

var up = function(grade) {
Note de retour = 5 ;
>
notes var = [72, 65, 81, 92, 85];
var newGrades = grades.ma

La méthode filter est très similaire à la méthode each, passant une fonction dont la valeur de retour est de type booléen. Différent de la méthode Every(), lorsque la fonction est appliquée à tous les éléments du tableau et que le résultat est vrai, cette méthode ne renvoie pas vrai, mais renvoie un nouveau tableau contenant le résultat de l'application des éléments de la fonction.

Copier le code Le code est le suivant :

var isEven = function(num) {
Renvoie num % 2 === 0;
};
var isOdd = fonction (num) {
Renvoie num % 2 !== 0;
};
var nums = [];
pour (var je = 0; je < 20; je ) {
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é

Il existe également le problème que certaines des méthodes ci-dessus ne sont pas prises en charge par les navigateurs de bas niveau et que d'autres méthodes doivent être utilisées pour une implémentation compatible.

Ce sont des méthodes courantes auxquelles tout le monde peut ne pas penser facilement. Vous souhaiterez peut-être y prêter plus d’attention.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.