Explication détaillée du tableau JavaScript (Array)_Connaissances de base

Les tableaux ECMAScript sont assez différents des tableaux des autres langages. Bien que les tableaux dans ECMAScript soient également des listes ordonnées, chaque élément du tableau peut contenir n'importe quel type de données. La taille des tableaux ECMAScript peut être ajustée dynamiquement.
Il existe deux manières de base de créer un tableau. La première consiste à utiliser le constructeur Array, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var couleurs = new Array();

Si vous connaissez le nombre d'éléments à enregistrer dans le tableau, vous pouvez également passer un paramètre au constructeur, et le paramètre deviendra automatiquement la valeur de l'attribut length, comme suit :

Copier le code Le code est le suivant :

var couleurs = new Array(20);

Vous pouvez également transmettre les éléments qui doivent être inclus dans le tableau au constructeur Array, comme indiqué dans le code suivant :

Copier le code Le code est le suivant :

var couleurs = new Array("red","blue");

De plus, vous pouvez également omettre l'opérateur new lorsque vous utilisez le constructeur Array, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var couleurs = Array(20);

La deuxième façon de créer un tableau consiste à utiliser la notation littérale du tableau. Un littéral de tableau est représenté par une paire de crochets contenant les éléments du tableau, séparés par des virgules, comme suit :

Copier le code Le code est le suivant :

var color = ["rouge","bleu"];
noms de var = [];
var valeurs = [1,2,]//IE8 et les 3 éléments précédents, il n'est pas recommandé d'utiliser les 2 autres éléments

Comme les objets, le constructeur d'Array ne sera pas appelé lors de l'utilisation d'une représentation numérique littérale.
Lors de la lecture et de la définition des valeurs d'un tableau, utilisez des crochets et fournissez l'index numérique basé sur 0 de la valeur correspondante, comme suit :

Copier le code Le code est le suivant :

var colours = ["red","blue"]; //Définir le tableau
alerte(couleurs[0]); //rouge
colours[1] = "noir" //Modifier l'élément 2
couleurs[2] = "marron" //Ajouter le 3ème

Le nombre d'éléments dans un tableau est stocké dans sa propriété length, qui renvoie toujours 0 ou un nombre supérieur, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var colours = ["red","blue"]; //Définir le tableau
var noms=[];
alerte(couleurs.longueur); //3
alerte(noms.longueur) //0

Il convient de noter que la valeur de longueur du tableau n'est pas en lecture seule. Ainsi, en définissant cette valeur, vous pouvez déplacer des éléments depuis la fin du tableau ou ajouter des éléments au tableau, comme ceci :

Copier le code Le code est le suivant :

var couleurs = ["rouge","bleu"];
couleurs.longueur = 1;
alerte(couleurs[1]); //non défini

Vous pouvez également utiliser l'attribut length pour ajouter facilement des données à la fin du tableau :

Copier le code Le code est le suivant :

var couleurs = ["rouge","bleu"];
colours[colors.length] = "black"; //Ajouter
à la position 2 colours[colors.length] = "brown"; //Ajouter
à la position 3

1. Réseau de détection

Pour une page web ou une portée globale, vous pouvez utiliser l'opérateur instanceof :

Copier le code Le code est le suivant :

if (valeur instance de tableau) {
//Effectuer l'opération
>

La limitation de l'opérateur instanceof est la portée globale. Si la page Web contient plusieurs cadres, il y aura plus de deux environnements d'exécution globaux. Afin de résoudre ce problème, ECMAScript5 a ajouté la méthode Array.isArray(), qui est utilisée comme suit :

Copier le code Le code est le suivant :

if(Array.isArray(value)){
//Effectuer l'opération
>

2. Méthode de conversion
L'appel de la méthode toString() d'un tableau renverra une chaîne séparée par des virgules concaténée à partir de la forme de chaîne de chaque valeur du tableau. Et appeler valueOf() renvoie toujours un tableau. Comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var couleurs = ['rouge', 'bleu', 'vert'];
alert(colors.toString()); //rouge,bleu,vert
alert(colors.valueOf()); //rouge,bleu,vert
alerte(couleurs) //rouge,bleu,vert

Les méthodes toLocalString(), tiString() et valueOf() héritées par les tableaux renvoient toutes des éléments de tableau sous la forme de chaînes séparées par des virgules par défaut. Et si vous utilisez la méthode join(), vous pouvez utiliser différents délimiteurs pour construire cette chaîne. La méthode join() n'accepte qu'un seul paramètre, qui est la chaîne utilisée comme séparateur, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var couleurs = ['rouge', 'bleu', 'vert'];
alert(colors.join(',')); //rouge,bleu,vert
alert(colors.join('|')); //rouge|bleu|vert

Si la valeur d'un élément du tableau est nulle ou non définie, la valeur sera représentée par une chaîne vide dans les résultats de retour des méthodes join(), toLocalString(), tiString() et valueOf().

3. Méthode de pile

Javascript fournit des opérations push() et pop() spécifiquement pour les tableaux afin d'obtenir un comportement de type pile.

La méthode push() peut recevoir n'importe quel nombre de paramètres, les ajouter un par un à la fin du tableau et renvoyer la longueur du tableau modifié. La méthode pop() déborde du dernier élément à partir de la fin du tableau, décrémente la longueur du tableau et renvoie l'élément supprimé.

Copier le code Le code est le suivant :

var colours = new Array(); //Définir le tableau
var count = colours.push("red", "blue"); //Pousser deux éléments
alerte(compte); //2
count = colours.push("black"); //Pousser un autre élément
alerte(compte); //3
var item = colours.pop(); //Pop le dernier élément
alert(élément); //"noir"
alerte(couleurs.longueur); //2

4. Méthode de file d'attente

La règle d'accès à la structure de données de la pile est LIFO (dernier entré, premier sorti), tandis que la règle d'accès à la file d'attente est FIFO (premier entré, premier sorti). La file d'attente ajoute des éléments à la fin de la liste et supprime des éléments au début.

La méthode shift() supprime le premier élément du tableau et renvoie l'élément, la longueur-1 du tableau. En combinant les méthodes push() et shift(), les tableaux peuvent être utilisés comme des files d'attente, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var couleurs = new Array();
var count = couleurs.push("rouge", "bleu");
count = couleurs.push("noir");
alerte(compte);
var item = colours.shift(); //Obtenir le premier élément
alerte(élément); //"rouge"
alerte(couleur.longueur); //2

ECMAScript fournit également la méthode unshift() pour les tableaux. Les méthodes unshift() et shift() font le contraire : elles ajoutent un nombre arbitraire d'éléments au début du tableau et renvoient la longueur du nouveau tableau. Par conséquent, en utilisant les méthodes unshift() et shift() ensemble, vous pouvez simuler une file d'attente dans la direction opposée, en ajoutant de nouveaux éléments au début du tableau et en supprimant des éléments à la fin du tableau, comme suit :

Copier le code Le code est le suivant :

var couleurs = new Array();
var count = couleurs.push("rouge", "vert");
alerte(compte); //2
count = colours.unshift("black"); //Pousser un autre élément
alerte(compte); //3
var item = colours.pop(); //Obtenir le dernier élément
alerte(élément) //vert
alerte(couleurs.longueur) //2

5. Méthode de réorganisation
Il existe déjà deux méthodes dans le tableau qui peuvent être utilisées directement pour réorganiser : reverse() et sort(). La méthode reverse() inversera l’ordre des éléments du tableau.

Copier le code Le code est le suivant :

valeurs var = [2, 1, 3, 4, 5];
valeurs.reverse();
alerte(valeurs); //5,4,3,2,1

Par défaut, la méthode sort() organise les éléments du tableau par ordre croissant, en appelant la méthode toString() de chaque élément et en comparant les chaînes pour déterminer comment trier. Même si chaque élément du tableau est une valeur numérique, la méthode sort() compare les chaînes.

Copier le code Le code est le suivant :

valeurs var = [12, 11, 3, 4, 5];
valeurs.sort();
alerte(valeurs); //12,11,3,4,5

Nous pouvons passer une fonction de comparaison en paramètre à la méthode sort(). Comme suit :

Copier le code Le code est le suivant :

fonction comparer (valeur1, valeur2) {
Si (valeur1 < valeur2) {
Retour -1
} sinon si (valeur1 > valeur2) {
         retourner 1
} autre {
         renvoyer 0
>
>
valeurs var = [0, 1, 5, 10, 15];
valeurs.sort(comparer);
alerte(valeurs); //0,1,5,10,15

6. Méthode de fonctionnement
ECMAScript fournit de nombreuses méthodes pour opérer sur des tableaux. Parmi eux, la méthode concat() peut créer un nouveau tableau basé sur tous les éléments du tableau actuel.

Copier le code Le code est le suivant :

var couleurs = ["rouge", "vert", "bleu"];
var couleurs2 = couleurs.concat("jaune", ["noir", "marron"]);
alerte(couleurs); //rouge, vert, bleu
alert(colors2); //rouge, vert, bleu, jaune, noir, marron

La méthode slice() peut créer un nouveau tableau basé sur un ou plusieurs éléments du tableau actuel. Elle peut recevoir un ou deux paramètres, qui sont les positions de début et de fin des éléments à renvoyer. Si un argument est donné, renvoie tous les éléments depuis la position spécifiée par l'argument jusqu'à la fin du tableau actuel. Deux paramètres renvoient tous les éléments commençant à la position spécifiée, à l'exclusion des éléments situés à la position finale. Notez que la méthode slip() n’affecte pas le tableau d’origine.

Copier le code Le code est le suivant :

var colours=["rouge","vert","bleu","noir","marron"];
var couleurs2=colors.slice(1);
var couleurs3=colors.slice(1,4);
alert(colors2); //vert,bleu,noir,marron
alert(colors3); //vert,bleu,noir

Suppression de la méthode Slice() : Vous pouvez supprimer n'importe quel nombre d'éléments, il suffit de spécifier 2 paramètres : la position du premier élément à supprimer et le nombre d'éléments à supprimer.
Insertion de la méthode Slice() : Vous pouvez insérer n'importe quel nombre d'éléments à la position spécifiée en fournissant seulement 3 paramètres : position de départ, 0 (nombre d'éléments à supprimer) et éléments à insérer.
Remplacement de la méthode slipe() : vous pouvez insérer n'importe quel nombre d'éléments à la position spécifiée et supprimer n'importe quel nombre d'éléments en même temps. Il vous suffit de spécifier 3 paramètres : la position de départ, le nombre d'éléments à supprimer et n'importe quel nombre. des éléments à insérer.

Copier le code Le code est le suivant :

var couleurs = ["rouge", "vert", "bleu"];
//Supprimer
var supprimé = colours.slice(0, 1); //Supprimer l'élément 1
var couleurs3 = couleurs.slice(1, 4);
alerte(couleurs); //vert,bleu
alerte (supprimé); //rouge
//Insérer
supprimé = colours.slice(1, 0, "jaune", "orange"); //Insérer
à partir de la position 1 alerte(couleurs); //vert,jaune,orange,bleu
alert(supprimé); //Tableau vide
//Remplacer
supprimé = colours.slice(1, 1,"red","purple"); //Insérer
à partir de la position 1 alerte(couleurs); //vert,"rouge",violet",orange,bleu
alerte (supprimé); //"jaune"

7. Méthode de positionnement
ECMAScript5 fournit deux méthodes de position pour les tableaux : indexOf() et lastIndexOf(). Les deux méthodes reçoivent deux paramètres : l'élément à trouver et un index optionnel indiquant où commencer la recherche. La méthode indexOf() recherche séquentiellement à partir du début du tableau et la méthode lastIndexOf() recherche à partir de la fin du tableau.
Les deux méthodes renvoient la position de l'élément à trouver dans le tableau et renvoient -1 s'il n'est pas trouvé.

Copier le code Le code est le suivant :

nombres var = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alerte(numbers.indexOf(4)) //3
alerte(numbers.lastIndexOf(4)) //5
alerte(numbers.indexOf(4, 4)) //5
alerte(numbers.lastIndexOf(4, 4)) //3

8. Méthode d'itération

ECMAScript5 définit 5 méthodes d'itération pour les tableaux. Chaque méthode accepte deux paramètres, le premier est la fonction à itérer et le second est l'objet de portée de la fonction [facultatif].

La fonction d'itération accepte trois paramètres. Le premier est la valeur de l'élément dans le tableau à itérer, le second est la position de l'élément dans le tableau à itérer et le troisième est le tableau itéré lui-même.

1. each() exécute la fonction donnée sur chaque élément du tableau. Si la fonction renvoie true pour chaque élément, elle renvoie true
. 2. filter() exécute la fonction donnée sur chaque élément du tableau et renvoie un tableau d'éléments pour lesquels la fonction renvoie vrai.     
3. forEach() exécute la fonction donnée sur chaque élément du tableau. Cette méthode n'a pas de valeur de retour. 4. map() exécute la fonction donnée sur chaque élément du tableau et renvoie le résultat de chaque appel de fonction. > 5. some() exécute la fonction donnée sur chaque élément du tableau. Si la fonction renvoie true pour un élément, elle renvoie true
. Les navigateurs pris en charge par ces méthodes d'itération sont IE9, Firefox2, Safari3, Opera 9.5, chrome
Parmi ces méthodes, les plus similaires sont each() et some(), toutes deux utilisées pour demander si les éléments du tableau remplissent une certaine condition. Pour each(), la fonction transmise doit renvoyer true pour chaque élément avant que cette méthode ne renvoie true, sinon elle renvoie false ; La méthode some() renvoie true tant que la fonction transmise renvoie true pour un certain élément du tableau.

Copier le code Le code est le suivant :

var num = [1,2,3,4,5,6,7,8,9];
var chaqueResult = num.every(function(item, index, array) {
Si (élément > 2) {
        return true ;
>
});
alert(everyResult); //false
var someResult = num.some (function (item) {
Si (élément > 2) {
        return true ;
>
});
alert(someResult); //true

Filter() utilise une fonction spécifiée pour déterminer si un certain élément est inclus dans le tableau renvoyé.

Copier le code Le code est le suivant :

var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
Si (élément > 2) {
        return true ;
>
});
alerte(filterResult); //[3,4,5,4,3]

map() renvoie également un tableau, et chaque élément de ce tableau est le résultat de l'exécution de la fonction passée sur l'élément correspondant dans le tableau d'origine.

Copier le code Le code est le suivant :

var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
Si (élément > 2) {
        return true ;
>
}); //[2,3,6,8,10,8,6,4,2]

forEach() exécute la fonction transmise sur chaque élément du tableau. Cette méthode n'a pas de valeur de retour et revient essentiellement à utiliser une boucle for pour parcourir un tableau.

Copier le code Le code est le suivant :

var num = [1,2,3,4,5,4,3,2,1];
num.forEach (fonction (élément) {
//Effectuer l'opération
});

9. Méthode de fusion

Deux nouvelles méthodes ont été ajoutées à ECMAScript5 : réduireRight() et réduire(). Les deux méthodes acceptent deux paramètres : la première est une fonction utilisée pour itérer le tableau. Cette fonction a quatre paramètres : la valeur précédente, la valeur actuelle, l'index de l'élément et l'objet tableau. Cependant, toute valeur de cette fonction sera automatiquement transmise à l'élément suivant en tant que premier paramètre. La seconde est utilisée comme valeur initiale du premier paramètre dans la première fonction.

Copier le code Le code est le suivant :

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
Retour cours précédent ;
});
alerte(somme);//15