JavaScript est un langage essentiel pour le développement Web moderne. Bien que ma?triser les bases soit crucial, comprendre ses concepts de base améliorera vos compétences en codage et vous permettra de relever des défis complexes. Voici 33 concepts que tout développeur JavaScript devrait conna?tre, expliqués avec des exemples.

1. Variables

Les variables sont utilisées pour stocker des données en JavaScript.

let nom = "John";
age const = 30?;
var isActive = true;
**

1. Types de données**

JavaScript a plusieurs types de données, notamment des cha?nes, des nombres, des booléens, des objets et des tableaux.

const Greeting = "Bonjour tout le monde !"; // Cha?ne
nombre constant = 42?; // Numéro
const isAvailable = faux?; // Booléen
const user = { nom?: "John", age?: 30 }?; // Objet
const items = ["Pomme", "Banane", "Cerise"]; // Tableau

3. Fonctions

Les fonctions encapsulent une logique réutilisable.

fonction ajouter(a, b) {
renvoyer un b?;
>
somme const = ajouter(5, 7);
console.log(somme); // Sortie : 12

4. Portée

La portée détermine où les variables sont accessibles.

let globalVar = "Je suis global";
fonction localScope() {
let localVar = "Je suis local";
console.log(globalVar); // Accessible
console.log(localVar); // Accessible
>
localScope();
// console.log(localVar); // Erreur?: localVar n'est pas défini

5. Fermetures

Une fermeture donne accès aux variables d'une fonction externe depuis une fonction interne.

fonction createCounter() {
laissez compter = 0;
fonction de retour () {
compte?;
nombre de retours?;
};
>
const counter = createCounter();
console.log(counter()); // Sortie : 1
console.log(counter()); // Sortie : 2

6. Levage

Les variables et les déclarations de fonctions sont déplacées en haut de leur portée.

console.log(hoistedVar); // Sortie?: non défini
var hoistedVar = "Je suis hissé";
fonction levée(); // Sortie?: Bonjour?!
fonction hisséeFonction() {
console.log("Bonjour!");
>
**

1. Promesses et Async/Await**

La gestion des opérations asynchrones est un concept clé en JavaScript.

// Utiliser les promesses
fetch("https://api.example.com")
.then(response => réponse.json())
.then(data => console.log(data))
.catch(erreur => console.error(erreur));
// Utilisation d'Async/Await
fonction asynchrone fetchData() {
essayez {
const réponse = wait fetch("https://api.example.com");
const data = attendre réponse.json();
console.log(données);
} attraper (erreur) {
console.error(erreur);
>
>
fetchData();

8. Boucle d'événement

La boucle d'événements gère l'exécution de code asynchrone en JavaScript.

console.log("Démarrer");
setTimeout(() => {
console.log("Milieu");
}, 0);
console.log("Fin");
// Sortie?: Début, Fin, Milieu

9. Prototypes

JavaScript utilise des prototypes pour l'héritage.

fonction Personne(nom) {
this.name = nom;
>
Personne.prototype.greet = fonction () {
console.log(Bonjour, je m'appelle ${this.name});
};
const john = new Person("Jean");
john.greet(); // Sortie?: Bonjour, je m'appelle John

10. ce mot clé

La valeur de ceci dépend de la manière dont une fonction est appelée.

const obj = {
nom : "Alice",
saluer() {
console.log(Bonjour, ${this.name});
},
};
obj.greet(); // Sortie?: Bonjour, Alice

11. Déstructuration

Simplifie l'extraction de valeurs à partir de tableaux ou d'objets.

const user = { nom?: "Alice", age?: 25 };
const { nom, age } = utilisateur;
console.log(nom); // Sortie?: Alice
console.log(age); // Sortie?: 25

12. Opérateurs de propagation et de repos

Travailler efficacement avec des tableaux et des objets.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // Propagation
function somme(...nombres) { // Reste
return number.reduce((a, b) => a b, 0);
>
console.log(somme(1, 2, 3, 4)); // Sortie?: 10

1. Modules

Modularisez votre code à l'aide de l'importation et de l'exportation.

// math.js
exporter const add = (a, b) => un b;
// app.js
importer { ajouter } depuis "./math.js";
console.log(ajouter(2, 3)); // Sortie?: 5

14. Gestion des erreurs

Gérez gracieusement les erreurs d'exécution.

essayez {
résultat const = RiskyOperation();
} attraper (erreur) {
console.error("Une erreur s'est produite :", erreur);
>

15. Manipulation du DOM

Interagissez avec le modèle objet de document (DOM).

document.getElementById("btn").addEventListener("click", () => {
document.getElementById("output").textContent = "Clic!";
});

Conclusion

La ma?trise de ces 33 concepts améliorera vos compétences JavaScript et vous préparera à résoudre des problèmes du monde réel. Continuez à vous entra?ner et à explorer pour garder une longueur d'avance dans l'écosystème JavaScript en constante évolution?!

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!