Heim > Web-Frontend > js-Tutorial > Vorbereitung auf ECMascript 6: Neue Zahlenmethoden

Vorbereitung auf ECMascript 6: Neue Zahlenmethoden

Joseph Gordon-Levitt
Freigeben: 2025-02-15 09:03:12
Original
513 Leute haben es durchsucht

Vorbereitung auf ECMascript 6: Neue Zahlenmethoden

Dieser Artikel behandelt neue und verbesserte Zahlenmethoden in ES6 (ECMascript 6).

Es ist Teil einer Reihe zu den neuen Funktionen von ES6, in der wir auch neue Methoden für die String- und Array -Datentypen erörtert haben, aber auch neue Arten von Daten wie MAP und Schwächen.

Ich werde Sie mit den neuen Methoden und Konstanten, die dem Zahlendatentyp hinzugefügt wurden, vorstellen. Einige der Zahlenmethoden sind, wie wir sehen werden, überhaupt nicht neu, aber sie wurden verbessert und/oder unter das richtige Objekt bewegt (z. B. isnan ()). Wie immer werden wir auch das neue Wissen mit einigen Beispielen in die Tat umsetzen. Also, ohne weiteres, lass uns anfangen.

Key Takeaways

  • ES6 führte mehrere neue Zahlenmethoden ein, darunter Number.IsTeGerger (), number.isnan (), number.isfinite (), number.ISSAFINTEger (), number.ParseInt () und Number.Parsefloat ().
  • number.issinterger () prüft, ob der bestandene Wert eine Ganzzahl, Nummer ist.
  • number.ISSAFINTEERGER () Tests, ob der übergebene Wert eine Nummer ist, die eine sichere ganze Zahl ist, die als Ganzzahl definiert wird, die genau als IEEE-754-Doppelgenauigkeitsnummer dargestellt werden kann.
  • number.parseInt () und number.parsefloat () sind nicht neu, wurden jedoch zum Zweck der Modularisierung von Globalen unter das Zahlenobjekt verschoben. Sie analysieren ein String -Argument und geben eine Ganzzahl bzw. eine schwimmende Punktzahl zurück.
  • ES6 führte auch zwei verwandte Konstantwerte ein: number.max_safe_integer und nummer
  • number.issinterger ()

Die erste Methode, die ich abdecken möchte, ist die Nummer. Issinterger (). Es ist ein Neuzugang zu JavaScript, und dies ist etwas, das Sie in der Vergangenheit selbst definiert und verwendet haben. Es bestimmt, ob der an die Funktion übergebene Wert eine Ganzzahl ist oder nicht. Diese Methode gibt true zurück, wenn der übergebene Wert eine Ganzzahl ist, und ansonsten falsch. Die Implementierung dieser Methode war ziemlich einfach, aber es ist immer noch gut, sie nativ zu haben. Eine der möglichen Lösungen, um diese Funktion neu zu erstellen, ist:

Nur zum Spaß habe ich versucht, diese Funktion neu zu erstellen und endete mit einem anderen Ansatz:
<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && number % 1 === 0;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Beide Funktionen sind gut und nützlich, respektieren jedoch die ECMAScript 6 -Spezifikationen nicht. Wenn Sie diese Methode also Polyfülle haben möchten, benötigen Sie etwas Komplexeres, wie wir in Kürze sehen werden. Beginnen wir für den Moment, indem wir die Zahlensyntax entdecken. Issinterger ():
<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && Math.floor(number) === number;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Das Zahlenargument repräsentiert den Wert, den Sie testen möchten.
<span>Number.isInteger(number)
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Einige Beispiele für die Verwendung dieser Methode sind unten dargestellt:

Eine Live -Demo des vorherigen Code ist unten angezeigt und ist auch bei JSBIN erhältlich.
<span>// prints 'true'
</span><span>console.log(Number.isInteger(19));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isInteger(3.5));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isInteger([1, 2, 3]));
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Die Methode wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, können Sie ein Polyfill verwenden, wie das im Mozilla Developer -Netzwerk auf der Seite Methoden verfügbar. Dies wird auch unten für Ihre Bequemlichkeit reproduziert:

<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && number % 1 === 0;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

number.isnan ()

Wenn Sie in der Vergangenheit einen JavaScript -Code geschrieben haben, sollte diese Methode für Sie nicht neu sein. Seit einiger Zeit hat JavaScript eine Methode namens isnan (), die über das Fensterobjekt freigelegt wird. Diese Methode testet, wenn ein Wert gleich NAN ist. In diesem Fall gibt er wahr oder auf andere Weise falsch zurück. Das Problem mit window.isnan () ist, dass es ein Problem darin hat, dass es auch für Werte, die in eine Zahl konvertiert hat, zu einer Nummer zurückgibt. Um Ihnen eine konkrete Vorstellung von diesem Problem zu geben, geben alle folgenden Aussagen wahr:

<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && Math.floor(number) === number;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Was Sie möglicherweise benötigen, ist eine Methode, die nur dann wahr zurückgibt, wenn der NAN -Wert übergeben wird. Aus diesem Grund hat die ECMAScript 6 die Nummer isnan () Methode eingeführt. Die Syntax ist so ziemlich das, was Sie erwarten würden:

<span>Number.isInteger(number)
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Hier ist der Wert der Wert, den Sie testen möchten. Einige Beispielanwendungen dieser Methode sind unten angezeigt:

<span>// prints 'true'
</span><span>console.log(Number.isInteger(19));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isInteger(3.5));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isInteger([1, 2, 3]));
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Wie Sie sehen können, testen wir die gleichen Werte, wir erhalten unterschiedliche Ergebnisse.

Eine lebende Demo des vorherigen Snippets ist unten gezeigt und ist auch bei JSBIN erhältlich.

Die Methode wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Wenn Sie andere Browser unterstützen möchten, ist eine sehr einfache Polyfill für diese Methode Folgendes:

<span>if (!Number.isInteger) {
</span>  <span>Number.isInteger = function isInteger (nVal) {
</span>    <span>return typeof nVal === 'number' &&
</span>      <span>isFinite(nVal) &&
</span>      nVal <span>> -9007199254740992 &&
</span>      nVal <span>< 9007199254740992 &&
</span>      <span>Math.floor(nVal) === nVal;
</span>  <span>};
</span><span>}
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Der Grund, warum dies funktioniert

number.isfinite ()

Diese Methode erzählt die gleiche Geschichte wie die vorherige. In JavaScript gibt es eine Methode namens window.isfinite (), die testet, wenn ein übergebener Wert eine endliche Zahl ist oder nicht. Leider gibt es auch für Werte, die

in eine Zahl konvertiert, eine endliche Zahl zurück. Beispiele für dieses Problem werden nachstehend nachgewiesen:

Aus diesem Grund gibt es in ECMascript 6 eine Methode namens isfinite (), die zur Anzahl gehört. Seine Syntax ist die folgende:

<span>// prints 'true'
</span><span>console.log(window.isNaN(0/0));
</span>
<span>// prints 'true'
</span><span>console.log(window.isNaN('test'));
</span>
<span>// prints 'true'
</span><span>console.log(window.isNaN(undefined));
</span>
<span>// prints 'true'
</span><span>console.log(window.isNaN({prop: 'value'}));
</span>
Nach dem Login kopieren

Hier ist der Wert der Wert, den Sie testen möchten. Wenn Sie die gleichen Werte aus dem vorherigen Snippet testen, können Sie feststellen, dass die Ergebnisse unterschiedlich sind:

<span>Number.isNaN(value)
</span>
Nach dem Login kopieren

Eine lebende Demo des vorherigen Snippets ist unten gezeigt und ist auch bei JSBIN erhältlich.

<span>// prints 'true'
</span><span>console.log(Number.isNaN(0/0));
</span>
<span>// prints 'true'
</span><span>console.log(Number.isNaN(NaN));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isNaN(undefined));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isNaN({prop: 'value'}));
</span>
Nach dem Login kopieren
Die Methode wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Auf der Seite der Methode finden Sie auf MDN eine Polyfill dafür.

number.ISSAFINTEERGER ()

Die Methode der Nummer.ISSAFINTEERGER () ist eine völlig neue Ergänzung zu ES6. Es wird getestet, ob der übergebene Wert eine Zahl ist, die eine sichere Ganzzahl ist. In diesem Fall gibt er True zurück. Eine sichere Ganzzahl ist definiert als eine Ganzzahl, die beide die folgenden zwei Bedingungen erfüllt:

  • Die Zahl kann genau als IEEE-754 doppelte Präzisionsnummer
  • dargestellt werden
  • Die IEEE-754-Darstellung der Zahl kann nicht das Ergebnis des Abrundens einer anderen Ganzzahl für die IEEE-754-Darstellung sein.

Basierend auf dieser Definition sind sichere Ganzzahlen alle Ganzzahlen von -(2 53 -1) einschließlich 2 53 -1 inklusive. Diese Werte sind wichtig und wir werden sie am Ende dieses Abschnitts ein wenig mehr besprechen.

Die Syntax dieser Methode lautet:

<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && number % 1 === 0;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Hier ist der Wert der Wert, den Sie testen möchten. Einige Beispielanwendungen dieser Methode sind unten dargestellt:

<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && Math.floor(number) === number;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Eine Live -Demo dieses Code ist unten angezeigt und auch bei JSBIN verfügbar.

Die Zahl.ISSAFINTEERGER () wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Eine Polyfill für diese Methode, die von Paul Miller aus ES6-Shim extrahiert wurde, lautet:

<span>Number.isInteger(number)
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Beachten Sie, dass diese Polyfill auf der Zahl beruht. Issinger () Methode, die zuvor diskutiert wurde, müssen Sie also auch die Letzteres Polyfülle haben, um diese zu verwenden.

ecmascript 6 führte auch zwei verwandte konstante Werte ein: number.max_safe_integer und number.min_safe_integer. Ersteres repräsentiert die maximale sichere Ganzzahl in JavaScript -dh 2 53 -1 -während letzteres die minimale sichere Ganzzahl, nämlich -(2 53 -1). Wie Sie vielleicht bemerken, sind dies die gleichen Werte, die ich zuvor zitiert habe.

number.parseInt () und number.parsefloat ()

Die Nummer.ParseInt () und number.Parsefloat () Methoden werden im selben Abschnitt behandelt alte globale Version. Sie können sie also auf die gleiche Weise verwenden, wie Sie es bisher gemacht haben, und Sie können die gleichen Ergebnisse erwarten. Der Zweck des Hinzufügens dieser Methoden zur Anzahl ist die Modularisierung von Globalen.

Aus Gründen der Vollständigkeit melde ich ihre Syntax:

<span>// prints 'true'
</span><span>console.log(Number.isInteger(19));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isInteger(3.5));
</span>
<span>// prints 'false'
</span><span>console.log(Number.isInteger([1, 2, 3]));
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Hier repräsentiert String den Wert, den Sie analysieren möchten, und Radix ist der Radix, den Sie verwenden möchten, um die Zeichenfolge zu konvertieren.

Das folgende Snippet zeigt einige Beispiele verwendet:

<span>if (!Number.isInteger) {
</span>  <span>Number.isInteger = function isInteger (nVal) {
</span>    <span>return typeof nVal === 'number' &&
</span>      <span>isFinite(nVal) &&
</span>      nVal <span>> -9007199254740992 &&
</span>      nVal <span>< 9007199254740992 &&
</span>      <span>Math.floor(nVal) === nVal;
</span>  <span>};
</span><span>}
</span>
Nach dem Login kopieren
Nach dem Login kopieren

Eine Live -Demo dieses Codes wird unten angezeigt und ist auch bei JSBIN erhältlich.

Diese Methoden werden mit Ausnahme des Internet Explorer im Knoten und in allen modernen Browsern unterstützt. Falls Sie sie Polyfülle haben möchten, können Sie einfach ihre zugehörige globale Methode wie unten aufgeführt bezeichnen:

<span>Number.isInteger = Number.isInteger || function (number) {
</span>  <span>return typeof number === 'number' && number % 1 === 0;
</span><span>};
</span>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Browserunterstützung

Die folgende Grafik zeigt die Browserunterstützung für Erweiterungen zum integrierten Zahlenobjekt in ES6. Maus über die Kisten, um die prozentuale Verwendung der jeweiligen Browserversionen zu sehen.

Kann ich ES6-Number verwenden? Daten zur Unterstützung der ES6-Number-Funktion in den wichtigsten Browsern von caniuse.com.

ES6 -Zahlenmethoden: Verpackung

In diesem Tutorial haben wir die neuen Methoden und Konstanten in ECMascript 6 behandelt, die mit dem Zahlendatentyp funktionieren. Es ist erwähnenswert, dass ES6 auch eine weitere Konstante hinzugefügt hat, die ich bisher noch nicht erwähnt habe. Dies ist Zahl.epsilon und repräsentiert den Unterschied zwischen einem und dem kleinsten Wert, der größer als einen ist, der als Zahl dargestellt werden kann. 🎜> häufig gestellte Fragen (FAQs) zu ES6 -Zahlenmethoden

Was sind die neuen ES6 -Zahlenmethoden und wie funktionieren sie? Dazu gehören number.isfinite (), number.isineger (), number.isnan (), number.parsefloat () und number.parseInt (). Jede dieser Methoden führt eine bestimmte Funktion aus. Zum Beispiel prüft number.isfinite (), ob ein Wert eine endliche Nummer ist, während number.isintereger () prüft, ob ein Wert eine Ganzzahl ist. Isnan () prüft, ob ein Wert Nan (nicht eine Nummer) und number.Parsefloat () und number.parseInt () ein String -Argument analysieren und eine schwimmende Punktnummer bzw. eine Ganzzahl zurückgeben.

Wie funktioniert die Methode der Zahl.epsilon in ES6? Es ist besonders nützlich, wenn Sie die schwimmenden Punktzahlen für die Gleichheit vergleichen. Aufgrund der Art und Weise, wie schwimmende Punktzahlen in Computern dargestellt werden, sind sie möglicherweise nicht genau gleich, selbst wenn sie zu sein scheinen. Number.epsilon kann verwendet werden, um zu prüfen, ob die Differenz zwischen zwei Zahlen geringer ist als dieses kleinste Intervall, was darauf hinweist, dass sie effektiv gleich sind. 🎜>

Die Zahl.ISSAFININGEger () -Methode in ES6 wird verwendet, um festzustellen, ob ein Wert eine sichere Ganzzahl ist. Eine sichere Ganzzahl ist eine Zahl, die genau als IEEE -754 -Doppelgenauigkeitszahl dargestellt werden kann, was bedeutet Stellen Sie sicher, dass eine Zahl in JavaScript genau dargestellt werden kann, was bei bestimmten mathematischen Operationen wichtig sein kann.

Wie unterscheidet sich die Methode nummer.parseInt () von der globalen ParseInt () -Funktion? Teil des Zahlenobjekts. Dies bedeutet, dass Sie es eher als Methode für das Zahlenobjekt als als eigenständige Funktion aufrufen können. Die Funktionalität ist gleich - sie wandelt eine Zeichenfolge in eine Ganzzahl an einem angegebenen Radix oder einer bestimmten Basis um. Number.max_safe_integer und number.min_safe_integer Constanten in ES6 repräsentieren die maximalen und minimalen sicheren Ganzzahlwerte in JavaScript. Eine sichere Ganzzahl ist eine, die genau als IEEE-754-Doppelpräzisionsnummer dargestellt werden kann. Diese Konstanten sind nützlich, wenn Sie überprüfen müssen, ob sich eine Zahl innerhalb des sicheren Ganzzahlbereichs befindet. Dies kann bei bestimmten mathematischen Operationen wichtig sein. >

Die Zahl.Isnan () -Methode in ES6 wird verwendet, um festzustellen, ob ein Wert NAN (nicht eine Zahl) ist. Dies unterscheidet sich von der globalen Isnan () -Funktion, die sein Argument vor dem Testen in eine Zahl umwandelt. Isnan () führt diese Konvertierung nicht durch, sodass es nur true zurückgibt, wenn das Argument der tatsächliche NAN -Wert ist, und nicht, wenn das Argument ein Wert ist, der nicht in eine Zahl konvertiert werden kann.

was Ist die Verwendung von nummer.isfinite () Methode in ES6? Dies unterscheidet sich von der globalen Funktion isfinite (), die sein Argument vor dem Testen in eine Zahl umwandelt. Number.isfInite () führt diese Konvertierung nicht durch, sodass es nur true zurückgibt, wenn das Argument eine endliche Zahl ist, und nicht, wenn das Argument ein Wert ist, der nicht in eine Zahl konvertiert werden kann. Die number.Parsefloat () -Methode funktioniert in ES6? Dies bedeutet, dass Sie es eher als Methode für das Zahlenobjekt als als eigenständige Funktion aufrufen können. Die Funktionalität ist gleich - sie analysiert ein String -Argument und gibt eine schwimmende Punktzahl zurück. Die Methode in ES6 wird verwendet, um festzustellen, ob ein Wert eine Ganzzahl ist. Diese Methode gibt true zurück, wenn der Wert eine Zahl ist, die nicht unendlich ist, nicht NAN, und ohne eine fraktionierte Komponente ausgedrückt werden kann. Es ist nützlich, wenn Sie überprüfen müssen, ob eine Zahl eine Ganzzahl ist, was bei bestimmten mathematischen Operationen wichtig sein kann.

Was sind die praktischen Anwendungen der neuen ES6 -Zahlenmethoden? Sie können verwendet werden, um zu prüfen, ob eine Zahl endlich, eine ganze Zahl, Nan oder eine sichere Ganzzahl ist, und um Strings in Zahlen zu analysieren. Diese Methoden können besonders nützlich für mathematische Operationen, Datenvalidierung und überall dort, wo eine genaue Kontrolle über Zahlen erforderlich ist.

Das obige ist der detaillierte Inhalt vonVorbereitung auf ECMascript 6: Neue Zahlenmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage