Préface
Dans cette ère numérique en évolution rapide, JavaScript, en tant que langage de programmation largement utilisé, est devenu de plus en plus important. Afin de rester compétitif dans le monde hautement compétitif du développement, il est crucial d’améliorer continuellement vos compétences. L'éditeur de cet article vous présentera 10 compétences JavaScript avancées, visant à aider les développeurs à être plus efficaces et plus flexibles dans le processus de codage.
1. Mission de déstructuration
L'affectation de déstructuration est un moyen concis d'extraire une valeur d'un tableau ou d'un objet et de l'attribuer à une variable, simplifiant ainsi le code et améliorant la lisibilité. Pour les tableaux, vous pouvez utiliser des crochets et pour les objets, vous pouvez utiliser des accolades.
// 解构数组
const [firstItem, secondItem, ...rest] = [1, 2, 3, 4, 5];
// 解构对象
const { name, age, ...details } = { name: 'John', age: 30, occupation: 'Developer' };
2. Développez la grammaire
Vous pouvez utiliser la syntaxe d'expansion pour développer les éléments d'un tableau ou les propriétés d'un objet dans un autre tableau ou objet. Ceci est utile pour faire des copies, fusionner des objets et transmettre plusieurs arguments aux fonctions. La syntaxe d'expansion ressemble à trois points... et peut être utilisée des manières suivantes :
// 复制数组
const originalArray = [1, 2, 3];
const newArray = [...originalArray];
// 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };
3. Curry
Le currying est une technique de programmation fonctionnelle qui transforme une fonction acceptant plusieurs paramètres en une séquence de fonctions n'acceptant qu'un seul paramètre. Cela permet une meilleure réutilisation et composition du code.
Exemple 1:
const multiply = (a) => (b) => a * b;
const multiplyByTwo = multiply(2);
const result = multiplyByTwo(5); // 输出: 10
Exemple 2 :
// 一个普通的三元函数
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2, 3)); // 6
// 使用柯里化转换后的函数
function curriedAdd(a) {
return function(b) {
return function(c) {
return a + b + c;
};
};
}
console.log(curriedAdd(1)(2)(3)); // 6
4. Cacher
La mise en cache est une technique utilisée pour stocker les résultats d’appels de fonctions coûteux et éviter les recalculs inutiles. Cela peut ralentir considérablement les performances des fonctions récursives ou consommables à long terme.
const memoizedFibonacci = (function () {
const cache = {};
return function fib(n) {
if (n in cache) return cache[n];
if (n <= 1) return n;
cache[n] = fib(n - 1) + fib(n - 2);
return cache[n];
};
})();
5. Promesse et Async/Attendre
Les promesses et Async/Await sont parfaits pour gérer les opérations asynchrones avec élégance et rendre le code plus lisible. Ils aident à éviter l'enfer des rappels et à améliorer la gestion des erreurs.
// 使用 Promises
function fetchData() {
return new Promise((resolve, reject) => {
// 异步操作，例如从API获取数据
// 在操作结果的基础上 resolve(data) 或 reject(error)
});
}
// 使用 Async/Await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}
6. Clôture
La fermeture est un concept courant en programmation qui fait référence à la capacité d'une fonction à accéder et à exploiter des variables dans son environnement lexical, même si son environnement lexical n'existe plus lorsque la fonction est appelée.
function createCounter() {
let count = 0;
return function () {
return ++count;
};
}
const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
7. Combinaison de fonctions
La composition des fonctions est le processus de combinaison de deux ou plusieurs fonctions en une nouvelle fonction. Cela facilite la réutilisation du code.
const add = (x) => x + 1;
const multiplyByTwo = (x) => x * 2;
const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const addAndMultiply = compose(multiplyByTwo, add);
console.log(addAndMultiply(3)); // Output: 8
8. Agent
Les objets proxy vous permettent de créer un comportement personnalisé pour les opérations de base sur les objets. Il permet l'interception et la modification des opérations sur les objets. Par exemple, accéder aux propriétés, attribuer et appeler des méthodes.
const handler = {
get: (target, prop) => {
console.log(Accessing property: ${prop});
return target[prop];
},
};
const targetObj = { name: 'John', age: 30 };
const proxyObj = new Proxy(targetObj, handler);
console.log(proxyObj.name); // 输出: Accessing property: name \n John
9. Délégation d'événement
La délégation d'événements est une technique qui vous permet d'attacher un seul écouteur d'événement à un parent, de réduire l'utilisation de la mémoire et d'améliorer les performances, en particulier pour les grandes listes ou le contenu généré dynamiquement.
document.getElementById('parent').addEventListener('click', function (event) {
if (event.target.matches('li')) {
console.log('You clicked on an li element!');
}
});
10、Web Travailleurs
Les Web Workers peuvent exécuter du code JavaScript en arrière-plan à côté du thread principal. Ils sont utiles pour décharger les tâches gourmandes en CPU, éviter les blocages de l’interface utilisateur et améliorer la réactivité des performances.
// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: 'some data' });
// worker.js
self.addEventListener('message', function (event) {
const data = event.data;
// 进行复杂计算后将结果返回
self.postMessage({ result: computedResult });
});
Résumer
Merci d'avoir lu cet article, j'espère que ces conseils JavaScript avancés vous aideront à mieux comprendre et appliquer JavaScript. En tant que langage largement utilisé dans le développement Web, l'importance de JavaScript est évidente. La maîtrise de ces techniques peut rendre votre code plus concis, efficace et plus facile à maintenir. Si vous avez d'autres questions ou suggestions, veuillez laisser un message dans la zone de commentaires.
Lien d'extension :
Redis de l'entrée à la pratique
Une leçon vous aidera à comprendre les transactions de base de données !
Tutoriel d'utilisation des outils de développement Chrome
Qu’est-ce qu’une plateforme de développement low-code ?
OpenAI ouvre ChatGPT gratuitement à tous les utilisateurs. Des programmeurs vocaux ont falsifié les soldes ETC et détourné plus de 2,6 millions de yuans par an. Spring Boot 3.2.0 a été officiellement publié. Les employés de Google ont critiqué le grand patron après avoir quitté l'entreprise. Il a été profondément impliqué dans le projet Flutter et formulé des normes liées au HTML. Microsoft Copilot Web AI sera officiellement lancé le 1er décembre, prenant en charge le framework Web open source Terminal Chat Rust de Microsoft chinois Lancement de Rocket v0.5 : prend en charge asynchrone, SSE, WebSockets, etc. Redis implémente le framework Telegram Bot en utilisant du code pur en langage C. Si vous êtes un responsable de projet open source, rencontrez Jusqu'où pouvez-vous supporter ce type de réponse ? PHP 8.3 GA