20 Tipps zur Verbesserung der Geschwindigkeit und Effizienz der JavaScript-Entwicklung

Die Verbesserung der Geschwindigkeit und Effizienz der JavaScript-Entwicklung ist ein sehr wichtiger Punkt in der täglichen Entwicklung. In diesem Artikel werden einige praktische und praktische Methoden und Tipps für tägliche Aufgaben vorgestellt, die Anzahl der Codezeilen reduziert, die Arbeitseffizienz verbessert und die Berührung erhöht Fischzeit.

Bei unseren täglichen Aufgaben müssen wir Funktionen schreiben, z. B. Sortieren, Suchen, Finden eindeutiger Werte, Übergeben von Parametern, Austauschen von Werten usw., daher möchte ich hier einige gängige Techniken und Methoden vorstellen, die ich verwende die sich im Laufe der Jahre angesammelt haben. Dadurch kann jeder seine Angelzeit verlängern. [Verwandte Empfehlungen: Javascript-Lern-Tutorial]

Diese Methoden werden Ihnen auf jeden Fall helfen:

• Codezeilen reduzieren
• Codierungswettbewerbe
• Zeit zum Fischen erhöhen

1. Arrays deklarieren und initialisieren

Wir können eine bestimmte Größe verwenden, um das Array zu initialisieren, oder wir können den Array-Inhalt initialisieren, indem wir einen Wert angeben. Möglicherweise verwenden Sie eine Reihe von Arrays, dies kann jedoch auch für zweidimensionale Arrays erfolgen, wie unten gezeigt :

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. Summe, Minimum und Maximum

Wir sollten die Methode reduce verwenden, um schnell grundlegende mathematische Operationen zu finden. 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、从数组中过滤到虚值

像 0, undefined, null, false, "", ''这样的假值可以通过下面的技巧轻易地过滤掉。

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


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

5、使用逻辑运算符处理需要条件判断的情况

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、创建一个计数器对象或 Map

大多数情况下，可以通过创建一个对象或者Map来计数某些特殊词出现的频率。

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

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!"

9、循环方法的比较

• for 和 for..in 默认获取索引，但你可以使用arr[index]。
• for..in也接受非数字，所以要避免使用。
• forEach, for...of 直接得到元素。
• forEach 也可以得到索引，但 for...of 不行。

10、合并两个对象

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和argument，因此它们引用定义它们的环境。

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

但是这样：

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

12、可选的链

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、洗牌一个数组

利用内置的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]
// 输出
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

Summe

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

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

Maximalwert

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

// 输出: 6

Minimalwert

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

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

3. Sortieren Sie Arrays aus Zeichenfolgen, Zahlen oder Objekten.

Wir haben die eingebaute Methode sort () und reverse(), um Zeichenfolgen zu sortieren, aber was ist, wenn es sich um ein Array aus Zahlen oder Objekten handelt? Objekt-Array-Sortierung

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

// 输出: 4

4. Filtern Sie virtuelle Werte aus dem Array heraus

wie 0, undefiniert, null , Falsche Werte wie false, "", '' können mit den folgenden Techniken leicht herausgefiltert werden.

const num = 10;

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

5. Verwenden Sie logische Operatoren, um Situationen zu behandeln, die eine bedingte Beurteilung erfordern.

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

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

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

Most In In diesem Fall können Sie ein Objekt oder eine Karte erstellen, um die Häufigkeit bestimmter Sonderwörter zu zählen.

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]

oder

rrreee

8. Der ternäre Operator ist cool

🎜🎜rrreee🎜🎜🎜9. Vergleich der Schleifenmethoden🎜🎜🎜🎜🎜for und for.. in ruft standardmäßig den Index ab, Sie können jedoch auch arr[index] verwenden. 🎜🎜for..in akzeptiert auch Nicht-Zahlen, also vermeiden Sie die Verwendung. 🎜🎜forEach, for...of holen sich das Element direkt. 🎜🎜forEach kann auch den Index abrufen, for...of jedoch nicht. 🎜🎜🎜🎜🎜10. Zwei Objekte zusammenführen🎜🎜🎜rrreee🎜🎜🎜11. Pfeilfunktionsausdrücke sind eine Alternative zu herkömmlichen Funktionsausdrücken, sind jedoch eingeschränkt und können nicht in allen Situationen verwendet werden. Da sie einen lexikalischen Gültigkeitsbereich (übergeordneter Gültigkeitsbereich) haben und kein eigenes this und argument haben, verweisen sie auf die Umgebung, in der sie definiert sind. 🎜rrreee🎜Aber das:🎜rrreee🎜🎜🎜12. Optionale Kette🎜🎜🎜rrreee🎜🎜🎜13. Mischen Sie ein Array🎜🎜🎜🎜Verwenden Sie die integrierte Math.random()-Methode. 🎜rrreee🎜🎜🎜14. Doppelte Fragezeichensyntax🎜🎜🎜rrreee🎜🎜🎜15. Verbleibende und Erweiterungssyntax🎜🎜🎜rrreee🎜🎜🎜16 🎜🎜🎜rrreee 🎜🎜🎜17 Für binär oder hexadezimal🎜🎜🎜rrreee🎜🎜🎜18. Verwenden Sie die Destrukturierung, um zwei Zahlen auszutauschen🎜🎜🎜rrreee🎜🎜🎜19. Einzeilige Palindrom-Zahlenprüfung🎜🎜🎜rrreee🎜🎜🎜20. Ändern Sie die Objekteigenschaft „In Attribut konvertieren“. array🎜🎜🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt von20 Tipps zur Verbesserung der Geschwindigkeit und Effizienz der JavaScript-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!