diff options
Diffstat (limited to 'files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html')
| -rw-r--r-- | files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html | 247 |
1 files changed, 247 insertions, 0 deletions
diff --git a/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html b/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html new file mode 100644 index 0000000000..6a20e85b79 --- /dev/null +++ b/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html @@ -0,0 +1,247 @@ +--- +title: Logische Operatoren +slug: Web/JavaScript/Reference/Operators/Logische_Operatoren +tags: + - JavaScript + - Logic + - Logical Operators + - Not + - Operator + - Reference + - and + - or +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Logische Operatoren werden typischerweise im Zusammenhang mit {{jsxref("Boolean")}} (logischen) Werten verwendet. Die Operatoren <code>&&</code> (Logisches UND) und <code>||</code> (Logisches ODER) geben dabei den Wert von einem der Operanden zurück. Sind die Operanden mit nicht-booleschen Werten belegt, geben diese Operatoren entsprechend nicht-boolesche Werte zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>In der folgenden Tabelle werden die logischen Operatoren erläutert.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Verwendung</th> + <th>Beschreibung</th> + </tr> + <tr> + <td>Logisches UND (<code>&&</code>)</td> + <td><code><em>ausdruck1</em> && <em>ausdruck2</em></code></td> + <td>Gibt <code>ausdruck1</code> zurück, wenn er zu <code>false</code> konvertiert werden kann; anderfalls wird <code>ausdruck2</code> zurückgegeben. Sind beide Operanden <code>true</code>, gibt <code>&&</code> <code>true</code> zurück, Andernfalls <code>false</code>.</td> + </tr> + <tr> + <td>Logisches ODER (<code>||</code>)</td> + <td><code><em>ausdruck1</em> || <em>ausdruck2</em></code></td> + <td>Gibt <code>ausdruck1</code> zurück, wenn er zu <code>true</code> konvertiert werden kann; andernfalls wird <code>ausdruck2</code> zurückgegeben. Ist einer der Operanden <code>true</code>, gibt <code>||</code> <code>true</code> zurück.</td> + </tr> + <tr> + <td>Logisches NICHT (<code>!</code>)</td> + <td><code>!<em>ausdruck</em></code></td> + <td>Gibt <code>false</code> zurück, wenn der Operand zu <code>true</code> konvertiert werden kann. Andernfalls wird <code>true</code> zurückgegeben.</td> + </tr> + </tbody> +</table> + +<p>Wenn ein Wert zu <code>true</code> konvertiert werden kann, wird er {{Glossary("truthy")}} genannt. Wenn ein Wert zu <code>false</code> konvertiert werden kann, wird er {{Glossary("falsy")}} genannt.</p> + +<p>Beispiele für Ausdrücke, die zu <code>false</code> konvertiert werden können:</p> + +<ul> + <li><code>null</code></li> + <li>NaN</li> + <li><code>0</code></li> + <li>leerer String (<code>""</code> oder <code>''</code>)</li> + <li><code>undefined</code></li> +</ul> + +<p>Auch wenn die Operatoren <code>&&</code> und <code>||</code> mit nichtbooleschen Operanden verwendet werden können, gehören sie trotzdem zur Gruppe der logischen Operatoren, da ihre Rückgabewerte immer zu booleschen Werten konvertiert werden können.</p> + +<h3 id="Kurschlussauswertung_(Short-Circuit_Evaluation)">Kurschlussauswertung (Short-Circuit Evaluation)</h3> + +<p>Logische Ausdrücke werden von links nach rechts ausgewertet und hierbei wird anhand der folgenden Regeln getestet, ob Kurzschlussauswertungen möglich sind:</p> + +<ul> + <li><code>false && (<em>irgendwas)</em></code> wird kurzerhand zu false.</li> + <li><code>true || (<em>irgendwas)</em></code> wird kurzerhand zu true.</li> +</ul> + +<p>Die Regeln der Logik garantieren, dass diese Auswertungen immer korrekt sind. Zu beachten ist, dass der <em><code>irgendwas</code></em> Teil nicht ausgewertet wird, so dass keine Seiteneffekte die von diesem Teil ausgehen ausgeführt werden. Zu beachten ist zudem, dass der <em><code>irgendwas</code></em> Teil ein einzelner Ausdruck ist (wie die Klammern anzeigen).</p> + +<p>Beispielhaft betrachten wir die folgenden äquivalenten Funktionen:</p> + +<pre class="brush: js">function shortCircuitEvaluation() { + // Logisches ODER (||) + doSomething() || doSomethingElse(); + + // Logisches UND (&&) + doSomething() && doSomethingElse(); +} + +function equivalentEvaluation() { + + // Logisches ODER (||) + var orFlag = doSomething(); + if (!orFlag) { + doSomethingElse(); + } + + // Logisches UND (&&) + var andFlag = doSomething(); + if (andFlag) { + doSomethingElse(); + } +} +</pre> + +<p>Die folgenden Ausdrücke sind aufgrund der <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operatorrangfolgen</a> nicht äquivalent und betont, wie wichtig es ist, dass der rechte Operand ein einzelner Ausdruck ist (gruppiert, falls in Klammern erforderlich).</p> + +<pre class="brush: js">false && true || true // wird zu true +false && (true || true) // wird zu false</pre> + +<h3 id="Logisches_UND_()"><a id="Logical_AND" name="Logical_AND">Logisches UND (<code>&&</code>)</a></h3> + +<p>Im Folgenden sind Beispiele des <code>&&</code> (logisches UND) Operators zu sehen.</p> + +<pre class="brush: js">a1 = true && true // t && t wird zu true +a2 = true && false // t && f wird zu false +a3 = false && true // f && t wird zu false +a4 = false && (3 == 4) // f && f wird zu false +a5 = 'Cat' && 'Dog' // t && t wird zu "Dog" +a6 = false && 'Cat' // f && t wird zu false +a7 = 'Cat' && false // t && f wird zu false +a8 = '' && false // f && f wird zu "" +a9 = false && '' // f && f wird zu false +</pre> + +<h3 id="Logisches_ODER_()"><a name="Logical_OR">Logisches ODER (<code>||</code>)</a></h3> + +<p>Im Folgenden sind Beispiele des <code>||</code> (logisches ODER) Operators zu sehen.</p> + +<pre class="brush: js">o1 = true || true // t || t wird zu true +o2 = false || true // f || t wird zu true +o3 = true || false // t || f wird zu true +o4 = false || (3 == 4) // f || f wird zu false +o5 = 'Cat' || 'Dog' // t || t wird zu "Cat" +o6 = false || 'Cat' // f || t wird zu "Cat" +o7 = 'Cat' || false // t || f wird zu "Cat" +o8 = '' || false // f || f wird zu false +o9 = false || '' // f || f wird zu "" +</pre> + +<h3 id="Logisches_NICHT_(!)"><a name="Logical_NOT">Logisches NICHT (<code>!</code>)</a></h3> + +<p>Im Folgenden sind Beispiele des <code>!</code> (logisches NICHT) Operators zu sehen.</p> + +<pre class="brush: js">n1 = !true // !t wird zu false +n2 = !false // !f wird zu true +n3 = !"Cat" // !t wird zu false +</pre> + +<h3 id="Konvertierungsregeln">Konvertierungsregeln</h3> + +<h4 id="Konvertierung_von_UND_zu_ODER">Konvertierung von UND zu ODER</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>ist äquivalent zum folgenden Ausdruck:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Konvertierung_von_ODER_zu_UND">Konvertierung von ODER zu UND</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>ist äquivalent zu folgendem Ausdruck:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Negierung_des_logischen_NICHT">Negierung des logischen NICHT</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>ist äquivalent mit:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Klammern_in_logischen_Ausdrücken_auflösen">Klammern in logischen Ausdrücken auflösen</h3> + +<p>Ein logischer Ausdruck wird von links nach rechts ausgewertet. Es ist immer möglich runde Klammern von einem komplexen Ausdruck zu entfernen, wenn einige Regeln beachtet werden.</p> + +<h4 id="Geschachteltes_AND_entfernen">Geschachteltes AND entfernen</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>ist äquivalent mit:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Geschachteltes_OR_entfernen">Geschachteltes OR entfernen</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>ist äquivalent mit:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Operators/Bitwise_Operators", "Bitweise Operatoren")}}</li> + <li>{{jsxref("Boolean")}}</li> +</ul> |