20 conseils pour améliorer la vitesse et l'efficacité du développement JavaScript

L'amélioration de la vitesse et de l'efficacité du développement JavaScript est une place très importante dans le développement quotidien. Cet article vous présentera quelques méthodes et astuces pratiques et pratiques pour les tâches quotidiennes, réduira le nombre de lignes de code et améliorera l'efficacité du travail. temps de pêche.

Dans nos tâches quotidiennes, nous devons écrire des fonctions telles que le tri, la recherche, la recherche de valeurs uniques, la transmission de paramètres, l'échange de valeurs, etc., donc ici je partagerai mon travail Il existe plusieurs astuces et méthodes communes qui ont été rassemblées au fil des années pour permettre à chacun d'augmenter le temps passé à pêcher. [Recommandations associées : Tutoriel d'apprentissage javascript]

Ces méthodes vous aideront certainement :

• Réduire les lignes de code
• Concours de codage
• Augmenter le temps de pêche

1 Déclarer et initialiser le tableau

Nous pouvons vous utiliser. Vous pouvez initialiser le tableau avec une taille spécifique, ou vous pouvez initialiser le contenu du tableau en spécifiant une valeur. Vous pouvez utiliser un ensemble de tableaux. En fait, vous pouvez également le faire avec un tableau à deux dimensions, comme indiqué ci-dessous : 🎜>

const array = Array(5).fill(''); 
// 输出
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(() => Array(5).fill(0))
// 输出
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5

2. Somme, valeurs minimales et maximales

Nous devrions utiliser la méthode

pour trouver rapidement des opérations mathématiques de base. reduce

const array  = [5,4,7,8,9,2];

Somme

array.reduce((a,b) => a+b);
// 输出: 35

Valeur maximale

array.reduce((a,b) => a>b?a:b);
// 输出: 9

Valeur minimale

array.reduce((a,b) => a<b?a:b);
// 输出: 2

3. Trier des tableaux de chaînes, de nombres ou d'objets

Nous avons des méthodes intégrées

et sort() pour trier les chaînes, mais si c'est le cas un tableau de nombres ou d'objets ? reverse()

Tri de tableau de chaînes

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// 输出
(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// 输出
(4) ["Steve", "Musk", "Kapil", "Joe"]

Tri de tableau de nombres

const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// 输出
(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => b-a);
// 输出
(6) [100, 40, 25, 10, 5, 1]

Tableau d'objets Triez

const objectArr = [ 
    { first_name: 'Lazslo', last_name: 'Jamf'     },
    { first_name: 'Pig',    last_name: 'Bodine'   },
    { first_name: 'Pirate', last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// 输出 
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3

4. Filtrez les valeurs virtuelles du tableau

comme

, 0, undefined , null, false, "" ces fausses valeurs peuvent être facilement filtrées par les techniques suivantes. ''

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);


// 输出
(3) [3, 6, 7]

5. Utilisez des opérateurs logiques pour gérer les situations qui nécessitent un jugement conditionnel

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// 如果arg1没有值，则取默认值 10
}

let foo = 10;  
foo === 10 && doSomething(); 
// 如果 foo 等于 10，刚执行 doSomething();
// 输出: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// Output: 10

6. 🎜>

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// Output: [5, 4, 7, 8, 9, 2]

7. Créer un objet compteur ou une carteDans la plupart des cas, vous pouvez créer un objet compteur ou une carte. Compter la fréquence de certains mots spéciaux.

let string = 'kapilalipak';

const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// 输出
{k: 2, a: 3, p: 2, i: 2, l: 2}

ou

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// 输出
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8 L'opérateur ternaire est cool

function Fever(temp) {
    return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? &#39;Go Out and Play!!&#39;
      : temp === 97 ? &#39;Take Some Rest!&#39;: &#39;Go Out and Play!&#39;;;
}

// 输出
Fever(97): "Take Some Rest!" 
Fever(100): "Visit Doctor!"

Comparaison. des méthodes de boucle

et
• obtiennent l'index par défaut, mais vous pouvez utiliser for. for..inarr[index]
accepte également les non-numéros, évitez donc de les utiliser.
• for..in
,
• récupère directement l'élément. forEachfor...offorEach peut également obtenir l'index, mais
ne le peut pas.
• for...of

10. Fusionner deux objets

const user = { 
 name: 'Kapil Raghuwanshi', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };

const summary = {...user, ...college, ...skills};

// 合并多个对象
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"

11. Fonction flèche Les expressions de fonctions fléchées sont une alternative aux expressions de fonctions traditionnelles, mais sont restreintes et ne peuvent pas être utilisées dans toutes les situations. Parce qu'ils ont une portée lexicale (portée parent) et n'ont pas

et

qui leur sont propres, ils font référence à l'environnement dans lequel ils sont définis. this

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// 输出
"Kapil"

argumentMais ça :

const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// Output
"

12. Chaîne facultative

const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// Output: "Kapil"
user.employ?.name;
// Output: undefined
user.employ.name
// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13. tableau en utilisant la méthode

intégrée.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0.5;
});
// 输出
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// 输出
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

Math.random()

14. Syntaxe du double point d'interrogation

const foo = null ?? 'my school';
// 输出: "my school"

const baz = 0 ?? 42;
// 输出: 0

15.

function myFun(a,  b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");

// 输出: 6

et

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 

lyrics;
// 输出: 
(5) ["head", "shoulders", "knees", "and", "toes"]

16 Paramètres par défaut

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);

// 输出: 4

17. Ou hexadécimal

const num = 10;

num.toString(2);
// 输出: "1010"
num.toString(16);
// 输出: "a"
num.toString(8);
// 输出: "12"

18. Utiliser la déstructuration pour échanger deux nombres

let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
// 输出
(2) [8, 5]

19. Vérification du numéro de palindrome sur une seule ligne

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 输出: true

20 Convertir les propriétés d'objet en tableaux de propriétés

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Output
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]

Pour plus de programmation- connaissances connexes, veuillez visiter : Introduction à la programmation ! !

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!