Conseils d'utilisation de JavaScript

Avant-propos

Cet article partage principalement avec vous quelques méthodes et techniques d'écriture de code JavaScript. Même si parfois tous les chemins mènent à Rome, il peut toujours y avoir le chemin le plus court à emprunter. J'espère que grâce aux compétences JavaScript suivantes, le code de chacun pourra être « complexe et simplifié, simplifié et affiné ».

Apprenez habilement et utilisez habilement

​1. nouvel ensemble()

Certaines personnes savent peut-être que ES6 fournit un nouvel ensemble de structures de données, mais peu de personnes peuvent l'utiliser de manière flexible. En utilisant la structure de données Set, nous pouvons facilement supprimer les doublons d'un tableau, tels que :

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。

console.log(newArr); // [1, 2, 3]

2. Objet.assign()

Object.assign() est également une méthode d'extension des objets fournie dans ES6, mais elle ne peut copier qu'un seul calque, comme :

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // {a: 1, b: 2}

3. carte()

La méthode map est utilisée pour parcourir le tableau et a une valeur de retour. Elle peut opérer sur chaque élément du tableau et générer un nouveau tableau. Parfois, elle peut remplacer les boucles for et forEach pour simplifier le code, comme :

.

let arr3 = [1, 2, 3, 4, 5];

let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10

console.log(newArr3); // [10, 20, 30, 40, 50]

4. filtre()

La méthode filter est également utilisée pour parcourir le tableau. Comme son nom l'indique, elle filtre le tableau, déclenche une fonction de rappel après chaque élément, conserve ou supprime l'élément actuel par jugement et renvoie enfin un nouveau tableau, tel que :

let arr4 = [1, 2, 3, 4, 5];

let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模，过滤余数不为0的数

console.log(newArr4); // [2，4]

5. certains()

Certaines méthodes sont utilisées pour parcourir le tableau et déclencher une fonction de rappel après chaque élément. Tant que l'on remplit les conditions, elle retournera vrai, sinon elle retournera faux, similaire à la comparaison || >

​6.every()

let arr5 = [{result: true}, {result: false}];

let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true，即为true

console.log(newArr5); // true

La méthode each est utilisée pour parcourir le tableau et déclencher une fonction de rappel après chaque élément. Tant qu'un élément ne remplit pas la condition, elle renvoie false, sinon elle renvoie true, similaire à la comparaison &&, telle que :

7. ~~Opérateur

let arr6 = [{result: true}, {result: false}];

let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为false

console.log(newArr6); // false

Le symbole ~ est utilisé en JavaScript pour effectuer une inversion au niveau du bit. ~~ signifie inverser deux fois. La valeur de l'opération au niveau du bit doit être un entier, et le résultat est également un entier, donc tout ce qui subit des opérations au niveau du bit deviendra automatiquement un entier. . Vous pouvez supprimer intelligemment la partie décimale, similaire à parseInt, telle que :

. 8. ||Opérateur

let a = 1.23;
let b = -1.23;

console.log(~~a); // 1
console.log(~~b); // -1

En utilisant intelligemment l'opérateur ||, nous pouvons définir des valeurs par défaut pour les variables, telles que :

9. …Opérateur

let c = 1;
let d = c || 2; // 如果c的值为true则取存在的值，否则为2

console.log(d); // 1

​…l'opérateur est une méthode utilisée pour déstructurer les tableaux dans ES6 et peut être utilisé pour obtenir rapidement les paramètres d'un tableau, tels que :

10. Opérateur ternaire

let [num1, ...nums] = [1, 2, 3];

console.log(num1); // 1
console.log(nums); // [2, 3]

Cet opérateur doit être familier à tout le monde, et il peut simplifier l'écriture de if else lorsqu'il est écrit silencieusement, comme :

Conclusion

let e = true,
    f = '';

if (e) {
    f = 'man';
} else {
    f = 'woman';
}

// 等同于
e ? f = 'man' : f = 'woman';

Cet article ne répertorie que 10 méthodes courantes dans la syntaxe JavaScript pour améliorer l'efficacité du codage et les explique brièvement. Bien sûr, chaque point de connaissance peut être développé et exploré en conséquence.

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!