tableaux JavaScript sont utilisés pour stocker plusieurs valeurs dans une seule variable.
Affichage des tableaux
Dans ce tutoriel , nous allons utiliser un script pour afficher des tableaux à l' intérieur d' un <p> élément avec id="demo" :
Exemple
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
La première ligne (dans le script) crée un tableau nommé voitures.
La deuxième ligne "trouve" l'élément avec id="demo" et "displays" le tableau dans le "innerHTML" de celui - ci .;
Essayez-le vous-même
Créer un tableau, et attribuer des valeurs à elle:
Les espaces et les sauts de ligne ne sont pas importants. Une déclaration peut couvrir plusieurs lignes:
Ne jamais mettre une virgule après le dernier élément (comme "BMW" ,).
L'effet est incompatible entre les différents navigateurs.
Qu'est-ce qu'un tableau?
Un tableau est une variable spéciale, qui peut contenir plus d'une valeur à la fois.
Si vous avez une liste d'éléments (une liste de noms de voiture, par exemple), le stockage des voitures dans des variables simples pourrait ressembler à ceci:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
Toutefois, si vous voulez faire une boucle à travers les voitures et de trouver une spécifique? Et si vous aviez pas 3 voitures, mais 300?
La solution est un tableau!
Un tableau peut contenir de nombreuses valeurs sous un seul nom, et vous pouvez accéder aux valeurs en faisant référence à un numéro d'index.
Création d'une matrice
L'utilisation d'un tableau littéral est la meilleure façon de créer un tableau JavaScript.
Syntaxe:
var array-name = [ item1 , item2 , ...];
Exemple:
var cars = ["Saab", "Volvo", "BMW"];Utilisation de la nouvelle JavaScript mots-clés
L'exemple suivant crée également un tableau, et attribue des valeurs à elle:
Les deux exemples ci-dessus font exactement les mêmes. Il n'y a pas besoin d'utiliser new Array() .
Par souci de simplicité, la lisibilité et la vitesse d'exécution, utilisez la première (la méthode littérale de tableau).
Accédez aux éléments d'un tableau
Vous faites référence à un élément de tableau en faisant référence aunuméro d'index.
Cette déclaration accède à la valeur du premier élément dans les voitures:
var
name = cars[0];
Cette déclaration modifie le premier élément dans les voitures:
cars[0] = "Opel";
[0] est le premier élément d'un tableau. [1] est le second. Les indices de tableau commencent par 0.
Vous pouvez avoir différents objets dans un tableau
variables JavaScript peuvent être des objets. Les tableaux sont des types particuliers d'objets.
En raison de cela, vous pouvez avoir des variables de types différents dans le même tableau.
Vous pouvez avoir des objets dans un tableau. Vous pouvez avoir des fonctions dans un tableau. Vous pouvez avoir des tableaux dans un tableau:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Les tableaux sont des objets
Les tableaux sont un type particulier d'objets. Le typeof opérateur JavaScript retourne "object" pour les tableaux.
Mais, tableaux JavaScript sont mieux décrits comme des tableaux.
Les tableaux utilisent des numbers pour accéder à ses "elements" . Dans cet exemple, la person[0] renvoie John :
Les objets utilisent des noms pour accéder à ses «membres». Dans cet exemple, person.firstName retourne John :
Propriétés et méthodes tableaux
La véritable force de tableaux JavaScript sont le haut-propriétés et méthodes tableau:
Exemples
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
méthodes de tableau sont couverts dans le chapitre suivant.
La propriété de la longueur
La length la propriété d'un tableau renvoie la longueur d'un tableau (le nombre d'éléments du tableau).
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Essayez - le vous - même » La propriété length est toujours un de plus que l'indice de tableau le plus élevé.
Ajout d'éléments de tableau
La meilleure façon d'ajouter un nouvel élément à un tableau utilise la méthode de poussée:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits Essayez - le vous - même » Nouvel élément peut également être ajouté à un tableau en utilisant la length propriété:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits Essayez - le vous - même » ATTENTION !
Ajout d' éléments avec des indices élevés peuvent créer undefined "holes" dans un tableau:
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits Essayez - le vous - même » Looping éléments de tableau
La meilleure façon de boucle à travers un réseau, est d' utiliser un "for" boucle:
Exemple
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
Essayez - le vous - même » Les tableaux associatifs
De nombreux langages de programmation prennent en charge des tableaux avec des indices nommés.
Les tableaux avec des index nommés sont appelés tableaux associatifs (ou hash).
JavaScript ne supporte pas les tableaux avec des index nommés.
En JavaScript, les tableaux utilisent toujours des indices numérotés.
Exemple
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John" Essayez - le vous - même » ATTENTION !!
Si vous utilisez un index nommé, JavaScript redéfinira le tableau à un objet standard.
Après cela, toutes les méthodes de tableau et les propriétés vont produire des résultats incorrects.
Exemple:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined Essayez - le vous - même » La différence entre les tableaux et les objets
En JavaScript, les tableaux utilisent des index numérotés.
En JavaScript, les objets utilisent les index nommés.
Les tableaux sont un type particulier d'objets, avec des index numérotés.
Quand utiliser des tableaux. Quand utiliser des objets.
- JavaScript ne supporte pas les tableaux associatifs.
- Vous devez utiliser des objets lorsque vous voulez que les noms d'éléments à être des chaînes (texte).
- Vous devez utiliser des tableaux quand vous voulez les noms d'éléments pour être des nombres.
Évitez new Array()
Il n'y a pas besoin d'utiliser intégré constructeur de tableau du JavaScript new Array() .
Utilisez [] à la place.
Ces deux états différents à la fois créer un nouveau tableau vide des points nommés:
var points = new Array();
// Bad
var points = [];
// Good
Ces deux déclarations différentes deux créer un nouveau tableau contenant 6 numéros:
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
Essayez - le vous - même » Le new mot - clé ne fait que compliquer le code. Il peut également produire des résultats inattendus:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)Que faire si je supprime un des éléments?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!! Essayez - le vous - même » Comment reconnaître un tableau
Une question commune est: Comment puis-je savoir si une variable est un tableau?
Le problème est que l'opérateur JavaScript typeof retourne "objet":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object Essayez - le vous - même » Les rendements de l'opérateur typeof objet parce qu'un tableau JavaScript est un objet.
Solution 1:
Pour résoudre ce problème ECMAScript 5 définit une nouvelle méthode Array.isArray() :
Le problème avec cette solution est que ECMAScript 5 ne sont pas pris en charge dans les navigateurs plus anciens.
Solution 2:
Pour résoudre ce problème , vous pouvez créer votre propre isArray() fonction:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
} Essayez - le vous - même » La fonction ci-dessus renvoie toujours vrai si l'argument est un tableau.
Ou plus précisément: il retourne vrai si le prototype d'objet contient le mot "Array".
Solution 3:
Le instanceof renvoie true si un objet est créé par un constructeur donné:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »