Conseils d'utilisation d'ES6/JavaScript (tutoriel détaillé)

Cet article vous explique principalement les compétences d'utilisation d'ES6/JavaScript. Les amis dans le besoin peuvent 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 « 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é pour dédupliquer facilement des tableaux, tels 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. , la fusion d'objets était également très lourde auparavant, mais maintenant c'est très simple, 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()

map La méthode 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, tels que :

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 parcourir le tableau. Comme son nom l'indique. , il filtre le tableau et déclenche une fonction de rappel après chaque élément. Par jugement, conserve ou supprime l'élément actuel, 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. .some()

une méthode Utilisée pour parcourir le tableau et déclencher une fonction de rappel après chaque élément tant que l'on remplit la condition, elle retournera vrai, sinon elle retournera 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

chaque méthode est utilisé pour parcourir le tableau, déclenchant une fonction de rappel après chaque élément, et renvoie false tant que l'on ne remplit pas la condition, sinon il renvoie true, similaire à la comparaison &&, par exemple :

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

7. Opérateur ternaire

Cet opérateur devrait être utilisé par tout le monde. Ils sont tous familiers, et l'écriture de if else peut être simplifiée lorsqu'elle est écrite silencieusement, comme :

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

8.~~Opérateurs

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 intelligemment supprimer la partie décimale, similaire à parseInt, comme : <🎜. >

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser la couche Node pour implémenter le téléchargement de fichiers de formulaire en plusieurs parties

Comment utiliser React pour encapsuler le portail réutilisable composants

Comment envoyer des requêtes à la couche de service intermédiaire dans Node (tutoriel détaillé)

Comment obtenir du contenu Excel dans Node

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!