Compétences d'utilisation d'ES6/JavaScript compétences de partage_javascript

Cet article explique principalement les conseils d'utilisation d'ES6/JavaScript Les amis intéressés par JavaScript ou les étudiants qui apprennent encore JavaScript devraient s'y référer.

Il existe certaines méthodes et techniques pour écrire du code JavaScript. Bien que parfois tous les chemins mènent à Rome, il peut toujours y avoir le chemin le plus court à emprunter. Cet article partagera avec vous quelques astuces que tout le monde connaît mais que l'on utilise peu souvent

Quelques astuces

1.new Set()

Pour dédupliquer des tableaux, je sens dans mon esprit « subconscient » que nous devrions boucler et comparer pour dédupliquer. En fait, ES6 fournit un nouvel ensemble de structures de données, qui peut être utilisé facilement. dédupliquer un tableau, tel que :

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

2.Object.assign()

est également une méthode d'extension d'objets fournie dans ES6, qui peut être utilisée pour fusionner et copier des objets auparavant, c'était également très fastidieux, mais maintenant c'est très simple, comme par exemple. :

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 dans en itérant dans le tableau , il y a une valeur de retour. Vous pouvez opérer sur chaque élément du tableau et générer un nouveau tableau. Parfois, cela 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.filter()

La méthode de filtrage est également utilisée pour le parcours Array, comme son nom l'indique, consiste à filtrer le tableau, déclencher une fonction de rappel après chaque élément, conserver ou supprimer l'élément actuel via jugement, et enfin renvoyer 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()

Une méthode est utilisée pour parcourir le tableau et déclencher une fonction de rappel après chaque élément. Tant que l'on remplit les conditions, elle est utilisée. renverra vrai, sinon il renverra faux, similaire à || comparaison, telle que :

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

6.every() //Le contraire de 5

every est utilisée pour parcourir le tableau et déclencher une fonction de rappel après chaque élément. l'élément ne remplit pas la condition, il retournera faux, sinon il retournera vrai, similaire à la comparaison &&, telle que :

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

7.Opération ternaire symbole

Cet opérateur devrait être familier à tout le monde. Il peut simplifier le. écriture de if else lorsqu'elle est écrite silencieusement, comme :

let e = true,
f = '';
if (e) {
f = 'aaa';
} else {
f = 'bbb';
}
// 等同于
f = e ? 'aaa' : 'bbb';

8.~~opérateur

~ le symbole utilisé en JavaScript a une négation au niveau du bit La fonction de ~~ est d'inverser deux fois, et la valeur d'opération de l'opération sur bit est requise ê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, similaire à parseInt, comme :

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

Conclusion

Cet article ne répertorie que certains des problèmes les plus courants. méthodes en Syntaxe JavaScript qui peuvent améliorer la vitesse. J'espère que tout le monde pourra obtenir l'effet d'utiliser habilement les connaissances dans le processus d'apprentissage habile.

Recommandations associées :

Une brève discussion sur la structure des données cartographiques des compétences javascript_javascript es6

Explication détaillée de la façon d'utiliser ES6 pour implémenter le modèle singleton et son application

Explication détaillée de la syntaxe du module dans JavaScript ES6

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!