18 Tipps zur JavaScript-Optimierung, die Sie kennen müssen

In diesem Artikel werfen wir einen Blick auf 18 JavaScript-Optimierungstechniken. Er ist für alle Entwickler geeignet, die JavaScript-Programmierung verwenden. Ich hoffe, dieser Artikel soll Ihnen dabei helfen, die JavaScript-Sprache besser zu nutzen wird für alle hilfreich sein.

1. Beurteilung mehrerer Bedingungen

Wenn wir mehrere Werte beurteilen müssen, können wir die Includes-Methode des Arrays verwenden.

//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code... 
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}

2. Wenn wahr … sonst

Der ternäre Operator ist besser, wenn die if-else-Bedingung keine größere Logik enthält.

// Bad
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Good
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;

Nachdem wir die Bedingungen verschachtelt haben, behalten wir den Inhalt wie unten gezeigt bei (Dreifach komplexer Punkte):

let x = 300,
let test2 = (x > 100) ? &#39;greater 100&#39; : (x < 50) ? &#39;less 50&#39; : &#39;between 50 and 100&#39;;
console.log(test2); // "greater than 100"

3. Null, Undefiniert, „Nullwertprüfung“

Manchmal müssen wir überprüfen, ob wir verweisen zum Wert Unabhängig davon, ob die Variable nicht null oder undefiniert oder '' ist, können wir das Kurzschlussschreiben verwenden leer ist und einen Standardwert zuweisen muss, können wir das folgende Kurzschlussschreiben verwenden:

4. Doppelbitoperatoren sind die grundlegenden Wissenspunkte in JavaScript-Anfänger-Tutorials, aber wir verzichten darauf. Bitoperatoren werden nicht oft verwendet. Denn niemand möchte mit Einsen und Nullen arbeiten, ohne sich mit Binärzahlen zu befassen. Aber der Doppelbit-Operator hat einen sehr praktischen Koffer. Sie können anstelle von Math.floor( ) Doppelbitoperatoren verwenden. Der Vorteil des doppelten negativen Positionsoperators besteht darin, dass er die gleiche Operation schneller ausführt.

5. Häufige ES6-Optimierungen – Objekteigenschaften

7. Gemeinsame kleine ES6-Optimierung – impliziter Rückgabewert

Der Rückgabewert ist das Schlüsselwort, das wir normalerweise verwenden, um das Endergebnis der Funktion zurückzugeben. Eine Pfeilfunktion mit nur einer Anweisung kann implizit ein Ergebnis zurückgeben (die Funktion muss die Klammern ({ }) weglassen, um das Schlüsselwort return wegzulassen).

Um mehrzeilige Anweisungen (z. B. Objekttext) zurückzugeben, müssen Sie () anstelle von {} verwenden, um den Funktionskörper zu umschließen. Dadurch wird sichergestellt, dass der Code als einzelne Anweisung ausgewertet wird.

// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路写法
let second = first|| '';

8. ES6 gemeinsame kleine Optimierung – Destrukturierungszuweisung

let first = null,
let second = first || 'default'
console.log(second)

9. ES6 gemeinsame kleine Optimierung – Spread-Operator

Der Rückgabewert ist das Schlüsselwort, das wir normalerweise verwenden, um das Endergebnis zurückzugeben Funktion. Eine Pfeilfunktion mit nur einer Anweisung kann implizit ein Ergebnis zurückgeben (die Funktion muss die Klammern ({ }) weglassen, um das Schlüsselwort return wegzulassen).

Um mehrzeilige Anweisungen (z. B. Objekttext) zurückzugeben, müssen Sie () anstelle von {} verwenden, um den Funktionskörper zu umschließen. Dadurch wird sichergestellt, dass der Code als einzelne Anweisung ausgewertet wird.

// Bad
Math.floor(4.9) === 4  //true
// Good
~~4.9 === 4  //true

Beherrschen Sie die gängigen Methoden von Arrays und behalten Sie sie beim Schreiben nicht im Hinterkopf. Dies kann die Codierungseffizienz effektiv verbessern Wird jeden Tag verwendet

jede Filterzuordnung fürJeder Find-FindIndex-Reduzierer enthält

const x,y = 5
// Bad
const obj = { x:x, y:y }
// Good
const obj = { x, y }

11. Vergleichsrückgaben

Durch die Verwendung des Vergleichs in der Rückgabeanweisung kann der Code von 5 Zeilen auf 1 Zeile reduziert werden.

//Bad
function sayHello(name) {
  console.log('Hello', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000)
list.forEach(function(item) {
  console.log(item)
})
// Good
const sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))

12. Kurzer Funktionsaufruf

Wir können den ternären Operator verwenden, um diese Art von Funktion zu implementieren.

//Bad
function calcCircumference(diameter) {
  return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
  Math.PI * diameter
)

13.Abkürzung für Switch-Codeblock (ifelse-Codeblock)

Wir können die Bedingung im Schlüsselwertobjekt speichern und sie dann entsprechend der Bedingung verwenden.

const form = { a:1, b:2, c:3 }
//Bad
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form

14. Mehrzeilige Zeichenfolgenabkürzung

Wenn wir mehrzeilige Zeichenfolgen im Code verarbeiten, können wir Folgendes tun:

const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
// Bad
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]

15. Object.entries() Object.values() Object . keys()

Object.entries() Diese Funktion wandelt ein Objekt in ein Array von Objekten um.

Object.values() kann den Objektwert abrufen.

Object.keys() kann den Objektschlüsselwert abrufen.

const arr = [1,2,3]
//every 每一项都成立，才会返回true
console.log( arr.every(it => it>0 ) ) //true
//some 有一项都成了，就会返回true
console.log( arr.some(it => it>2 ) ) //true
//filter 过滤器
console.log( arr.filter(it => it===2 ) ) //[2]
//map 返回一个新数组
console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
//forEach 没有返回值
console.log( arr.forEach(it => it===console.log(it)) ) //undefined
//find 查找对应值 找到就立马返回符合要求的新数组
console.log( arr.find(it => it===it>2) ) //3
//findIndex 查找对应值 找到就立马返回符合要求新数组的下标
console.log( arr.findIndex(it => it===it>2) ) //2
//reduce 求和或者合并数组
console.log( arr.reduce((prev,cur) => prev+cur) ) //6
//includes 求和或者合并数组
console.log( arr.includes(1) ) //true
//数组去重
const arr1 = [1,2,3,3]
const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
//数组求最大值
Math.max(...arr)//3
Math.min(...arr)//1
//对象解构 这种情况也可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    sort:1
}
//goods1
let reqParams={
    ...defaultParams,
    sort:2
}
//goods2
Object.assign( defaultParams, {sort:2} )

16. Wiederholen Sie eine Zeichenfolge mehrmals. Um dieselben Zeichen mehrmals zu wiederholen , wir können eine for-Schleife verwenden und sie in dieselbe Schleife einfügen. Wie kann man sie verkürzen?

// Bad
let test
const checkReturn = () => {
    if (test !== undefined) {
        return test;
    } else {
        return callMe('test');
}
}
// Good
const checkReturn = () => {
return test || callMe('test');
}

17. Die Abkürzung für Potenz

Die mathematische Exponentialfunktion lautet wie folgt:

const test1 =() => {
  console.log('test1');
}
const test2 =() => {
  console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
  test1()
} else {
  test2()
}
// Good
test3 === 1? test1():test2()

18. Zahlentrennzeichen

Sie können Zahlen jetzt einfach mit _ trennen. Dies erleichtert den Umgang mit großen Datenmengen.

// Bad
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // And so on...
}
// Good
const data = {
  1: test1,
  2: test2,
  3: test
}
data[anything] && data[anything]()
// Bad
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Good
const types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
const func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

Wenn Sie die neuesten Funktionen der neuesten Version von JavaScript (ES2021/ES12) nutzen möchten, überprüfen Sie bitte Folgendes:

• 1.replaceAll(): Gibt eine neue Zeichenfolge zurück, in der alle übereinstimmenden Muster durch neue Ersatzwörter ersetzt werden. replaceAll()：返回一个新字符串，其中所有匹配的模式都被新的替换词替换。

• 2.Promise.any()：需要一个可迭代的Promise对象，当一个Promise完成时，返回一个带有值的Promise。

• 3.weakref：此对象持有对另一个对象的弱引用，不阻止该对象被垃圾收集。

• 4.FinalizationRegistry：让你在对象被垃圾回收时请求回调。

• 5.私有方法：方法和访问器的修饰符：私有方法可以用#声明。

• 6.逻辑运算符：&&和||运算符。

• 7.Intl.ListFormat：此对象启用对语言敏感的列表格式。

• 8.Intl.DateTimeFormat

2.Promise.any(): Erfordert ein iterierbares Promise-Objekt. Wenn ein Promise abgeschlossen ist, wird ein Promise mit einem Wert zurückgegeben.

3. weakref: Dieses Objekt enthält eine schwache Referenz auf ein anderes Objekt und verhindert nicht, dass das Objekt durch Müll gesammelt wird. 🎜🎜🎜🎜4. FinalizationRegistry: Ermöglicht Ihnen, einen Rückruf anzufordern, wenn das Objekt durch Müll gesammelt wird. 🎜🎜🎜🎜5. Private Methoden: Modifikatoren von Methoden und Zugriffsmethoden: Private Methoden können mit # deklariert werden. 🎜🎜🎜🎜6. Logische Operatoren: && und ||. 🎜🎜🎜🎜7.Intl.ListFormat: Dieses Objekt ermöglicht die sprachsensitive Listenformatierung. 🎜🎜🎜🎜8.Intl.DateTimeFormat: Dieses Objekt ermöglicht die sprachabhängige Formatierung von Datum und Uhrzeit. 🎜🎜🎜🎜【Empfohlenes Lernen: 🎜Javascript-Tutorial für Fortgeschrittene🎜】🎜

Das obige ist der detaillierte Inhalt von18 Tipps zur JavaScript-Optimierung, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!