20 JS-Fähigkeiten, die Ihnen helfen, die Arbeitseffizienz zu verbessern und nie wieder Überstunden zu machen!

In unseren täglichen Aufgaben schreiben wir Funktionen wie Sortieren, Suchen, Finden eindeutiger Werte, Übergeben von Parametern, Austauschen von Werten usw., deshalb habe ich hier eine Liste meiner Tipps zur Kurzschrift zusammengestellt!

JavaScript ist wirklich eine großartige Sprache zum Erlernen und Verwenden. Für ein bestimmtes Problem kann es mehr als einen Weg geben, zur gleichen Lösung zu gelangen. In diesem Artikel werden wir nur die schnellsten besprechen.

Diese Methoden werden Ihnen auf jeden Fall helfen:

• Reduzieren Sie die Anzahl der LOC (Codezeilen),
• Codierungswettbewerbe,
• Hackathons
• oder andere zeitlich begrenzte Aufgaben.

Die meisten dieser JavaScript-Hacks verwenden ECMAScript6 (ES2015) und spätere Technologien, obwohl die neueste Version ECMAScript11 (ES2020) ist.

==Hinweis==: Alle folgenden Tipps wurden auf der Google Chrome-Konsole getestet.

1. Array deklarieren und initialisieren

Wir können ein Array einer bestimmten Größe mit einem Standardwert (z. B. „“, null oder 0) initialisieren. Möglicherweise verwenden Sie diese bereits für 1D-Arrays, aber wie initialisieren Sie ein 2D-Array/eine 2D-Matrix?

const array = Array(5).fill(''); 
// Output(5) ["", "", "", "", ""]

const Matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Ausgabe(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
Länge: 5

2. Finden Sie die Summe, den Minimal- und den Maximalwert.

Wir sollten die reduce verwenden, um schnell grundlegende mathematische Operationen zu finden.

const array = [5,4,7,8,9,2];

• and

array.reduce((a,b) => a+b);
// Ausgabe:

• maximal

array.reduce((a,b) => a>b?a:b);
// Ausgabe: 9

• Minimum

array.reduce((a,b) => a<b?a:b);
// Ausgabe: 2

3. Arrays aus Strings, Zahlen oder Objekten sortieren

Wir haben eingebaute Methoden sort() und reverse() zum Sortieren von Strings, aber was ist mit Arrays aus Zahlen oder Objekten?

Schauen wir uns die auf- und absteigenden Sortiertechniken für Zahlen und Objekte an.

• String-Array sortieren

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Output(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Ausgabe (4) ["Steve", "Musk", "Kapil", "Joe"]

• sortiertes Zahlenarray

const array = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => ab);
// Ausgabe(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => ba);
// Ausgabe (6) [100, 40, 25, 10, 5, 1]

• ​​​​Objekt-Array-Sortierung

const objectArr = [
     {Vorname: 'Lazslo', Nachname: 'Jamf' },
     { Vorname: 'Schwein', Nachname: 'Bodine' },    
     { Vorname: 'Pirat', Nachname: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Ausgabe(3) [{…}, {…}, {…}]
0: {Vorname: „Schwein“, Nachname: „Bodine“}
1: {Vorname: „Lazslo“, Nachname: „Jamf“}
2: {Vorname: „Pirat“, Nachname: „Prentice“}
Länge: 3

4. Filtern Sie falsche Werte aus dem Array.

Falsche Werte wie 0 , undefined , null , false , "" , '' können einfach durch

const array = [3, 0, 6, 7, „“

, FALSCH];
array.filter(Boolean);
// Ausgabe (3) [3, 6, 7]

5. Verwenden Sie logische Operatoren für verschiedene Bedingungen.

Wenn Sie verschachtelte if...else reduzieren oder Fälle wechseln möchten, können Sie einfach die grundlegenden logischen Operatoren AND/OR verwenden.

Funktion doSomething(arg1){ 
    arg1 = arg1 ||. 10; 
// setze arg1 auf 10 als Standard, falls nicht bereits festgelegt return arg1;
}

sei foo = 10;  
foo === 10 && doSomething(); 
// ist dasselbe wie if (foo == 10) then doSomething();
// Ausgabe: 10

foo === 5 ||. doSomething();
// ist dasselbe wie if (foo != 5) then doSomething();
// Ausgabe: 10

6. Doppelte Werte entfernen

Möglicherweise haben Sie indexOf() mit einer for-Schleife verwendet, die den ersten gefundenen Index zurückgibt, oder die neuere includes() die einen booleschen Wert true/false aus einem Array zurückgibt, um Out/Remove zu ermitteln Duplikate. Hier haben wir zwei schnellere Methoden.

const array = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// oder
const nonUnique = [...new Set(array)];
// Ausgabe: [5, 4, 7, 8, 9, 2]

7. Erstellen Sie ein Zählerobjekt oder eine Zählerkarte.

Meistens müssen Sie das Problem lösen, indem Sie ein Zählerobjekt oder eine Zählerkarte erstellen, die Variablen als Schlüssel verfolgt, und Verfolgen Sie die Häufigkeit/das Auftreten als Wert.

let string = 'kapilalipak';

const table={}; 
for(let char of string) {
  Tabelle[char]=Tabelle[char]+1 ||.
}
// Ausgabe {k: 2, a: 3, p: 2, i: 2, l: 2}

und

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } anders {
      countMap.set(string[i], 1);
    }
  }
// Ausgabe Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. Der ternäre Operator ist sehr Cool,

Sie können verschachtelte Bedingungen vermeiden, indem Sie den ternären Operator if…elseif…elseif verwenden.

Funktion Fever(temp) {
    Rücklauftemperatur > 97 ? „Arzt aufsuchen!“
      : temp < 97 ? „Geh raus und spiel!!“
      : temp === 97 ? 'Ruhe dich aus!';
}

// Output Fever(97): „Gönn dir etwas Ruhe!“ 
Fever(100): „Visit Doctor!“

9. Die for-Schleife ist schneller als die alte

• for und for..in , die standardmäßig einen Index liefert, aber Sie können arr[index] verwenden.
• for..in akzeptiert auch Nicht-Zahlen, also vermeiden Sie es.
• forEach , for...of Elemente direkt abrufen.
• forEach kann Ihnen auch einen Index geben, for...of nicht.
• for und for...of berücksichtigen Löcher im Array, aber nicht die anderen 2.

10. 2 Objekte zusammenführen

Normalerweise müssen wir bei täglichen Aufgaben mehrere Objekte zusammenführen.

const user = { 
 Name: „Kapil Raghuwanshi“, 
 Geschlecht: „Männlich“ 
 };
const Hochschule = { 
 Grundschule: „Mani Primary School“, 
 Sekundarstufe: „Lass Secondary School“ 
 };
const skills = { 
 Programmierung: 'Extrem', 
 Schwimmen: „Durchschnitt“, 
 Schlafen: „Pro“ 
 };

const summary = {...user, ...college, ...skills};

// Ausgabegeschlecht: „Männlich“
Name: „Kapil Raghuwanshi“
Grundschule: „Mani Primary School“
Programmierung: „Extrem“
Sekundarstufe: „Lass Secondary School“
Schlafen: „Pro“
Schwimmen: „Durchschnitt“

11. Pfeilfunktionen

Pfeilfunktionsausdrücke sind kompakte Alternativen zu herkömmlichen Funktionsausdrücken, haben jedoch Einschränkungen und können nicht in allen Situationen verwendet werden. Da sie einen lexikalischen Geltungsbereich (den übergeordneten Geltungsbereich) und keinen eigenen Geltungsbereich haben, beziehen sich this arguments daher auf die Umgebung, in der sie definiert sind.

const person = {
Name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// „Kapil“ ausgeben

, aber

const person = {
Name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// Ausgabe „“

12. Optionale

Verkettung Optionale Verkettung? Stoppt die Auswertung, wenn der Wert vor ? steht. ist undefiniert oder null und gibt

undefiniert zurück.
const user = {
  Mitarbeiter: {
    Name: „Kapil“
  }
};
user.employee?.name;
// Ausgabe: „Kapil“
user.employ?.name;
// Ausgabe: undefiniert
user.employ.name
// Ausgabe: VM21616:1 Uncaught TypeError: Eigenschaft „Name“ von undefiniert kann nicht gelesen werden

. 13.

Verwenden Sie die integrierte Methode Math.random() um das Array zu verschlüsseln.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0,5;
});
// Ausgabe(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Rufen Sie es erneut auf
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Null-Koaleszieroperator

Der Null-Koaleszieroperator (??) ist ein logischer Operator. Wenn sein linker Operand leer oder undefiniert ist, gibt er seinen zurück rechter Operand, andernfalls wird der linke Operand zurückgegeben.

const foo = null ?? 'meine Schule';
// Ausgabe: „meine Schule“

const baz = 0 ?? 42;
// Ausgabe: 0

15. Rest & Spread-Operator

Diese mysteriösen 3 Punkte ... können ruhen oder sich ausbreiten! ?

function myFun(a, b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("eins", "zwei", "drei", "vier", "fünf", "sechs");

// Ausgabe: 6

und

const parts = ['shoulders', 'knees']; 
const Lyrics = ['Kopf', ...Teile, 'und', 'Zehen']; 

Text;
//Ausgabe: 
(5) ["Kopf", "Schultern", "Knie", "und", "Zehen"]

16. Standardparameter

const search = (arr, low=0,high=arr.length-1) => {
    Rückkehr hoch;
}
Suche([1,2,3,4,5]);

// Ausgabe: 4

17. Dezimal in Binär oder Hexadezimal umwandeln

Während wir das Problem lösen, können wir einige integrierte Methoden wie .toPrecision() oder .toFixed() verwenden, um viele Hilfsfunktionen zu implementieren.

const num = 10;

num.toString(2);
// Ausgabe: „1010“
num.toString(16);
// Ausgabe: „a“
num.toString(8);
// Ausgabe: „12“

18. Verwenden Sie die Destrukturierung, um einfach zwei Werte auszutauschen.

Lassen Sie a = 5;
sei b = 8;
[a,b] = [b,a]

[a,b]
// Output(2) [8, 5]

19. Single Line Palindrome Check

Nun, das ist kein vollständiger Kurztipp, aber er wird Ihnen eine gute Vorstellung davon geben, wie man Strings verwendet.

Funktion checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Ausgabe: true

mit Object.entries(), Object.keys() und Object.values()

in Eigenschaftsarrays konvertieren

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Ausgabe(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
Länge: 3

Object.keys(obj);
(3) [„a“, „b“, „c“]

Object.values(obj);
(3) [1, 2, 3]