Maison >interface Web >js tutoriel >Partager quelques conseils lors de l'écriture de code JavaScript

Partager quelques conseils lors de l'écriture de code JavaScript

零下一度
零下一度original
2017-06-17 15:04:121413parcourir

Avant-propos

En raison de certains changements dans le travail et la vie, la fréquence de rédaction d'articles a un peu diminué récemment. Je suis vraiment désolé, mais je pense qu'elle va bientôt se rétablir. Merci à tous pour votre. une attention et un soutien continus.

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

Apprendre et utiliser habilement

1. new Set()

Certaines personnes savent peut-être qu'ES6 fournit une nouvelle structure de données Set, mais peu de gens le peuvent. utilisez-le avec flexibilité. En utilisant la structure de données Set, nous pouvons facilement dédupliquer un tableau, tel 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 Object.assign()

Object.assign() est également une extension des objets fournis. dans la méthode ES6, qui peut être utilisée pour fusionner et copier des objets, tels que :

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

3 map()

La méthode map est utilisée pour parcourir le tableau <.> et a une valeur de retour, vous pouvez opérer sur chaque élément du tableau et générer un nouveau tableau. Parfois, il 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); // 给数组每一项乘以10console.log(newArr3); // [10, 20, 30, 40, 50]
4. . filter()

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 le courant. item par jugement, et renvoie finalement 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. some()

La méthode some est utilisée pour parcourir le tableau et déclencher une fonction de rappel après chaque Tant que l'on remplit les conditions, il renvoie vrai, sinon il renvoie faux Semblable à || comparaison, par exemple :

let arr5 = [{result: true}, {result: false}];let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为trueconsole.log(newArr5); // true
6.every()

every méthode. est utilisé pour parcourir le tableau, déclenchant une fonction de rappel après chaque élément, tant que l'on n'est pas satisfait. La condition renvoie faux, sinon elle renvoie vrai, similaire à la comparaison &&, par exemple :

let arr6 = [{result: true}, {result: false}];let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为falseconsole.log(newArr6); // false
7 . ~~operator

~ le symbole est utilisé en JavaScript pour effectuer une négation au niveau du bit, ~~ signifie inverser deux fois, et la valeur de l'opération

bit opération doit être un entier, et le résultat. est également un entier, donc l'opération sur le bit deviendra automatiquement un entier et la partie décimale peut être intelligemment supprimée, comme pour parseInt, par exemple :

let a = 1.23;let b = -1.23;console.log(~~a); // 1console.log(~~b); // -1
8 || Operator

<.> En utilisant intelligemment l'opérateur ||, nous pouvons définir des valeurs par défaut pour les variables, par exemple :

9 ...Operator
let c = 1;let d = c || 2; // 如果c的值为true则取存在的值,否则为2console.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 du tableau, tels que :

10.
let [num1, ...nums] = [1, 2, 3];console.log(num1); // 1console.log(nums); // [2, 3]
Opération ternaire

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

Conclusion
let e = true,
    f = &#39;&#39;;if (e) {
    f = &#39;man&#39;;
} else {
    f = &#39;woman&#39;;
}// 等同于
f = e ? &#39;man&#39; : &#39;woman&#39;;

Cet article ne répertorie que 10 méthodes courantes pour améliorer l'efficacité du codage dans Syntaxe JavaScript

et les explique brièvement. Bien sûr, chaque point de connaissance peut être développé et exploré en conséquence. J'espère que tout le monde pourra obtenir l'effet d'une utilisation habile tout en apprenant habilement.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn