Explication détaillée des tableaux JavaScript et des compétences loops_javascript

Un tableau est une combinaison ordonnée d'éléments. En JavaScript, les tableaux peuvent être créés en utilisant la notation formelle d'objet ou ils peuvent être initialisés en utilisant la notation littérale.

Copier le code Le code est le suivant :

var arrObject = new Array("val1", "val2"); // Tableau en tant qu'objet
var arrLiteral = ["val1", "val2"]; // Littéral de tableau

Pour les développeurs, il n'y a pas de différence : une méthode Array peut être appelée aussi bien sur des littéraux que sur des objets. Pour le moteur JavaScript, un littéral de tableau doit être réinterprété à chaque accès, notamment lorsqu'il est utilisé dans une fonction.

Utilisez l'opérateur new pour créer un nouvel objet Array :

Copier le code Le code est le suivant :

var arrObject = new Array();

Vous pouvez également créer un nouveau tableau avec certaines valeurs :

Copier le code Le code est le suivant :

var arrObject = new Array("val1", "val2");

Les tableaux en JavaScript sont indexés à partir de 0, ce qui signifie que l'index du premier élément est 0 et le dernier élément est la longueur du tableau moins 1.

1. Parcourez le tableau

Problème : Vous souhaitez accéder facilement à tous les éléments d'un tableau.

Solution :

Pour accéder à un tableau, le moyen le plus courant est d'utiliser une boucle for :

Copier le code Le code est le suivant :

Discussion :

La boucle for peut être utilisée pour accéder à chaque élément du tableau. Le tableau commence à 0 et la longueur de la propriété du tableau est utilisée pour définir la fin de la boucle.

2. Stocker et accéder aux valeurs dans l'ordre

Problème : Vous souhaitez stocker les valeurs de manière à ce qu'elles soient accessibles séquentiellement de la même manière qu'elles sont stockées ;

Solution :

Pour stocker et accéder aux valeurs dans l'ordre dans lequel elles sont reçues, créez une file d'attente premier entré, premier sorti (FIFO). Utilisez la méthode push de l'objet JavaScript Array pour ajouter des éléments à la file d'attente et utilisez shift pour obtenir les éléments :

Copier le code Le code est le suivant :

Discussion :

La méthode push Array crée un nouvel élément de tableau et l'ajoute à la fin du tableau :

Copier le code Le code est le suivant :

queue.push("premier");

Chaque fois qu'un élément est poussé, le nombre d'éléments du tableau est incrémenté.
La méthode Array shift extrait un élément du tableau du devant du tableau, le supprime du tableau et renvoie l'élément :

Copier le code Le code est le suivant :

var elem = queue.shift();


Pour chaque élément de l'opération shift, l'élément du tableau sera décrémenté, car shift non seulement renvoie l'élément, mais modifie également le tableau.

3. Stockez et accédez aux valeurs dans l'ordre inverse

Problème : je souhaite stocker les valeurs de manière à accéder aux valeurs dans l'ordre inverse, en accédant d'abord à la valeur stockée la plus récemment, qui est une pile dernier entré, premier sorti (LIFO).

Solution :

Pour stocker les valeurs dans l'ordre inverse, créez une pile LIFO. Utilisez la méthode push de l'objet JavaScript Array pour ajouter des éléments à la pile et la méthode pop pour obtenir des éléments :

Copier le code Le code est le suivant :

Débat :

La pile est également un tableau, où chaque élément nouvellement ajouté se trouve en haut de la pile et est obtenu dans l'ordre dernier entré, premier sorti.

La méthode push Array crée un nouvel élément et l'ajoute à la fin du tableau :

Copier le code Le code est le suivant :

stack.push("premier");

Chaque fois qu'un élément est poussé, le nombre d'éléments du tableau est incrémenté.

La méthode Array pop extrait un élément du tableau de la queue du tableau, le supprime du tableau et renvoie l'élément :

Copier le code Le code est le suivant :

var elem = stack.pop();

Chaque fois qu'un élément est éclaté, le nombre d'éléments du tableau sera décrémenté, car l'éclatement modifie également le tableau.

4. Rechercher dans le tableau

Question : Je souhaite rechercher une valeur spécifique dans un tableau et, si elle est trouvée, obtenir l'index de l'élément du tableau.

Solution :

Utilisez les nouvelles méthodes d'objet Array (ECMAScript 5) indeOf et lastIndexOf :

Copier le code Le code est le suivant :

Bien que les navigateurs prennent parfois en charge à la fois indexOf et lastIndexOf, cela n'est formalisé que dans la version ECMAScript 5. Les deux méthodes acceptent une valeur de recherche, qui est ensuite comparée à chaque élément du tableau. Si la valeur est trouvée, les deux méthodes renvoient un index dans l'élément du tableau. Si aucune valeur n'est trouvée, -1 est renvoyé indexOf renvoie le premier élément trouvé et lastIndexOf renvoie le dernier élément trouvé.

Voir :

Tous les navigateurs ne prennent pas en charge indexOf et lastindexOf. La solution pour cette fonction :

Copier le code Le code est le suivant :

 5、对每个数字元素应用一个函数

　　问题：想要使用一个函数来检查一个数组值，如果满足给定的条件，就替换它。

　　解决方案：

　　使用新的ECMAScript 5 Array对象的forEach方法，来针对每个数组元素都绑定一个回调函数：

复制代码 代码如下 :

讨论：

　　forEach方法接受一个参数，这个参数是个函数。该函数自身有3个参数：数组元素，元素的索引和数组。

　　参见：

　　大数数浏览器都支持forEach。然而，对于那些不支持的浏览器，可以使用Array.prototype属性来模拟forEach行为。

复制代码 代码如下 :

6. Créez un tableau filtré

Question : Je souhaite filtrer les valeurs des éléments d'un tableau et attribuer les résultats à un nouveau tableau.

Solution :

Utilisez la méthode filter de l'objet Array :

Copier le code Le code est le suivant :

Discussion :

La méthode filter est une méthode nouvellement ajoutée dans ECMAScript 5, qui applique une fonction de rappel à chaque élément du tableau. La fonction passée en paramètre à la méthode filter renvoie une valeur booléenne, vraie ou fausse, basée sur le résultat du test de l'élément du tableau. Cette valeur de retour détermine si l'élément du tableau est ajouté à un nouveau tableau. Si la fonction renvoie vrai, il sera ajouté, sinon il ne sera pas ajouté.

Voir :

Pour l'implémentation de simulation de navigateurs ne prenant pas en charge la méthode de filtrage :

Copier le code Le code est le suivant :

7. Vérifier le contenu du tableau

Problème : Vous voulez vous assurer qu'un tableau répond à une certaine condition.

Solution :

Utilisez la méthode each de l'objet Array pour vérifier chaque élément de la condition donnée.

Copier le code Le code est le suivant :

Débat :

Les méthodes each et some de l'objet Array sont toutes deux les dernières méthodes Array ECMAScript 5. La différence est que lors de l'utilisation de la méthode each, tant que la fonction renvoie une valeur fausse, le traitement se terminera et la méthode renvoie false. . La méthode some continuera à tester chaque élément du tableau jusqu'à ce que la fonction de rappel renvoie true. A ce moment, les autres éléments ne sont plus vérifiés et cette méthode renvoie vrai. Si la fonction de rappel teste tous les éléments et ne renvoie vrai à aucun moment, certaines méthodes renvoient faux.

Voir :

Méthode d'implémentation pour les navigateurs qui ne supportent pas tout le monde :

Copier le code Le code est le suivant :