Un tableau en JavaScript est une structure de données utilisée pour stocker plusieurs valeurs dans une seule variable. Il peut contenir différents types de données et permet un redimensionnement dynamique. Les éléments sont accessibles par leur index, à partir de 0.

Tableau JavaScript

Vous disposez de deux manières de créer des tableaux JavaScript : en utilisant le constructeur Array ou la syntaxe littérale de tableau abrégé , qui n'est que des crochets. Les tableaux sont de taille flexible, ils peuvent donc s'agrandir ou se réduire à mesure que vous ajoutez ou supprimez des éléments.

Table des matières

• Qu’est-ce qu’un tableau en JavaScript ?
• Terminologies de base du tableau JavaScript
• Déclaration d'un tableau
• Opérations de base sur les tableaux JavaScript
• Différence entre les tableaux et les objets JavaScript
• Quand utiliser les tableaux et objets JavaScript ?
• Reconnaître un tableau JavaScript
• Référence complète du tableau JavaScript
• Exemples de tableaux JavaScript
• Aide-mémoire JavaScript

Terminologies de base du tableau JavaScript

• Tableau: Une structure de données en JavaScript qui vous permet de stocker plusieurs valeurs dans une seule variable.
• Élément du tableau : Chaque valeur d'un tableau est appelée un élément. Les éléments sont accessibles par leur index.
• Indice du tableau : Représentation numérique qui indique la position d'un élément dans le tableau. Les tableaux JavaScript sont indexés à zéro, ce qui signifie que le premier élément est à l'index 0.
• Longueur du tableau : Le nombre d'éléments dans un tableau. Il peut être récupéré à l’aide de la propriété length.

Déclaration d'un tableau

Il existe essentiellement deux façons de déclarer un tableau, à savoir Array Literal et Array Constructor.

1. Création d'un tableau à l'aide du tableau littéral

La création d'un tableau à l'aide d'un littéral de tableau implique l'utilisation de crochets [] pour définir et initialiser le tableau. Cette méthode est concise et largement préférée pour sa simplicité.

Syntaxe:

let arrayName = [value1, value2, ...];>

Exemple:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Création d'un tableau à l'aide du constructeur de tableau (nouveau mot-clé JavaScript)

Le constructeur de tableaux fait référence à une méthode de création de tableaux en appelant la fonction constructeur de tableaux. Cette approche permet une initialisation dynamique et peut être utilisée pour créer des tableaux avec une longueur ou des éléments spécifiés.

Syntaxe:

let arrayName = new Array();>

Exemple:

javascript en cliquant sur

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Note: Les deux méthodes ci-dessus font exactement la même chose. Utilisez la méthode littérale de tableau pour plus d’efficacité, de lisibilité et de rapidité.

Opérations de base sur les tableaux JavaScript

1. Accéder aux éléments d'un tableau

N'importe quel élément du tableau est accessible à l'aide du numéro d'index. L'index dans les tableaux commence par 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Accéder au premier élément d'un tableau

L'indexation du tableau commence à 0, nous pouvons donc accéder au premier élément du tableau en utilisant le numéro d'index.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Accéder au dernier élément d'un tableau

Nous pouvons accéder au dernier élément du tableau en utilisant le numéro d'index [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. Modification des éléments du tableau

Les éléments d'un tableau peuvent être modifiés en attribuant une nouvelle valeur à leur index correspondant.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Ajout d'éléments au tableau

Des éléments peuvent être ajoutés au tableau à l'aide de méthodes telles que push() et unshift().

année où l'ordinateur a été inventé

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Suppression d'éléments d'un tableau

Supprimez des éléments à l'aide de méthodes telles que pop(), shift() ou splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Sortir

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Longueur du tableau

Obtenez la longueur d'un tableau à l'aide de la propriété length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Augmenter et diminuer la longueur du tableau

Nous pouvons augmenter et diminuer la longueur du tableau en utilisant la propriété JavaScript length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Itération à travers les éléments du tableau

Nous pouvons parcourir le tableau et accéder aux éléments du tableau en utilisant les boucles for et forEach.

Exemple: C'est un exemple de boucle for.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

Exemple: C'est l'exemple de Tableau.forEach() boucle.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Concaténation de tableaux

Combinez deux tableaux ou plus à l'aide de la méthode concat(). Ir renvoie un nouveau tableau contenant les éléments des tableaux joints.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Conversion d'un tableau en chaîne

Nous avons une méthode intégrée àChaîne() pour convertir un tableau en chaîne.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Vérifiez le type d'un tableau

Le Javascript Type de L’opérateur est utilisé pour vérifier le type d’un tableau. Il renvoie un objet pour les tableaux.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Différence entre les tableaux et les objets JavaScript

• Les tableaux JavaScript utilisent des index comme nombres.
• les objets utilisent des index comme noms.

Quand utiliser les tableaux et objets JavaScript ?

• Les tableaux sont utilisés lorsque nous voulons que les noms d'éléments soient numériques.
• Les objets sont utilisés lorsque nous voulons que les noms d'éléments soient des chaînes.

Reconnaître un tableau JavaScript

Il existe deux méthodes par lesquelles nous pouvons reconnaître un tableau JavaScript :

modifier le fichier Linux

• En utilisant Tableau.isArray() méthode
• En utilisant exemple de méthode

Vous trouverez ci-dessous un exemple montrant les deux approches :

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Note: Une erreur courante survient lors de l'écriture des tableaux :

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

Les deux déclarations ci-dessus ne sont pas identiques.

Sortir: Cette instruction crée un tableau avec un élément [5] .

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

Référence complète du tableau JavaScript

Nous avons une liste complète des tableaux Javascript, pour les vérifier, veuillez consulter ceci Référence de tableau JavaScript article. Il contient une description détaillée et des exemples de toutes les propriétés et méthodes des tableaux.

Exemples de tableaux JavaScript

Les exemples de tableaux JavaScript contiennent une liste de questions principalement posées lors des entretiens. Veuillez consulter cet article Exemples de tableaux JavaScript pour plus de détails.

Aide-mémoire JavaScript

Nous avons une aide-mémoire sur Javascript dans laquelle nous avons couvert tous les sujets importants de Javascript pour les vérifier, veuillez les parcourir Aide-mémoire Javascript - Un guide de base pour JavaScript .