Explorer des tableaux et des objets en JavaScript

Jour 6 : Explorer les tableaux et les objets en JavaScript

Date : 13 décembre 2024

Bienvenue au jour 6 de votre parcours JavaScript ! Aujourd'hui, nous nous penchons sur deux structures de données essentielles en JavaScript : les Tableaux et les Objets. Ces structures constituent l’épine dorsale de la manipulation des données dans le développement Web moderne. En maîtrisant les tableaux et les objets, vous débloquerez des moyens puissants pour stocker, accéder et transformer efficacement les données.

---

1. Que sont les tableaux ?

Un tableau est une collection d'éléments (appelés éléments) stockés à des emplacements de mémoire contigus. En JavaScript, les tableaux sont polyvalents et peuvent contenir des types de données mixtes.

Création de tableaux

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

2. Manipulation des tableaux

Ajout et suppression d'éléments

• push : Ajoutez des éléments à la fin.
• pop : Supprime le dernier élément.
• unshift : ajoute des éléments au début.
• shift : Supprime le premier élément.

Exemple :

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

---

3. Méthodes de tableau courantes

map : Transforme chaque élément d'un tableau.

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

filtre : filtre les éléments en fonction d'une condition.

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

reduce : réduit le tableau à une seule valeur.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

---

4. Que sont les objets ?

Un objet est une collection de propriétés, où chaque propriété est une paire clé-valeur. Les objets sont parfaits pour représenter des entités du monde réel avec des attributs.

Créer des objets

let person = {
  name: "Arjun",
  age: 22,
  isStudent: true,
};
console.log(person.name); // Output: Arjun
console.log(person["age"]); // Output: 22

---

5. Manipuler des objets

Ajout et mise à jour de propriétés

let car = {
  brand: "Tesla",
};
car.model = "Model 3"; // Adding a new property
car.brand = "Ford";    // Updating a property
console.log(car); // Output: { brand: "Ford", model: "Model 3" }

Suppression de propriétés

delete car.model;
console.log(car); // Output: { brand: "Ford" }

---

6. Méthodes d'objet courantes

Itérer sur des objets

• Object.keys : renvoie un tableau de clés.
• Object.values : renvoie un tableau de valeurs.
• Object.entries : renvoie un tableau de paires clé-valeur.

Exemple :

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

7. Tableaux et objets

Fonctionnalité Tableaux Objets ête>

Feature	Arrays	Objects
Storage	Ordered collection of items.	Unordered collection of key-value pairs.
Access	Index-based (arr[0]).	Key-based (obj.key).
Best Use Case	List of related items.	Grouping attributes of an entity.

Stockage Collection ordonnée d'éléments. Collection non ordonnée de paires clé-valeur.

---

Accès

Basé sur un index (arr[0]). Basé sur une clé (obj.key). Meilleur cas d'utilisation Liste des éléments associés. Regroupement des attributs d'une entité.

8. Exemples concrets

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

Exemple 1 : Liste de tâches utilisant des tableaux

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

Exemple 2 : Représenter une personne à l'aide d'objets

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

---

Exemple 3 : Combiner des tableaux et des objets

• 9. Points clés à retenir
• Tableaux
 : à utiliser pour les collections ordonnées ; exploitez des méthodes telles que mapper, filtrer et réduire pour des transformations puissantes.
• Objets
 : à utiliser pour les données structurées avec des paires clé-valeur ; méthodes principales comme Object.keys et Object.values.

---

Puissance combinée : mélangez des tableaux et des objets pour modéliser et manipuler des données complexes.

Entraînement du jour 6
Créez un tableau de vos films préférés et ajoutez/supprimez des éléments de manière dynamique.

---

Créez un objet pour représenter un livre avec des propriétés telles que le titre, l'auteur et l'année. Ajoutez une méthode pour enregistrer les détails du livre.

Utilisez la carte et filtrez sur un tableau de nombres pour obtenir les carrés des nombres pairs.

Prochaines étapes

Au cours du

Jour 7, nous nous concentrerons sur les Événements et le DOM, pour apporter de l'interactivité à vos applications Web. À demain !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!