Wichtige JavaScript-Tipps für Entwickler

1. Schleife durch ein Objekt

Verwenden Sie Object.entries(), um Schlüssel-Wert-Paare zu durchlaufen.

const person = {
  name: 'Tony Stark',
  age: 53,
  city: 'NewYork'
};

/*
name: Tony Stark
age: 53
city: NewYork
*/
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

Erklärung:

• Object.entries() konvertiert die Eigenschaften eines Objekts in ein Array von Schlüssel-Wert-Paaren und erleichtert so die Iteration darüber.

 

2. Entfernen falscher Werte aus einem Array

Verwenden Sie filter(Boolean), um falsche Werte herauszufiltern.
(Zu den falschen Werten gehören „false“, „0“, „“, „null“, „undefiniert“ und „NaN“)

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

Erklärung:

• In diesem Code wird Boolescher Wert als Rückruffunktion an filter() übergeben.
• Die Funktion „Boolean()“ ist eine in JavaScript integrierte Funktion, die für wahrheitsgemäße Werte „true“ und für falsche Werte „false“ zurückgibt.
• Durch die Übergabe von „Boolean“ als Rückruffunktion entfernt „filter()“ alle falschen Werte aus dem Array „arr“ und gibt ein neues Array „filteredArr“ mit nur wahren Werten zurück.

 

3. Reduzieren eines mehrdimensionalen Arrays

Verwenden Sie die flat()-Methode, um Arrays zu reduzieren.

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

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

Erklärung:

• In diesem Code ist multiDimensionalArray ein zweidimensionales Array mit zwei verschachtelten Arrays.
• Durch den Aufruf der Methode flat() mit einer Tiefe von 2 werden alle Sub-Array-Elemente zu einem einzigen flachen Array verkettet.
• Das resultierende flattenedArray enthält alle Elemente des ursprünglichen mehrdimensionalen Arrays in einer einzigen Dimension.

 

4. Array aus Iterables erstellen

Verwenden Sie Array.from(), um ein Array aus iterierbaren Elementen zu erstellen.

// Converting String to an array
const str = "TonyStark";
const arr = Array.from(str);

// ['T', 'o', 'n', 'y', 'S', 't', 'a', 'r', 'k']
console.log(arr);

// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

Erklärung:

• Array.from() konvertiert iterierbare oder Array-ähnliche Objekte wie Strings, Sets, Maps in Arrays.

 

5. Extrahieren von Werten aus Arrays

Verwenden Sie Destrukturierung, um Werte aus einem Array zu extrahieren.

const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

Erklärung:

• Durch die Destrukturierung können Sie Array-Elemente direkt Variablen zuweisen und unerwünschte Werte überspringen.

 

6. Werte aus Objekten extrahieren

Verwenden Sie die Objektdestrukturierung, um Eigenschaften zu extrahieren.

const person = {
  name: 'Tony Stark',
  age: 53,
  email: 'tonystark@starkindustries.com'
};

const {name, age, email} = person;

console.log(name); // Tony Stark
console.log(age); // 53
console.log(email); // tonystark@starkindustries.com

Erklärung:

• Destrukturierung extrahiert Objekteigenschaften, indem sie sie mit Variablen abgleicht.

 

7. Mehrere Versprechen parallel ausführen

Promise.all() ermöglicht die parallele Ausführung mehrerer Versprechen.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const [response1, response2] = responses;
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

Erklärung:

• In diesem Code erstellen wir zwei Versprechen mithilfe der fetch()-Methode, um Daten von zwei verschiedenen Endpunkten abzurufen.
• Wir übergeben dann ein Array von Versprechen an Promise.all(), das ein neues Versprechen zurückgibt, das aufgelöst wird, wenn alle Versprechen im Array aufgelöst wurden.
• Wir können dann das Array „responses“ im Block „then()“ verwenden, um die Antworten beider Anfragen zu verarbeiten. Wenn eines der Versprechen abgelehnt wird, behandelt der catch()-Block den Fehler.

 

8. Finden der größten und kleinsten Zahl in einem Array

Verwenden Sie Math.max() und Math.min() mit Spread-Syntax.

const nums = [10, 12, 29, 60, 22];
console.log(Math.max(...nums)); // 60
console.log(Math.min(...nums)); // 10

Erklärung:

• Spread-Syntax (...) erweitert die Array-Elemente, sodass Math.max() und Math.min() sie auswerten können.

 

9. Konvertieren eines beliebigen Werts in einen Booleschen Wert

Verwenden Sie doppelte Negation!! um Werte umzuwandeln.

!!2; // true
!!''; // false
!!NaN; // false
!!'word'; // true
!!undefined; // false

Erklärung:

• Doppelte Negation (!!) in JavaScript ist ein Trick, um jeden Wert in sein boolesches Äquivalent umzuwandeln.
• Das erste ! wandelt wahrheitsgemäße Werte in falsch und falsche Werte in wahr um, und das zweite ! dreht diesen Booleschen Wert um, was ergibt in wahr für wahrheitsgemäße Werte und falsch für falsche Werte.

 

10. Variablenwerte austauschen

Verwenden Sie die Array-Destrukturierung, um Werte auszutauschen.

let a = 5;
let b = 10;

// Swap values using array destructuring
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

Erklärung:

• In diesem Beispiel werden die Werte von a und b vertauscht, ohne eine temporäre Variable zu verwenden.
• Das [b, a] auf der rechten Seite erstellt ein neues Array mit den Werten von b und a und dann der Destrukturierungszuweisung [a, b] auf der linken Seite weist diese Werte wieder a und b zu, wodurch ihre Werte effektiv vertauscht werden.

Das obige ist der detaillierte Inhalt vonWichtige JavaScript-Tipps für Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!