Techniques de concision du code JavaScript

L'objectif principal de cet article est d'apprendre avec vous quelques astuces simples en matière de code JavaScript qui nous font briller au travail.

Remarque : il n'y a pas de bien ou de mal absolu dans la comparaison de code suivante. Certaines méthodes d'écriture auront un scénario d'utilisation relativement unique. Vous pouvez juger en fonction des habitudes et des préférences de chacun. Si vous avez des opinions meilleures ou différentes, veuillez laisser un message pour échanger ~

(Recommandation d'apprentissage gratuite : tutoriel vidéo javascript)

1. Opération de court-circuit :

Lorsque nous rencontrons une telle situation, allez-vous

const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁

ou utiliser des opérations logiques js pour la mettre en œuvre ?

const res1 = item.a || item.b;const res1 = item.a && item.b;

2. La bonne façon d'attribuer une valeur booléenne à une variable par jugement conditionnel :

Lorsque nous devons comparer une seule valeur pour obtenir le résultat, utilisez opérations directes, sinon le jugement if serait beaucoup plus simple~

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'

3 La bonne façon de juger si la longueur du tableau n'est pas nulle :

Scénario : Si l'élément mémoire du tableau existe, alors effectuez l'opération :

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}

Par analogie, lorsque nous devons juger si la longueur du tableau est vide :

if(!arr.length){
	// todo}

4. Utiliser inclut pour simplifier si jugement :

Scénario : Si les paramètres sont égaux à 1, 2, 3, 4, passer à l'étape suivante

Ecrire la première version du code :

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}

Je ressens un mal de tête inhabituel après l'avoir lu. Ensuite, il a été modifié en :

if([1,2,3,4].includes(a)){
	// todo}

5. Utilisez-en pour déterminer s'il existe une valeur qualifiée :

.

Scénario : Rechercher s'il existe un produit avec un prix inférieur à n

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}

La méthode a été écrite, mais comme js nous fournit autant de méthodes de tableau, utilisez-la :

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: &#39;帽子&#39;, price: 50},]const checkData = (n) => itemList.some(item => item.price < n)

Optimiser à nouveau

const checkData = (n, itemList) => itemList.some(item => item.price < n)

6. Utilisez la méthode de filtrage pour filtrer le tableau d'origine, Formez un nouveau tableau

Scénario : Éliminez certains éléments inutiles Par exemple, l'identifiant. de chaque donnée sont des données nécessaires aux opérations ultérieures. Afin d'éliminer les données défectueuses, nous ferons ceci :

const data = [
    { name: '手机', price: 1000, id: 1 },
    { name: '手机壳', price: 10, id: 2 },
    { name: &#39;帽子&#39;, price: 50, id: &#39;&#39; },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}

Pour maîtriser l'idée de "filtrage", nous la traitons comme ceci :

const afterData = data.filter(item => item.id);

7. Utilisez map pour traiter par lots les éléments du tableau :

Scénario : En ce qui concerne le prix Dans l'interaction, le champ de prix que nous obtenons est généralement en cents. Comment l'afficher ?

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)

8. Déconstruire le tableau pour remplacer les valeurs des variables

Scénario : Deux valeurs doivent être échangées

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]

9. Déstructuration Intégré au code :

Scénario : Récupérer un élément dans l'objet et définir la valeur par défaut

Écrire la première version du code :

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}

10. Que peut-on faire lorsque plusieurs méthodes sont combinées ? (Exemple 1)

C'est la dernière idée concise du code. Prenez une distance de scène spécifique pour inspirer les autres à laisser un message dans la zone de commentaire~

.

Scène :

Les données obtenues par le front-end sont

data = [
    { id: 1, name: '一级标题-1' },
    { id: 2, name: '一级标题-2' },
    { id: 3, name: '二级标题-1', pid: 1 },
    { id: 3, name: '一级标题-3' },
    { id: 3, name: '二级标题-2', pid: 2 },]

Nous devons former une relation d'association, telle que :

needData = [
    {
        id: 1,
        name: '一级标题-1',
        children: [
            { id: 3, name: '二级标题-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一级标题-2',
        children: [
            { id: 5, name: '二级标题-2', pid: 2 }
        ]
    },
    { id: 4, name: '一级标题-3' },]

J'ai donc utilisé plusieurs API fournies par le tableau :

newList = data.reduce((result, item, _, arr) => {
    if (!item.pid) {
        return [...result, item];
    }
    const parentItem = arr.find(({ id }) => id === item.pid);
    if (parentItem) {
        const { children = [] } = parentItem;
        parentItem.children = [...children, item];
    }
    return result;}, []);

Idée :

1. Trouver l'élément avec le parent
2. Envoyer le au bon emplacement
3. Renvoyer toutes les données sans parent field (pid)

Si vous avez d'autres idées et opérations similaires, assurez-vous de laisser un message

Recommandations d'apprentissage gratuites associées : javascript(Vidéo)

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!