JavaScript -Funktionen, die Sie möglicherweise nicht kennen. Teil 1

In diesem Artikel finden Sie einige JavaScript-Tipps, die Ihnen helfen, die Nuancen der Sprache besser zu verstehen und Ihren Code zu verbessern. Der Artikel richtet sich hauptsächlich an junge und fortgeschrittene Entwickler. Vielleicht finden ihn fortgeschrittene Entwickler etwas langweilig, aber jeder ist herzlich willkommen, ihn zu lesen! ?

Vergessen Sie nicht, meinen Telegram-Kanal zu abonnieren, wo ich interessante Artikel über Front-End-Entwicklung teilen werde! ?

Lasst uns anfangen!

1. Zahlentrennzeichen

In Zahlen können Sie _ verwenden, um die Lesbarkeit Ihres Codes zu verbessern.

const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000

2. Vereinfachen Sie mit dem optionalen Verkettungsoperator && und dem ternären Operator

Zum Beispiel möchten wir den folgenden Code vereinfachen:

const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;

Schreiben Sie den Code mit dem optionalen Verkettungsoperator neu:

const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;

Der optionale Verkettungsoperator macht den Code prägnanter und lesbarer.

3. Verwenden Sie BigInt, um große Ganzzahlberechnungsprobleme zu lösen

Leider ist die Korrektheit von Zahlenberechnungen über Number.MAX_SAFE_INTEGER (9007199254740991) hinaus in JS nicht garantiert, was frustrierend ist.

Zum Beispiel:

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992

Um große Zahlen zu berechnen, empfiehlt sich die Verwendung von BigInt. Dies hilft, Berechnungsfehler zu vermeiden.

BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false

4. inAlternativen zum Operator

Um zu überprüfen, ob eine Eigenschaft in einem Objekt vorhanden ist, verwenden wir normalerweise den Operator in, Sie können aber auch obj.hasOwnProperty() verwenden.

Beide haben ihre Nachteile:

Der
• in-Operator prüft, ob eine Eigenschaft in einem Objekt vorhanden ist, einschließlich der vom Prototyp geerbten Eigenschaften. Dies kann zu unerwarteten Ergebnissen führen, wenn Sie nur die Eigenschaften des Objekts selbst und nicht die seines Prototyps überprüfen möchten.
Die
• obj.hasOwnProperty()-Methode überprüft nur die Eigenschaften des Objekts selbst und schließt vom Prototyp geerbte Eigenschaften aus. Diese Methode funktioniert jedoch nicht ordnungsgemäß, wenn das Objekt die hasOwnProperty-Methode überschreibt. In diesem Fall kann der Aufruf von obj.hasOwnProperty() zu Fehlern oder falschen Ergebnissen führen.

Beide Methoden berücksichtigen keine Eigenschaften, auf die über die Prototypenkette zugegriffen werden kann. Wenn Sie Eigenschaften in einem Objekt, einschließlich seines Prototyps, überprüfen müssen, müssen Sie andere Methoden verwenden, z. B. Object.getPrototypeOf() oder Object.prototype.isPrototypeOf().

Die Verwendung von in und obj.hasOwnProperty() kann beim Arbeiten mit großen Objekten oder verschachtelten Datenstrukturen unpraktisch und ineffizient sein. Dies erfordert möglicherweise mehrere Prüfungen und Methodenaufrufe, was die Ausführung Ihres Programms verlangsamt.

Einfaches Beispiel:

// `in` 运算符

const obj = { name: 'John', age: 25 };
console.log('name' in obj); // true
console.log('gender' in obj); // false

// 检查对象原型中的属性
console.log('toString' in obj); // true

// `obj.hasOwnProperty()` 方法
const obj = { name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('gender')); // false

// 检查对象原型中的属性
console.log(obj.hasOwnProperty('toString')); // false

Es gibt auch einen bequemeren und sichereren Betreiber Object.hasOwn().

const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000

5. Verwenden Sie <明>, um private Attribute # zu deklarieren

Um anzuzeigen, dass ein Feld privat war, wurden wir es gewohnt, eine Zeile vor dem Attributnamen (_) hinzuzufügen. Aber jetzt können wir <声> verwenden, um die wirklichen privaten Attribute zu deklarieren:

#

const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;

Verwenden Sie <替> statt

6. ?? ||

   Verwenden Sie <算>, um die
zu ersetzen, um zu prüfen, ob der Wert der linken Seite des Vermögens null oder undefiniert ist, und dann den Wert der rechten Seite zurückzugeben.

Beispiel: <> ?? || Im obigen Beispiel gibt der Wert der linken Variablen nicht null oder unterteilt, der

-Operator gibt den Wert der linken Variablen links zurück.

Andernfalls gibt das berechnende Symbol den Wert der rechten Variablen zurück, wenn der Wert der linken Variablen null oder undefiniert ist.

const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;

??

Strings konvertiert in Zahlen

7. Viele Entwickler verwenden

   Funktionen, um die Zeichenfolge in Zahlen zu konvertieren, aber Sie können die

   -Recher Symbole verwenden, um die gleichen Ergebnisse zu erzielen.

Beide Methoden sind effektiv, aber die Computersymbole sind einfacher und klarer.

parseInt()

Die kurze Methode der Anzahl der Zahlen, die

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992

ersetzen,

Anstatt die -Funktion zu verwenden, um die Zahlen nach unten zu geben, ist es besser, die Position nicht -
8. Operator als Abkürzung zu verwenden:

   Math.floor()

   Ich empfehle Ihnen nicht, alle in diesem Artikel beschriebenen Techniken zu verwenden. Einige Methoden können Ihren Code beschädigen, aber es ist wichtig, sie zu verstehen.

Danke, dass Sie diesen Artikel gelesen haben! Ich hoffe, Sie haben etwas Nützliches gelernt. Bitte freuen Sie sich auf den zweiten Teil! ?

Das obige ist der detaillierte Inhalt vonJavaScript -Funktionen, die Sie möglicherweise nicht kennen. Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!