TOC

Wie man mit Operatoren in JavaScript rechnet

Einführung

Mathematische Operationen gehören zu den grundlegendsten und universellsten Merkmalen jeder Programmiersprache. In JavaScript werden Zahlen häufig für allgemeine Aufgaben verwendet, z. B. zum Ermitteln der Größe des Browserfensters, zum Abrufen des endgültigen Preises einer Geldtransaktion und zum Berechnen des Abstands zwischen Elementen in einem Website-Dokument.

Ein umfassendes Verständnis der Mathematik ist zwar keine Voraussetzung, um ein fähiger Entwickler zu sein, es ist jedoch wichtig zu wissen, welche Arten von Operationen in JavaScript verfügbar sind und wie Mathematik als Werkzeug zum Ausführen praktischer Aufgaben eingesetzt werden kann.

Im Gegensatz zu anderen Programmiersprachen hat JavaScript nur einen number data type; Es wird beispielsweise nicht zwischen Ganzzahlen (positive oder negative ganze Zahlen) und Gleitkommazahlen (Zahlen mit einem Dezimalpunkt) unterschieden.

In diesem Lernprogramm gehen wir auf arithmetische Operatoren, Zuweisungsoperatoren und die Reihenfolge der Operationen ein, die bei Datentypen mit JavaScript-Nummern verwendet werden.

Rechenzeichen

  • Arithmetische Operatoren * sind Symbole, die eine mathematische Operation angeben und einen Wert zurückgeben. In der Gleichung "3 + 7 = 10 +" ist "++" die Syntax, die für Addition steht.

In JavaScript gibt es viele bekannte Operatoren aus der Grundrechenart sowie einige zusätzliche Operatoren, die sich speziell auf die Programmierung beziehen.

Hier ist eine Referenztabelle von JavaScript-Arithmetikoperatoren.

Operator Syntax Example Definition

Addition

+

x + y

Sum of x and y

Subtraction

-

x - y

Difference of x and y

Multiplication

*

x * y

Product of x and y

Division

/

x / y

Quotient of x and y

Modulo

%

x % y

Remainder of x / y

Exponentiation

**

x ** y

x to the y power

Increment

x++

x plus one

Decrement

--

x--

x minus one

Wir werden in diesem Artikel auf jeden dieser Operatoren näher eingehen.

Addition und Subtraktion

Die Operatoren * Addition * und * Subtraktion * sind in JavaScript verfügbar und können verwendet werden, um die Summe und Differenz der numerischen Werte zu ermitteln. In JavaScript ist ein Taschenrechner integriert, und mathematische Operationen können direkt in der Konsole ausgeführt werden.

Wir können einige einfache Additionen mit Zahlen durchführen, zum Beispiel die Addition von + 10 + und + 20 + unter Verwendung des Pluszeichens (+).

10 + 20;
Output30

Wir können nicht nur mit einfachen Zahlen rechnen, sondern auch Variablen Zahlen zuweisen und dieselben Berechnungen durchführen. In diesem Fall weisen wir die numerischen Werte "+ x " und " y " zu und setzen die Summe in " z +".

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);
Output30

Ebenso verwenden wir das Minuszeichen ("+ - +"), um Zahlen oder Variablen, die Zahlen darstellen, zu subtrahieren.

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);
Output10

Wir können auch negative Zahlen und Gleitkommazahlen (Dezimalzahlen) addieren und subtrahieren.

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);
Output-7.7

Eine interessante Sache, die Sie in JavaScript beachten sollten, ist das Ergebnis des Hinzufügens einer Nummer und einer string . Wir wissen, dass "1 + 1 +" gleich " 2 +" sein sollte, aber diese Gleichung wird unerwartete Ergebnisse haben.

let x = 1 + "1";

console.log(x);
typeof x;
Output11
'string'

Anstatt die beiden Zahlen zu addieren, konvertiert JavaScript die gesamte Anweisung in einen String und concatenate Sie zusammen. Es ist wichtig, mit dynamisch typisiertem JavaScript vorsichtig umzugehen, da dies zu den gewünschten Ergebnissen führen kann.

Ein häufiger Grund für die Verwendung von Addition oder Subtraktion in JavaScript besteht darin, zu einer ID abzüglich der Pixelhöhe einer festen Navigationsleiste zu scrollen.

function scrollToId() {
   const navHeight = 60;
   window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

Wenn Sie im obigen Beispiel auf eine ID klicken, werden 60 Pixel über der ID angezeigt.

Addition und Subtraktion sind zwei der häufigsten mathematischen Gleichungen, die Sie in JavaScript verwenden werden.

Multiplikation und Division

Die Operatoren * Multiplikation * und * Division * sind auch in JavaScript verfügbar und werden verwendet, um das Produkt und den Quotienten von numerischen Werten zu finden.

Ein Stern ("+ * +") wird verwendet, um den Multiplikationsoperator darzustellen.

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);
Output100

Die Multiplikation kann verwendet werden, um den Preis eines Artikels nach Anwendung der Umsatzsteuer zu berechnen.

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
totalPrice.toFixed(2);

console.log("Total:", totalPrice);
OutputTotal: 28.67

Ein Schrägstrich ("+ / +") wird verwendet, um den Divisionsoperator darzustellen.

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);
Output4

Die Division ist besonders nützlich, wenn Sie die Zeit berechnen, z. B. die Anzahl der Stunden in Minuten oder den Prozentsatz der korrekten Antworten, die in einem Test abgeschlossen wurden.

Modulo

Ein etwas weniger bekannter arithmetischer Operator ist der Modulo-Operator (manchmal auch Modulo-Operator genannt), der den Rest eines Quotienten nach der Division berechnet. Modulo wird durch ein Prozentzeichen (+% +) dargestellt.

Als Beispiel wissen wir, dass + 3 + genau dreimal in + 9 + geht und es keinen Rest gibt.

9 % 3;
Output0

Wir können den Modulo-Operator verwenden, um zu bestimmen, ob eine Zahl gerade oder ungerade ist, wie mit dieser Funktion gezeigt:

// Initialize function to test if a number is even
const isEven = x => {
   // If the remainder after dividing by two is 0, return true
   if (x % 2 === 0) {
       return true;
   }
   // If the number is odd, return false
   return false;
}

// Test the number
isEven(12);
Outputtrue

Im obigen Beispiel wird "+ 12 " gleichmäßig in " 2 +" geteilt, daher ist es eine gerade Zahl.

In der Programmierung wird modulo häufig in Verbindung mit bedingten Anweisungen zur Ablaufsteuerung verwendet.

Potenzierung

  • Exponentiation * ist einer der neueren Operatoren in JavaScript und ermöglicht es uns, die Potenz einer Zahl anhand ihres Exponenten zu berechnen. Die Syntax für die Exponentiation besteht aus zwei Sternchen in Folge (+ ** +).

10 nach der fünften Potenz oder 10 ^ 5 ist so geschrieben:

10 ** 5;
Output100000

"10 ** 5 +" entspricht " 10 " multipliziert mit " 10 +" fünfmal:

10 * 10 * 10 * 10 * 10;

Eine andere Möglichkeit, dies zu schreiben, ist die Methode + Math.pow () +.

Math.pow(10, 5);
Output100000

Die Verwendung des Potenzierungsoperators ist eine übersichtliche Methode, um die Potenz einer bestimmten Zahl zu ermitteln. Wie üblich ist es jedoch wichtig, bei der Auswahl zwischen einer Methode und einem Operator den Stil Ihrer Codebasis zu berücksichtigen.

Inkrement und Dekrement

Die Operatoren * Increment * und * Decrement * erhöhen oder verringern den numerischen Wert einer Variablen um eins. Sie werden durch zwei Pluszeichen () oder zwei Minuszeichen (+ - +) dargestellt und werden häufig in Verbindung mit https://www.digitalocean.com/community/tutorials/how-to verwendet -construct-for-loops-in-Javascript # for-loop [Schleifen].

Beachten Sie, dass Inkrement- und Dekrement-Operatoren nur für Variablen verwendet werden können. Der Versuch, sie für eine unformatierte Nummer zu verwenden, führt zu einem Fehler.

7++
OutputUncaught ReferenceError: Invalid left-hand side expression in postfix operation

Inkrement- und Dekrement-Operatoren können als Präfix- oder Postfix-Operation klassifiziert werden, je nachdem, ob der Operator vor oder nach der Variablen steht oder nicht.

Zuerst können wir die Präfixinkrementierung mit +++ x + schreiben.

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);
Output8

Der Wert von "+ x " wurde um eins erhöht. Um den Unterschied zu erkennen, testen wir die Postfix-Inkrementierung mit ` y +`.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);
Output7

Der Wert von "+ y +" wurde bei der Postfix-Operation nicht erhöht. Dies liegt daran, dass der Wert erst erhöht wird, nachdem der Ausdruck ausgewertet wurde. Wenn Sie die Operation zweimal ausführen, wird der Wert erhöht.

let y = 7;

y++;
y++;

console.log(y);
Output8

Der Inkrement- oder Dekrement-Operator wird am häufigsten in einer Schleife angezeigt. In diesem "+ für " - Schleifenbeispiel führen wir die Operation zehnmal aus, beginnend mit " 0 " und erhöhen den Wert bei jeder Iteration um " 1 +".

// Run a loop ten times
for (let i = 0; i < 10; i++) {
 console.log(i);
}
Output0
1
2
3
4
5
6
7
8
9

Der obige Code zeigt eine Iteration durch eine Schleife, die durch die Verwendung des Inkrement-Operators erreicht wird.

Wir können uns "+ x +" als Abkürzung für "+ x = x + 1 " und " x - " als Abkürzung für " x = x - 1 +" vorstellen.

Zuweisungsoperatoren

Einer der am häufigsten verwendeten Operatoren ist der Operator * assign *, den wir bereits gesehen haben und der durch ein Gleichheitszeichen (+ = +) dargestellt wird. Wir verwenden "+ = +", um einer Variablen auf der linken Seite einen Wert auf der rechten Seite zuzuweisen.

// Assign 27 to age variable
let age = 27;

Zusätzlich zum Standardzuweisungsoperator verfügt JavaScript über * zusammengesetzte Zuweisungsoperatoren *, die einen arithmetischen Operator mit + = + kombinieren.

Beispielsweise beginnt der Additionsoperator mit dem ursprünglichen Wert und fügt einen neuen Wert hinzu.

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);
Output30

In diesem Fall ist "+ age + = 3 " dasselbe wie " age = age + 3 +".

Alle arithmetischen Operatoren können mit Zuweisungen kombiniert werden, um zusammengesetzte Zuweisungsoperatoren zu erstellen. Unten finden Sie eine Referenztabelle der Zuweisungsoperatoren in JavaScript.

Operator Syntax

Assignment

=

Addition assignment

+=

Subtraction assignment

-=

Multiplication assignment

*=

Division assignment

/=

Remainder assignment

%=

Exponentiation assignment

**=

Verknüpfungszuweisungsoperatoren werden häufig mit Schleifen verwendet, ähnlich wie Inkrementierung und Dekrementierung, und werden verwendet, wenn Gleichungen wiederholt oder automatisiert werden müssen.

Operator-Vorrang

Obwohl wir von links nach rechts lesen, werden Operatoren wie in der regulären Mathematik in der Rangfolge bewertet.

Im folgenden Beispiel hat die Multiplikation eine höhere Priorität als die Addition, die das Ergebnis der Gleichung bestimmt.

// First multiply 3 by 5, then add 10
10 + 3 * 5;
Output25

Wenn wir stattdessen zuerst die Additionsoperation ausführen möchten, sollten wir sie in Klammern gruppieren, die immer die höchste Priorität haben.

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;
Output65

Nachfolgend finden Sie eine Referenztabelle der Operator-Priorität von arithmetischen Operatoren in JavaScript, von der höchsten zur niedrigsten. Bei der Inkrementierung und Dekrementierung hat Postfix eine höhere Priorität als das Präfix.

Inkrementierung / Dekrementierung, Multiplikation / Division und Addition / Subtraktion haben die gleiche Priorität.

Operator Syntax

Parentheses

()

Incrementation

Decrementation

--

Exponentiation

**

Multiplication

*

Division

/

Addition

+

Subtraction

-

Die Operatorrangfolge umfasst nicht nur arithmetische Operatoren, sondern auch Zuweisungsoperatoren, logische Operatoren, bedingte Operatoren und mehr. Eine vollständige Liste finden Sie unter operator priority on Mozilla Developer Network (MDN).

Fazit

In diesem Artikel haben wir arithmetische Operatoren und Syntax behandelt, darunter viele bekannte mathematische Operatoren und einige programmspezifische.

Darüber hinaus haben wir gelernt, wie Sie Arithmetik und Zuweisung kombinieren, um zusammengesetzte Zuweisungsoperatoren zu erstellen, sowie die Reihenfolge der Operationen in JavaScript.

Related