Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:javascript [24/11/2024 12:36] – [WebSockets] cyrille
+++ informatique:javascript [16/02/2025 10:12] (Version actuelle) – [Vue.js] cyrille
@@ Ligne 25: / Ligne 25: @@
  - JavaScript performance playground: jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
+===== Syntaxe =====
+Il y a plein d'évolutions de la syntaxe ...
+  * https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa
+**Template Literals**:
+<code javascript>
+const name = "Alice";
+const greeting = `Hello, ${name}!
+Welcome to JavaScript tips!`;
+console.log(greeting);
+</code>
+**The Spread Operator**:
+<code javascript>
+const arr1 = [1, 2];
+const arr2 = [3, 4];
+const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
+const user = { name: "Alice", age: 25 };
+const updatedUser = { ...user, age: 26 }; // { name: "Alice", age: 26 }
+</code>
+**Short-Circuit Evaluation**:
+<code javascript>
+const isLoggedIn = true;
+const welcomeMessage = isLoggedIn && "Welcome back!";
+console.log(welcomeMessage); // Output: Welcome back!
+const username = null;
+const displayName = username || "Guest";
+console.log(displayName); // Output: Guest
+</code>
+or **Use ||= Operator for Default Assignment**
+<code javascript>
+let count;
+count ||= 10;
+console.log(count); // 10
+</code>
+**Destructuring**:
+<code javascript>
+// Before destructuring
+const user = { name: "Alice", age: 25 };
+const name = user.name;
+const age = user.age;
+// Using destructuring
+const { name, age } = user;
+console.log(name, age); // Output: Alice 25
+</code>
+**Optional Chaining for Safer Access**:
+<code javascript>
+const user = { profile: { email: "user@example.com" } };
+console.log(user?.profile?.email); // Output: user@example.com
+console.log(user?.settings?.theme); // Output: undefined (no error)
+</code>
+**Default Parameters**:
+<code javascript>
+function greet(name = "Guest") {
+  return `Hello, ${name}!`;
+}
+console.log(greet()); // Output: Hello, Guest!
+console.log(greet("Alice")); // Output: Hello, Alice!
+</code>
+**Array Methods: Map, Filter, and Reduce**:
+<code javascript>
+const numbers = [1, 2, 3, 4];
+// Transform each element with map
+const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]
+// Filter elements based on a condition
+const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
+// Aggregate values with reduce
+const sum = numbers.reduce((acc, num) => acc + num, 0); // 10
+</code>
+More tips:
+  * https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa
+  * https://dev.to/jagroop2001/20-javascript-tricks-every-developer-must-know-4pcj
 ===== Tools =====
@@ Ligne 424: / Ligne 523: @@
 Voir aussi:
+  * UI Suite for Vue.js https://primevue.org compliant with [[/glossaire/WCAG|WCAG 2.0]], 80+ components
   * [[/informatique/php/laravel#vuejs|Laravel & Vue.js]]
   * collection de scripts et plugins : http://www.vuescript.com
@@ Ligne 826: / Ligne 926: @@
 </code>
-Voir [[https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support|Browser Detection and Cross Browser Support]]
+Voir <del>[[https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support|Browser Detection and Cross Browser Support]]</del> MDN Search results for [[https://developer.mozilla.org/en-US/search?q=Browser%20Detection%20and%20Cross%20Browser%20Support|Browser Detection and Cross Browser Support]]
-Et sur la page [[http://www-archive.mozilla.org/docs/web-developer/sniffer/browser_type.html|The Ultimate JavaScript Client Sniffer, Version 3.03]] il est bien écrit que cette méthode est obsolète.
+Et sur la page [[http://www-archive.mozilla.org/docs/web-developer/sniffer/browser_type.html|The Ultimate JavaScript Client Sniffer, Version 3.03]] il est bien écrit que cette **méthode est obsolète**.
 === Détection de la version de javascript ===
@@ Ligne 876: / Ligne 976: @@
     });
 </code>
+=== shallow copy deep copy ===
+Shallow Copy ne copie pas les valeurs références, alors qu'une Deep Coopy créée de nouveaux objets pour les valeurs (autres que scalaires).
+Shallow copy:
+<code javascript>
+// Using the Spread Operator (...):
+const shallowCopy = { ...originalObject };
+// Using Object.assign():
+const shallowCopy = Object.assign({}, originalObject);
+</code>
+Deep copy:
+<code javascript>
+const deepCopy = JSON.parse(JSON.stringify(original));
+</code>
+  * https://dev.to/hkp22/javascript-shallow-copy-vs-deep-copy-examples-and-best-practices-3k0a