Un article résumant 5 conseils d'optimisation du code JavaScript

Dans cet article, nous présenterons 5 conseils d'optimisation de code pour vous aider à écrire un code plus efficace et plus élégant. Ces techniques vont de l'utilisation d'opérateurs de propagation pour simplifier le code à l'utilisation de async/await pour gérer le code asynchrone. async/await 处理异步代码等。

1. 使用扩展运算符解构对象和数组

扩展运算符由三个点 ... 表示，可用于对象和数组的解构。对于对象，它允许使用另一个对象的属性子集轻松创建一个新对象。

const numbersObj = { a: 1, b: 2, c: 3 };
const newObject = { ...numbersObj, b: 4 };
console.log(newObject); // { a: 1, b: 4, c: 3 }

对于数组，使用扩展运算符可以轻松提取和操作数组元素。

const numbersArray = [1, 2, 3, 4, 5];
const newArray = [...numbersArray.slice(0, 2), 6, ...numbersArray.slice(4)];
console.log(newArray); // [ 1, 2, 6, 5 ]

关于解构运算符，如有兴趣可以参阅：

• JavaScript 解构赋值 5 个常见场景和实例
• 再谈JavaScript 中的对象解构

2. 使用 async/await 简化异步代码

async/await 是一种简化 JavaScript 中异步代码处理的方法。它允许以一种看起来和行为都像同步代码的方式编写异步代码。

async function getData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data);
}
getData();

3. 使用代理对象进行高级属性访问

JavaScript 中的 Proxy 对象允许拦截和自定义属性访问。这对于高级数据验证、日志记录等非常有用。

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

const target = {};
const handler = {
    get: (target, prop) => {
        console.log(`获取属性：${prop}`);
        return target[prop];
    },
    set: (target, prop, value) => {
        console.log(`属性 ${prop} 更新为 ${value}`);
        target[prop] = value;
    },
};
const proxy = new Proxy(target, handler);

proxy.name = "DevPoint";
console.log(proxy.name);

4. 使用三元运算符优化条件逻辑

三元运算符是在 JavaScript 中编写简单的 if-else 语句的一种简写方式。这是一种表达条件及其相应结果的简洁有效的方式。

const x = 5;
const result = x > 0 ? "positive" : "negative";
console.log(result); // positive

它也可以嵌套用于更复杂的条件。

const age = 30;
const result =
    age < 18 ? "未成年人" : age >= 18 && age < 60 ? "成年人" : "老年人";
console.log(result); // 成年人

5. 使用 IIFE 保护数据隐私

IIFE 是 Immediately Invoked Function Expression（立即调用函数表达式）的缩写，它是一个在定义时就会立即执行的 JavaScript 函数，并为变量创建私有作用域。这对于保护数据隐私很有用，因为它确保了在IIFE中声明的变量不能从外部访问。

可以使用这种格式为应用程序创建一个包，将代码逻辑放入命名空间以避免变量冲突以保持代码私有，而这个私有包适合以 <script> 标签方式引入到页面。通常可以看到WEB统计代码是以这种方式引入页面。

(function () {
    let key = "这是一个安全密钥";
})();
console.log(key); // ReferenceError: key is not defined

IIFE 真正擅长的是创建作用域的能力，IIFE 中的任何变量对外界都是不可见的。减少全局变量的产生，同时也避免了变量名称冲突的机会。

来看一个例子：

(function initGame() {
    // 无法在 IIFE 外部访问的私有变量
    var lives;
    var player;

    init();

    // 在 IIFE 之外无法访问的私有函数
    function init() {
        lives = 5;
        player = "devpoint";
    }
})();

在这个例子中声明了两个变量，都是私有的，也就是说，只对 IIFE 本身有效。IIFE 以外的任何人都无法访问它。此外，还有一个 init

1. Utilisez l'opérateur spread pour déconstruire les objets et les tableaux

L'opérateur spread est représenté par trois points ... et peut être utilisé pour les objets et les tableaux se déconstruisent. Pour les objets, cela permet de créer facilement un nouvel objet en utilisant un sous-ensemble des propriétés d'un autre objet.

(function ($, global, document) {
    // 对 jQuery 使用 $，对 window 使用 global
})(jQuery, window, document);

Pour les tableaux, utilisez l'opérateur spread pour extraire et manipuler facilement les éléments du tableau.

rrreee

Concernant l'opérateur de déstructuration, si vous êtes intéressé, vous pouvez vous référer à :

• 5 scénarios courants et exemples de déstructuration et d'affectation JavaScript

• Parlons de la déconstruction d'objets en JavaScript

2. Utilisez async/await pour simplifier le code asynchrone
async/await est une méthode pour simplifier le traitement du code asynchrone en JavaScript. Il permet d'écrire du code asynchrone d'une manière qui ressemble et se comporte comme du code synchrone. rrreee

3. Utilisez des objets proxy pour un accès avancé aux propriétés

🎜Les objets proxy en JavaScript permettent l'interception et l'accès aux propriétés personnalisées. Ceci est utile pour la validation avancée des données, la journalisation, etc. 🎜

🎜L'objet proxy est utilisé pour créer un proxy pour un objet afin d'implémenter l'interception et la personnalisation des opérations de base (telles que la recherche d'attributs, l'affectation, l'énumération, l'appel de fonction, etc.). 🎜

rrreee

4. Utilisez l'opérateur ternaire pour optimiser la logique conditionnelle 🎜🎜L'opérateur ternaire est un simple if-elseécrit en JavaScript > A. raccourci pour une déclaration. Il s'agit d'une manière concise et efficace d'exprimer les conditions et leurs conséquences correspondantes. 🎜rrreee🎜Il peut également être imbriqué pour des conditions plus complexes. 🎜rrreee

5. Utilisez IIFE pour protéger la confidentialité des données🎜🎜IIFE est l'abréviation de Expression de fonction immédiatement invoquée, qui est une fonction JavaScript exécutée. immédiatement une fois défini et crée une portée privée pour la variable. Ceci est utile pour protéger la confidentialité des données car cela garantit que les variables déclarées dans l'IIFE ne sont pas accessibles de l'extérieur. 🎜🎜Vous pouvez utiliser ce format pour créer un package pour l'application, placer la logique du code dans l'espace de noms pour éviter les conflits de variables et garder le code privé, et ce package privé convient à l'introduction avec <script> code> balise vers la page. Vous pouvez généralement constater que le code des statistiques WEB est introduit dans la page de cette manière. 🎜rrreee

🎜Ce pour quoi IIFE est vraiment bon, c'est la possibilité de créer des étendues. Toutes les variables dans IIFE sont invisibles pour le monde extérieur. Réduisez la génération de variables globales et évitez les risques de conflits de noms de variables. 🎜

🎜Regardons un exemple : 🎜rrreee🎜Dans cet exemple, deux variables sont déclarées, toutes deux privées, c'est-à-dire valables uniquement pour l'IIFE lui-même. Il n’est accessible à personne en dehors de l’IIFE. De plus, il existe une méthode init, qui n'est pas accessible de l'extérieur. 🎜🎜Si vous avez lu le code source de jQuery, vous devriez être familier avec le code suivant : 🎜rrreee🎜Résumé🎜🎜En rassemblant ces conseils de codage, vous pouvez améliorer votre capacité à écrire du code élégant et maintenable. 🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo JavaScript🎜"🎜🎜🎜

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!