20 compétences JS pour vous aider à améliorer votre efficacité au travail et à ne plus jamais faire d'heures supplémentaires !

Cet article partagera avec vous 20 trucs et astuces JavaScript pour améliorer l'efficacité du code. Soyez une personne frontale qui ne fait pas d'heures supplémentaires. J'espère que cela sera utile à tout le monde.

Dans nos tâches quotidiennes, nous écrivons des fonctions comme le tri, la recherche, la recherche de valeurs uniques, la transmission de paramètres, l'échange de valeurs, etc. J'ai donc dressé ici une liste de mes conseils en matière de sténographie !

JavaScript est vraiment un excellent langage qui mérite d'être appris et utilisé. Pour un problème donné, il peut y avoir plusieurs façons d’arriver à la même solution. Dans cet article, nous aborderons uniquement les plus rapides.

Ces méthodes vous aideront certainement à :

• Réduire le nombre de LOC (lignes de code),
• Concours de codage,
• Hackathons
• ou autres tâches limitées dans le temps.

La plupart de ces hacks JavaScript utilisent ECMAScript6 (ES2015) et des technologies ultérieures, bien que la dernière version soit ECMAScript11 (ES2020).

==Remarque== : Tous les conseils ci-dessous ont été testés sur la console de Google Chrome.

1. Déclarer et initialiser un tableau

Nous pouvons initialiser un tableau d'une taille spécifique 0 en utilisant des valeurs par défaut (telles que "", null ou ). Vous les utilisez peut-être déjà pour des tableaux 1D, mais comment initialiser un tableau/matrice 2D ?

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. Trouvez la somme, le minimum et le maximum

Nous devrions utiliser la méthode reduce pour trouver rapidement les opérations mathématiques de base. reduce方法来快速找到基本的数学运算。

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

• 和

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

• 最大限度

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

• 最小

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

3. 对字符串、数字或对象数组进行排序

我们有内置的方法sort()和reverse()用于对字符串进行排序，但是数字或对象数组呢？

让我们看看数字和对象的升序和降序排序技巧。

• 排序字符串数组

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

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

• 排序数字数组

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]

• 对象数组排序

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. 从数组中过滤出虚假值

Falsy值喜欢0，undefined，null，false，""，''可以很容易地通过以下方法省略

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

5. 对各种条件使用逻辑运算符

如果你想减少嵌套 if…else 或 switch case，你可以简单地使用基本的逻辑运算符AND/OR。

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// 如果尚未设置，则将 arg1 设置为 10 作为默认值
return arg1;
}

let foo = 10;  
foo === 10 && doSomething(); 
// is the same thing as if (foo == 10) then doSomething();
// 输出: 10

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

6. 删除重复值

您可能已经将 indexOf() 与 for 循环一起使用，该循环返回第一个找到的索引或较新的 includes() 从数组中返回布尔值 true/false 以找出/删除重复项。 这是我们有两种更快的方法。

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)];
// 输出: [5, 4, 7, 8, 9, 2]

7. 创建计数器对象或映射

大多数情况下，需要通过创建计数器对象或映射来解决问题，该对象或映射将变量作为键进行跟踪，并将其频率/出现次数作为值进行跟踪。

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}

和

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. 三元运算符很酷

您可以避免使用三元运算符嵌套条件 if…elseif…elseif。

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

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

9. 与旧版相比，for 循环更快

• for并for..in默认为您提供索引，但您可以使用 arr[index]。
• for..in 也接受非数字，所以避免它。
• forEach,for...of直接获取元素。
• forEach也可以为您提供索引，但for...of不能。
• for并for...of考虑阵列中的孔，但其他 2 个不考虑。

10.合并2个对象

通常我们需要在日常任务中合并多个对象。

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. 箭头函数

箭头函数表达式是传统函数表达式的紧凑替代品，但有局限性，不能在所有情况下使用。由于它们具有词法范围（父范围）并且没有自己的范围this，arguments因此它们指的是定义它们的环境。

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

但

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

12. 可选链

可选的链接 ?.如果值在 ? 之前，则停止评估。为 undefined 或 null 并返回

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

13. 打乱数组

利用内置Math.random()

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]
// Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

et

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

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

maximum

🎜

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

// 输出: 6

🎜🎜minimum🎜🎜rreee

🎜3. méthodes intégrées sort() et reverse() pour trier les chaînes, mais qu'en est-il des tableaux de nombres ou d'objets ? 🎜🎜Examinons les techniques de tri ascendant et décroissant des nombres et des objets. 🎜🎜🎜Trier le tableau de chaînes🎜🎜

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

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

🎜🎜Trier le tableau de numéros🎜🎜

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

// 输出: 4

🎜🎜Trier le tableau d'objets🎜🎜

const num = 10;

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

🎜4. 🎜Valeurs fausses comme 0, undefined, null, false, "", '' peut être facilement omis par 🎜

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

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

🎜5 Utilisez des opérateurs logiques pour diverses conditions 🎜🎜🎜Si vous souhaitez réduire l'intégration avec if. ...sinon ou changer de cas, vous pouvez simplement utiliser les opérateurs logiques de base AND/OR. 🎜

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

🎜6. Supprimez les valeurs en double 🎜🎜🎜Vous avez peut-être utilisé indexOf() avec une boucle for qui renvoie le premier index trouvé. ou un includes() plus récent renvoie un booléen vrai/faux à partir d'un tableau pour rechercher/supprimer les doublons. C'est là que nous disposons de deux méthodes plus rapides. 🎜

使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// 输出
(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]

🎜7. Créez un objet compteur ou une carte 🎜🎜🎜La plupart du temps, vous devez résoudre le problème en créant un objet compteur ou une carte qui prend des variables comme clés. , et sa fréquence/nombre d'occurrences en tant que valeur. 🎜rrreee🎜 et 🎜rrreee

🎜8. L'opérateur ternaire est cool 🎜🎜🎜Vous pouvez éviter d'utiliser l'opérateur ternaire pour imbriquer les conditions si…sinon…sinon. 🎜rrreee

🎜9 La boucle for est plus rapide par rapport à l'ancienne version 🎜🎜🎜🎜for et for..in</code. > L'index vous est donné par défaut, mais vous pouvez utiliser arr[index]. 🎜🎜<code>for..in accepte également les non-chiffres, alors évitez-le. 🎜🎜forEach,for...of récupère l'élément directement. 🎜🎜forEach peut également vous donner un index, mais for...of ne le peut pas. 🎜🎜for et for...of considèrent les trous dans le tableau, mais pas les 2 autres. 🎜🎜

🎜10. Fusionner 2 objets🎜🎜🎜Habituellement, nous devons fusionner plusieurs objets dans les tâches quotidiennes. 🎜rrreee

🎜11. Fonctions fléchées 🎜🎜🎜Les expressions de fonctions fléchées sont des alternatives compactes aux expressions de fonctions traditionnelles, mais ont des limites et ne peuvent pas être utilisées dans toutes les situations. Puisqu'ils ont une portée lexicale (la portée parent) et n'ont pas leur propre portée this, les arguments font référence à l'environnement dans lequel ils sont définis. 🎜rrreee🎜mais🎜rrreee

🎜12. Chaînage facultatif🎜🎜🎜chaînage facultatif ?. Arrête l'évaluation si la valeur précède ?. N'est pas défini ou nul et renvoie 🎜rrreee

🎜13 Brouillez le tableau 🎜🎜🎜 à l'aide de la méthode intégrée Math.random(). 🎜rrreee🎜🎜14. Opérateur de coalescence nul🎜🎜🎜L'opérateur de coalescence nul (??) est un opérateur logique qui renvoie son opérande droit lorsque son opérande gauche est vide ou indéfini, sinon il renvoie ses opérandes latéraux d'opérande gauche. 🎜

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

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

15. Rest & Spread 运算符

那些神秘的3点...可以休息或传播！?

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

// 输出: 6

和

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

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

16. 默认参数

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

// 输出: 4

17. 将十进制转换为二进制或十六进制

在解决问题的同时，我们可以使用一些内置的方法，例如.toPrecision()或.toFixed()来实现许多帮助功能。

const num = 10;

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

18. 使用解构简单交换两值

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

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

19. 单行回文检查

嗯，这不是一个整体的速记技巧，但它会让你清楚地了解如何使用弦乐。

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

20.将Object属性转成属性数组

使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// 输出
(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]

【相关推荐：javascript视频教程、web前端】

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!