Tipps und Tricks in Javascript

Lassen Sie uns in diesem Artikel einige Tipps und Tricks zu Javascript behandeln, die jeder kennen sollte.

In Boolean umwandeln

Alle Werte in Javascript sind truthyauÃŸer 0, "", null, undefined, NaNund natÃ¼rlich false.

Wir kÃ¶nnen leicht zwischen trueund falsemit dem negativen Operator ( !) wechseln , der auch den Typ in boolean umwandelt .

console.log(!0); //true
console.log(!1); //false
console.log(!!0); //false
console.log(!undefined); //true

<code>console.log(!0); //true
console.log(!1); //false
console.log(!!0); //false
console.log(!undefined); //true
</code>

<code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">!</span><span class="mi">0</span><span class="p">);</span> <span class="c1">//true</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">!</span><span class="mi">1</span><span class="p">);</span> <span class="c1">//false</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">!!</span><span class="mi">0</span><span class="p">);</span> <span class="c1">//false</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">!</span><span class="kc">undefined</span><span class="p">);</span> <span class="c1">//true</span>
</code>

Erstaunlich, oder?

In Zahl umwandeln

Die Umwandlung in eine Zahl kann einfach mit dem Additionsoperator ( +) erreicht werden.

let num = "10";
console.log(num); // "10"
console.log(typeof num); // "string"

num = +num;

console.log(num); // 10
console.log(typeof num); // "number"

<code>let num = "10";
console.log(num); // "10"
console.log(typeof num); // "string"
num = +num;
console.log(num); // 10
console.log(typeof num); // "number"
</code>

<code><span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">10</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span> <span class="c1">// "10"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">num</span><span class="p">);</span> <span class="c1">// "string"</span><font></font>
<font></font>
<span class="nx">num</span> <span class="o">=</span> <span class="o">+</span><span class="nx">num</span><span class="p">;</span><font></font>
<font></font>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span> <span class="c1">// 10</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">num</span><span class="p">);</span> <span class="c1">// "number"</span>
</code>

Wie cool ist das?

Schnelles Floaten zu Integer

Es gibt mehrere MÃ¶glichkeiten, Float mithilfe von Math.floor(), Math.ceil()oder in eine Ganzzahl zu konvertieren Math.round(), aber es gibt auch eine schnellere MÃ¶glichkeit, eine Float mithilfe des bitweisen OR-Operators ( |) in eine Ganzzahl zu konvertieren .

console.log(11.5 | 0); // 11
console.log(-11.5 | 0); // -11

<code>console.log(11.5 | 0); // 11
console.log(-11.5 | 0); // -11
</code>

<code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mf">11.5</span> <span class="o">|</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 11</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">-</span><span class="mf">11.5</span> <span class="o">|</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// -11</span>
</code>

Beeindruckend! Erstaunlich, oder? Ich habe angefangen, das jetzt hÃ¤ufiger zu verwenden.

Kurzschlussauswertung

&& verwenden

Mit &&wird der erste falseoder falsyWert zurÃ¼ckgegeben. Wenn erwartet wird, dass jeder Operand ist true, wird der zuletzt ausgewertete Ausdruck zurÃ¼ckgegeben.

console.log(true && true && 2); // 2
console.log(true && false && 2); // false

<code>console.log(true && true && 2); // 2
console.log(true && false && 2); // false
</code>

<code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="kc">true</span> <span class="o">&&</span> <span class="kc">true</span> <span class="o">&&</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="kc">true</span> <span class="o">&&</span> <span class="kc">false</span> <span class="o">&&</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// false</span>
</code>

Verwenden von ||

Mit ||dem ersten RÃ¼ckkehr truevon truthyWert. Wenn erwartet wird, dass jeder Operand ist false, wird der zuletzt ausgewertete Ausdruck zurÃ¼ckgegeben.

console.log(true || false || 2); // true
console.log(false || false || 2); // 2

<code>console.log(true || false || 2); // true
console.log(false || false || 2); // 2
</code>

<code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span> <span class="o">||</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// true</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="kc">false</span> <span class="o">||</span> <span class="kc">false</span> <span class="o">||</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// 2</span>
</code>

Die Kurzschlussauswertung ist in jeder Programmiersprache weit verbreitet.

Filtern Sie eindeutige Werte aus einem Array

Sie kÃ¶nnen eindeutige Werte mithilfe der SetDatenstruktur leicht finden . Das Set wurde in ES6 zusammen mit dem Spread-Operator ( ...) eingefÃ¼hrt. Lassen Sie uns beide das neue Konzept verwenden, um eindeutige Werte eines Arrays zu filtern.

Ich weiÃŸ, dass du das oft benutzen wirst. Sie kÃ¶nnen mir spÃ¤ter danken. ðŸ˜„

let arr = [1, 1, 2, 3, 4, 4, 5, 2, 3, 6];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [ 1, 2, 3, 4, 5, 6 ]

<code>let arr = [1, 1, 2, 3, 4, 4, 5, 2, 3, 6];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [ 1, 2, 3, 4, 5, 6 ]
</code>

<code><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">uniqueArr</span> <span class="o">=</span> <span class="p">[...</span><span class="k">new</span> <span class="nb">Set</span><span class="p">(</span><span class="nx">arr</span><span class="p">)];</span><font></font>
<font></font>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">uniqueArr</span><span class="p">);</span> <span class="c1">// [ 1, 2, 3, 4, 5, 6 ]</span>
</code>

Selbstanruffunktion oder IIFE

IIFE - Sofort aufgerufener Funktionsausdruck

Dies wird oft als selbstaufgerufene anonyme Funktion oder IIFE bezeichnet . Es ist eine Funktion, die automatisch ausgefÃ¼hrt wird, wenn sie erstellt wird.

(function () {
  console.log("I am running automatically");
})();

//I am running automatically

<code>(function () {
console.log("I am running automatically");
})();
//I am running automatically
</code>

<code><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">I am running automatically</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})();</span><font></font>
<font></font>
<span class="c1">//I am running automatically</span>
</code>

Sie kÃ¶nnen mehr Ã¼ber lesen IIFE hier .

Holen Sie sich ein zufÃ¤lliges Element aus einem Array

Wir kÃ¶nnen Math.random()und Math.floor()-Methoden verwenden, um ein zufÃ¤lliges Element aus einem Array zu erhalten.

let names = ["Pratap", "Prasar", "Sudip", "Shiva"];

let randomName = names[Math.floor(Math.random() * names.length)];

<code>let names = ["Pratap", "Prasar", "Sudip", "Shiva"];
let randomName = names[Math.floor(Math.random() * names.length)];
</code>

<code><span class="kd">let</span> <span class="nx">names</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">Pratap</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Prasar</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Sudip</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Shiva</span><span class="dl">"</span><span class="p">];</span><font></font>
<font></font>
<span class="kd">let</span> <span class="nx">randomName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">names</span><span class="p">.</span><span class="nx">length</span><span class="p">)];</span>
</code>

Es ist auch einer der am hÃ¤ufigsten verwendeten Tricks.

Primitive Operationen kÃ¶nnen schneller sein als Funktionsaufrufe

Denken Sie daran, dass primitive Operationen schneller sein kÃ¶nnen als Funktionsaufrufe.

Anstatt zu verwenden

const min = Math.min(a, b);

<code>const min = Math.min(a, b);
</code>

<code><span class="kd">const</span> <span class="nx">min</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
</code>

verwenden

const min = a < b ? a : b;

<code>const min = a < b ? a : b;
</code>

<code><span class="kd">const</span> <span class="nx">min</span> <span class="o">=</span> <span class="nx">a</span> <span class="o"><</span> <span class="nx">b</span> <span class="p">?</span> <span class="nx">a</span> <span class="p">:</span> <span class="nx">b</span><span class="p">;</span>
</code>

Leere ein Array

Sie kÃ¶nnen ein Array mit der array.lengthEigenschaft leeren .

let dumarray = [1, 1, 2, 3, 4, 5, 6, 7];
dumarray.length = 0;

console.log(dumarray); // []

<code>let dumarray = [1, 1, 2, 3, 4, 5, 6, 7];
dumarray.length = 0;
console.log(dumarray); // []
</code>

<code><span class="kd">let</span> <span class="nx">dumarray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span><span class="p">];</span>
<span class="nx">dumarray</span><span class="p">.</span><span class="nx">length</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><font></font>
<font></font>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">dumarray</span><span class="p">);</span> <span class="c1">// []</span>
</code>

Etwas zusammenfassen

Das ist es aus diesem Artikel. Ich hoffe, ich konnte Ihnen mit den besten Javascript-Tipps und -Tricks helfen.

ðŸ’Œ Wenn Sie mÃ¶chten , um mehr Tutorials in Ihrem Posteingang erhalten, kÃ¶nnen Sie sich fÃ¼r den Newsletter anmelden hier .

Bitte zÃ¶gern Sie nicht, hier einen Kommentar zu hinterlassen, wenn ich etwas vermisse. Lassen Sie mich auch wissen, ob ich den Beitrag verbessern kann.