Concept important de javaScript

Voici quelques concepts JavaScript importants et fréquemment utilisés qui sont cruciaux pour le développement quotidien :

1. Variables et constantes

• var, let et const sont utilisés pour déclarer des variables.
• var est limité à une fonction.
• let et const ont une portée de bloc, const étant utilisé pour les constantes (valeurs qui ne changent pas).

let age = 25;
const name = 'John';

2. Types de données

• Types primitifs : nombre, chaîne, booléen, non défini, nul, symbole, BigInt.
• Types de référence : Objet, Tableau, Fonction

const person = { name: 'Alice', age: 30 };  // Object
const numbers = [1, 2, 3, 4];               // Array

3. Fonctions

Déclaration de fonction : Fonctions nommées.
Expression de fonction : Attribuez une fonction à une variable.
Fonctions fléchées : syntaxe plus courte, lie cela lexicalement.

function greet() {
  console.log('Hello!');
}

const sum = (a, b) => a + b;  // Arrow Function

4. Fermetures

• Fonctions qui mémorisent l'environnement dans lequel elles ont été créées.

function outer() {
  let count = 0;
  return function increment() {
    count++;
    return count;
  };
}

const inc = outer();
console.log(inc());  // 1
console.log(inc());  // 2

5. Promesses et asynchrone/attente

• Gestion des opérations asynchrones.
• Promesses : utilisé pour les opérations asynchrones telles que les appels d'API.
• Async/Await : une façon plus propre de gérer les promesses.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data"), 1000);
  });
};

async function getData() {
  const data = await fetchData();
  console.log(data);  // "Data"
}

getData();

6. Déstructuration

• Extraire les valeurs des tableaux ou les propriétés des objets.

const person = { name: 'John', age: 30 };
const { name, age } = person;

const nums = [1, 2, 3];
const [first, second] = nums;

7. Opérateur de propagation et de repos

• Spread (...) : développe un tableau ou un objet.
• Rest (...) : Rassemble les arguments dans un tableau.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];  // [1, 2, 3, 4]

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}

sum(1, 2, 3);  // 6

8. Méthodes de tableau

• forEach : itère sur un tableau.
• map : renvoie un nouveau tableau avec des éléments modifiés.
• filtre : renvoie un nouveau tableau avec des éléments qui remplissent une condition.
• reduce : réduit le tableau à une seule valeur.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);     // [2, 4, 6, 8]
const evens = numbers.filter(n => n % 2 === 0);  // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0);  // 10

9. Objets et prototypes

• Les objets JavaScript sont dynamiques et peuvent avoir des propriétés et des méthodes.
• Prototype : Permet d'ajouter des méthodes aux types d'objets.

const person = { name: 'John', age: 30 };
Object.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

console.log(person.greet());  // "Hello, John"

10. Gestion des événements

• Gestion des événements utilisateur dans le navigateur (par exemple, clics, entrées).

document.querySelector('button').addEventListener('click', function() {
  console.log('Button clicked!');
});

11. Manipulation du DOM

• Accéder et modifier des éléments HTML via JavaScript

const header = document.querySelector('h1');
header.textContent = 'Hello World!';
header.style.color = 'blue';

12. Modules (ES6+)

• Le code JavaScript peut être divisé en modules pour une meilleure maintenabilité

// module.js
export const greet = () => console.log('Hello');

// main.js
import { greet } from './module.js';
greet();  // "Hello"

13. Gestion des erreurs

• Blocs Try/Catch pour gérer les exceptions.

try {
  throw new Error('Something went wrong');
} catch (error) {
  console.error(error.message);
}

14. Littéraux de modèle

• Utilisation de backticks pour les chaînes multilignes et l'intégration d'expressions

const name = 'John';
const greeting = `Hello, ${name}`;

15. Valeurs véridiques et fausses

• Comprendre quelles valeurs sont évaluées comme vraies ou fausses.

if (0) {  // Falsy
  console.log('This won’t run');
}

if (1) {  // Truthy
  console.log('This will run');
}

La maîtrise de ces concepts vous permettra de relever la plupart des défis du développement JavaScript quotidien !

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!