Dans ce didacticiel, vous découvrirez le tableau JavaScript à l'aide d'exemples.
Comme vous le savez, une variable peut stocker un seul élément. Si vous devez stocker plusieurs éléments à la fois, vous pouvez utiliser un tableau.
Un tableau est un objet qui peut stocker plusieurs éléments . Par exemple,
const myArray = ('hello', 'world', 'welcome');
Créer un tableau
Vous pouvez créer un tableau de deux manières:
1. Utilisation d'un littéral de tableau
Le moyen le plus simple de créer un tableau consiste à utiliser un littéral de tableau (). Par exemple,
const array1 = ("eat", "sleep");
2. Utilisation du nouveau mot-clé
Vous pouvez également créer un tableau à l'aide du newmot - clé JavaScript .
const array2 = new Array("eat", "sleep");
Dans les deux exemples ci-dessus, nous avons créé un tableau comportant deux éléments.
Remarque : il est recommandé d'utiliser un littéral de tableau pour créer un tableau.
Voici d'autres exemples de tableaux:
// empty array const myList = ( ); // array containing number values const numberArray = ( 2, 4, 6, 8); // array containing string values const stringArray = ( 'eat', 'work', 'sleep'); // multiple data types array const newData = ('work', 'exercise', 1, true);
Vous pouvez également stocker des tableaux, des fonctions et d'autres objets dans un tableau. Par exemple,
const newData = ( ('task1': 'exercise'), (1, 2 ,3), function hello() ( console.log('hello')) );
Accéder aux éléments d'un tableau
Vous pouvez accéder aux éléments à l'intérieur d'un tableau à l'aide d'indices (0, 1, 2…) . Par exemple,
const myArray = ('h', 'e', 'l', 'l', 'o'); // first element console.log(myArray(0)); // "h" // second element console.log(myArray(1)); // "e" 
Indexation des tableaux en JavaScript
Remarque : l'index de Array commence par 0 et non par 1.
Ajouter un élément à un tableau
Vous pouvez utiliser la méthode intégrée push()et unshift()ajouter un élément à un tableau.
La push()méthode ajoute un élément à la fin d'un tableau et renvoie la longueur d'un nouveau tableau. Par exemple,
let dailyActivities = ('eat', 'sleep'); // add an element at the end of the array dailyActivities.push('exercise'); console.log(dailyActivities); // ('eat', 'sleep', 'exercise')
La unshift()méthode ajoute un nouvel élément au début d'un tableau et renvoie la nouvelle longueur d'un tableau. Par exemple,
let dailyActivities = ('eat', 'sleep'); //add an element at the end of the array dailyActivities.unshift('work'); console.log(dailyActivities); // ('work', 'eat', 'sleep', 'exercise'')
Modifier les éléments d'un tableau
Vous pouvez également ajouter des éléments ou modifier les éléments en accédant à la valeur d'index.
let dailyActivities = ( 'eat', 'sleep'); // this will add the new element 'exercise' at the 2 index dailyActivities(2) = 'exercise'; console.log(dailyActivities); // ('eat', 'sleep', 'exercise')
Supposons qu'un tableau comporte deux éléments. Si vous essayez d'ajouter un élément à l'index 3 (quatrième élément), le troisième élément ne sera pas défini. Par exemple,
let dailyActivities = ( 'eat', 'sleep'); // this will add the new element 'exercise' at the 3 index dailyActivities(3) = 'exercise'; console.log(dailyActivities); // ("eat", "sleep", undefined, "exercise")
Fondamentalement, si vous essayez d'ajouter des éléments à des indices élevés, les indices intermédiaires auront une valeur indéfinie.
Supprimer un élément d'un tableau
Vous pouvez utiliser la pop()méthode pour supprimer le dernier élément d'un tableau. La pop()méthode renvoie également la valeur renvoyée. Par exemple,
let dailyActivities = ('work', 'eat', 'sleep', 'exercise'); // remove the last element dailyActivities.pop(); console.log(dailyActivities); // ('work', 'eat', 'sleep') // remove the last element from ('work', 'eat', 'sleep') const removedElement = dailyActivities.pop(); //get removed element console.log(removedElement); // 'sleep' console.log(dailyActivities); // ('work', 'eat')
Si vous devez supprimer le premier élément, vous pouvez utiliser la shift()méthode. La shift()méthode supprime le premier élément et renvoie également l'élément supprimé. Par exemple,
let dailyActivities = ('work', 'eat', 'sleep'); // remove the first element dailyActivities.shift(); console.log(dailyActivities); // ('eat', 'sleep')
Longueur du tableau
Vous pouvez trouver la longueur d'un élément (le nombre d'éléments dans un tableau) à l'aide de la lengthpropriété. Par exemple,
const dailyActivities = ( 'eat', 'sleep'); // this gives the total number of elements in an array console.log(dailyActivities.length); // 2
Méthodes de tableau
En JavaScript, il existe différentes méthodes de tableau disponibles qui facilitent l'exécution de calculs utiles.
Certaines des méthodes de tableau JavaScript couramment utilisées sont:
| Méthode | La description |
|---|---|
| concat () | joint deux tableaux ou plus et renvoie un résultat |
| Indice de() | recherche un élément d'un tableau et renvoie sa position |
| trouver() | renvoie la première valeur d'un élément de tableau qui passe un test |
| findIndex () | renvoie le premier index d'un élément de tableau qui passe un test |
| pour chaque() | appelle une fonction pour chaque élément |
| comprend () | vérifie si un tableau contient un élément spécifié |
| poussez() | ajoute un nouvel élément à la fin d'un tableau et renvoie la nouvelle longueur d'un tableau |
| décaler () | adds a new element to the beginning of an array and returns the new length of an array |
| pop() | removes the last element of an array and returns the removed element |
| shift() | removes the first element of an array and returns the removed element |
| sort() | sorts the elements alphabetically in strings and in ascending order |
| slice() | selects the part of an array and returns the new array |
| splice() | removes or replaces existing elements and/or adds new elements |
Example: JavaScript Array Methods
let dailyActivities = ('sleep', 'work', 'exercise') let newRoutine = ('eat'); // sorting elements in the alphabetical order dailyActivities.sort(); console.log(dailyActivities); // ('exercise', 'sleep', 'work') //finding the index position of string const position = dailyActivities.indexOf('work'); console.log(position); // 2 // slicing the array elements const newDailyActivities = dailyActivities.slice(1); console.log(newDailyActivities); // ( 'sleep', 'work') // concatenating two arrays const routine = dailyActivities.concat(newRoutine); console.log(routine); // ("exercise", "sleep", "work", "eat")
Note: If the element is not in an array, indexOf() gives -1.
Visit JavaScript Array Methods to learn more.
Working of JavaScript Arrays
In JavaScript, an array is an object. And, the indices of arrays are objects keys.
Les tableaux étant des objets, les éléments du tableau sont stockés par référence. Par conséquent, lorsqu'une valeur de tableau est copiée, tout changement dans le tableau copié sera également reflété dans le tableau d'origine. Par exemple,
let arr = ('h', 'e'); let arr1 = arr; arr1.push('l'); console.log(arr); // ("h", "e", "l") console.log(arr1); // ("h", "e", "l")
Vous pouvez également stocker des valeurs en passant une clé nommée dans un tableau. Par exemple,
let arr = ('h', 'e'); arr.name = 'John'; console.log(arr); // ("h", "e") console.log(arr.name); // "John" console.log(arr('name')); // "John" 
Indexation des tableaux en JavaScript
Cependant, il n'est pas recommandé de stocker des valeurs en passant des noms arbitraires dans un tableau.
Par conséquent, en JavaScript, vous devez utiliser un tableau si les valeurs sont dans une collection ordonnée. Sinon, il est préférable d'utiliser un objet avec ( ).
Articles recommandés
- JavaScript pour chaque
- JavaScript pour… sur
- Tableau multidimensionnel JavaScript
