La force des tableaux JavaScript réside dans les méthodes de tableau.
Conversion de tableaux à Cordes
La méthode JavaScript toString() convertit un tableau en une chaîne de (séparées par des virgules) des valeurs de tableau.
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Résultat
Banana,Orange,Apple,Mango
Essayez - le vous - même » Le join() méthode se joint également à tous les éléments du tableau dans une chaîne.
Il se comporte comme toString() , mais en plus , vous pouvez spécifier le séparateur:
Exemple
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Résultat
Banana * Orange * Apple * Mango Essayez - le vous - même » Popping et poussage
Lorsque vous travaillez avec des tableaux, il est facile de supprimer des éléments et ajouter de nouveaux éléments.
Ceci est ce que popping et en poussant est:
Popping articles sur un tableau, ou pousser des éléments dans un tableau.
Popping
La pop() méthode supprime le dernier élément d'un tableau:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
// Removes the last element ("Mango") from fruits Essayez - le vous - même » La pop() méthode renvoie la valeur qui a été "sauté hors":
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =
fruits.pop();
// the value of x is "Mango" Essayez - le vous - même » Pousser
Le push() méthode ajoute un nouvel élément à un tableau (à la fin):
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
// Adds a new element ("Kiwi") to fruits Essayez - le vous - même » Le push() méthode renvoie la nouvelle longueur du tableau:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =
fruits.push("Kiwi");
// the value of x is 5 Essayez - le vous - même » Shifting Elements
Shifting est équivalent à éclater, en travaillant sur le premier élément au lieu de la dernière.
Le shift() méthode supprime le premier élément de tableau et "décalages" tous les autres éléments à un indice inférieur.
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
// Removes the first element "Banana" from fruits
Essayez - le vous - même » Le unshift() méthode ajoute un nouvel élément à un tableau (au début), et "unshifts" éléments anciens:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
// Adds a new element "Lemon" to fruits
Essayez - le vous - même » Le shift() méthode renvoie la chaîne qui était "décalé".
Le unshift() méthode renvoie la nouvelle longueur du tableau.
Modification des éléments
Les éléments du tableau sont accessibles à l' aide de leur numéro d'index:
Les indices de tableau commencent par 0. [0] est le premier élément du tableau, [1] est le deuxième, [2] est le troisième ...
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
// Changes the first element of fruits to "Kiwi" Essayez - le vous - même » La propriété length fournit un moyen facile d'ajouter un nouvel élément à un tableau:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
// Appends "Kiwi" to fruit Essayez - le vous - même » Suppression d'éléments
Puisque les tableaux JavaScript sont des objets, des éléments peuvent être supprimés en utilisant l'opérateur JavaScript delete :
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
// Changes the first element in fruits to undefined Essayez - le vous - même » Utilisation de delete peut laisser des trous non définis dans le tableau. Utilisez pop() ou shift() à la place.
Epissure un tableau
L' splice() méthode peut être utilisée pour ajouter de nouveaux éléments à un tableau:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Essayez - le vous - même » Le premier paramètre (2) définit la position où les nouveaux éléments doivent être ajoutés (épissage in).
Le second paramètre (0) définit le nombre d' éléments doivent être supprimés.
Le reste des paramètres ( "Lemon" , "Kiwi" ) définir les nouveaux éléments à ajouter.
Utilisation de splice() pour supprimer des éléments
Avec paramétrage intelligent, vous pouvez utiliser splice() pour supprimer des éléments sans laisser des «trous» dans le tableau:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
// Removes the first element of fruits
Essayez - le vous - même » Le premier paramètre (0) définit la position où les nouveaux éléments doivent être ajoutés (épissage in).
Le second paramètre (1) définit le nombre d' éléments doit être enlevée.
Le reste des paramètres sont omis. Pas de nouveaux éléments seront ajoutés.
Tri d'un tableau
Le sort() méthode trie un tableau par ordre alphabétique:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
// Sorts the elements of fruits
Essayez - le vous - même » Renverser un tableau
Le reverse() méthode inverse les éléments d'un tableau.
Vous pouvez l'utiliser pour trier un tableau dans l'ordre décroissant:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
// Sorts the elements of fruits
fruits.reverse();
// Reverses the order of the elements Essayez - le vous - même » numérique Trier
Par défaut, le sort() fonction trie les valeurs sous forme de chaînes.
Cela fonctionne bien pour les chaînes ( "Apple" vient avant "Banana" ).
Toutefois, si les numéros sont classés comme des chaînes, "25" est plus grand que "100", parce que "2" est plus grand que "1".
En raison de cela, le sort() méthode produira un résultat incorrect lors du tri des numéros.
Vous pouvez résoudre ce problème en fournissant une fonction de comparaison:
Exemple
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
Essayez - le vous - même » ou
Exemple
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a>b});
Essayez - le vous - même » Utilisez la même astuce pour trier un tableau décroissant:
Exemple
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
Essayez - le vous - même » ou
Exemple
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b>a});
Essayez - le vous - même » La fonction Comparer
Le but de la fonction de comparaison est de définir un ordre de tri alternative.
La fonction de comparaison doit retourner un, zéro, ou la valeur positive négative, selon les arguments:
function(a, b){return a-b}
Lorsque le sort() fonction compare deux valeurs, il envoie les valeurs à la fonction de comparaison, et trie les valeurs en fonction de la (, zéro, positif négatif) valeur retournée.
Exemple:
Lorsque l'on compare 40 et 100, le sort() appelle la méthode comparer la function(40,100) .
La fonction calcule 40-100, et renvoie -60 (une valeur négative).
La fonction de tri trie 40 comme une valeur inférieure à 100.
Trouver la plus haute (ou plus basse) Valeur
Comment trouver la plus grande valeur dans un tableau?
Exemple
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
// now points[0] contains the highest value Essayez - le vous - même » Et le plus bas:
Exemple
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
// now points[0] contains the lowest value Essayez - le vous - même » Rejoindre Arrays
Le concat() méthode crée un nouveau tableau par concaténation deux tableaux:
Exemple
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys);
// Concatenates (joins) myGirls and myBoys
Essayez - le vous - même » La concat() méthode peut prendre un certain nombre d'arguments de tableau:
Exemple
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias","Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
// Concatenates arr1 with arr2 and arr3
Essayez - le vous - même » Slicing un tableau
La slice() méthode tranches un morceau d'un tableau dans un nouveau tableau.
Cet exemple tranches sur une partie d'un tableau à partir de l' élément de tableau 1 ( "Orange" ):
Exemple
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
Essayez - le vous - même » La slice() méthode crée un nouveau tableau. Il ne supprime pas les éléments du tableau source.
Cet exemple tranches sur une partie d'un tableau à partir de l' élément de tableau 3 ( "Apple" ):
Exemple
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
Essayez - le vous - même » La slice() méthode peut prendre deux arguments comme slice(1,3) .
Le procédé sélectionne ensuite des éléments de l'argument de départ, et jusqu'à (mais non compris) l'argument final.
Exemple
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
Essayez - le vous - même » Si l'argument final est omis, comme dans les premiers exemples, la slice() méthode tranches sur le reste du réseau.
Exemple
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
Essayez - le vous - même » Le valueOf() Méthode
Le valueOf() méthode est le comportement par défaut pour un tableau. Il convertit un tableau à une valeur primitive.
JavaScript convertira automatiquement un tableau à une chaîne lorsqu'une valeur primitive est attendue.
De ce fait , tous ces exemples produiront le même résultat:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Essayez - le vous - même » Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.valueOf();
Essayez - le vous - même » Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Essayez - le vous - même » Tous les objets JavaScript ont un valueOf() et un toString() méthode.
Tableau complet de référence
Pour une référence complète, accédez à notre complète JavaScript Tableau de référence .
La référence contient des descriptions et des exemples de toutes les propriétés et méthodes Array.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »