9 sehr wichtige Nutzungstipps (mit Code)

Dieses Mal bringe ich Ihnen 9 sehr wichtige Verwendungsfähigkeiten (mit Code). Was sind die Vorsichtsmaßnahmen für die Verwendung von JS? Hier sind praktische Fälle.

1. Löschen Sie die Endelemente des Arrays

Eine einfache Möglichkeit, die Endelemente des Arrays zu löschen oder zu löschen, besteht darin, die zu löschen Länge des Array-Attributwerts.

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. Verwenden Sie die Objektdestrukturierung, um benannte Parameter zu simulieren

Wenn Sie eine Reihe optionaler Optionen als Parameter an eine Funktion übergeben müssen, sind Sie möglicherweise dazu geneigt Verwenden Sie ein Objekt, um die Konfiguration (Config) zu definieren.

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
	const foo = config.foo !== undefined ? config.foo : 'Hi';
	const bar = config.bar !== undefined ? config.bar : 'Yo!';
 	const baz = config.baz !== undefined ? config.baz : 13;
 	// ...
}

Dies ist eine alte, aber sehr effektive Methode, die benannte Parameter in JavaScript simuliert. Allerdings ist der Umgang mit der Konfiguration in doSomething etwas umständlich. In ES2015 können Sie die Objektdestrukturierung direkt verwenden.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 // ...
}

Wenn Sie diesen Parameter optional machen möchten, ist das auch einfach.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 // ...
}

3. Verwenden Sie die Objektdestrukturierung, um Arrays zu verarbeiten

Sie können die Syntax der Objektdestrukturierung verwenden, um die Elemente des Arrays abzurufen:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4 . Verwenden Sie den Bereichswert

in der switch-Anweisung. Sie können die folgenden Techniken verwenden, um eine switch-Anweisung zu schreiben, die den Bereichswert erfüllt:

function getWaterState(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = &#39;Solid&#39;;
   break;
  case (tempInCelsius > 0 && tempInCelsius < 100): 
   state = &#39;Liquid&#39;;
   break;
  default: 
   state = &#39;Gas&#39;;
 }
 return state;
}

5. Warten auf mehrere asynchrone Funktionen

Bei Verwendung von async/await können Sie Promise.all verwenden, um auf mehrere asynchrone Funktionen zu warten.

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Erstellen Sie ein reines Objekt

Sie können ein 100 % reines Objekt erstellen, das keine Eigenschaften oder Methoden von Object erbt (z. B. Konstruktor, toString() usw.).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. JSON-Code formatieren

JSON.stringify kann nicht nur ein Objekt charakterisieren, sondern auch JSON-Objekte formatieren und ausgeben.

const obj = { 
 foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>  "foo": {
// =>    "bar": [
// =>      11,
// =>      22,
// =>      33,
// =>      44
// =>    ],
// =>    "baz": {
// =>      "bing": true,
// =>      "boom": "Hello"
// =>    }
// =>  }
// =>}"

8. Entfernen Sie doppelte Elemente aus einem Array

In ES2015 gibt es eine festgelegte Syntax. Durch die Verwendung der Set-Syntax und der Spread-Operation können doppelte Elemente leicht entfernt werden:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. Das Kacheln mehrdimensionaler Arrays

Mit der Spread-Operation ist dies möglich Einfach, um verschachtelte mehrdimensionale Arrays zu reduzieren:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

Leider funktioniert die obige Methode nur für zweidimensionale Arrays. Mit der Rekursion können wir jedoch verschachtelte Arrays beliebiger Dimensionen reduzieren.

unction flattenArray(arr) {
 const flattened = [].concat(...arr);
 return flattened.some(item => Array.isArray(item)) ? 
  flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

Das ist es! Ich hoffe, diese Tipps können Ihnen helfen, schöneren JS-Code zu schreiben! Wenn das nicht ausreicht, können Sie Fundebug genauso gut als Ihren Assistenten verwenden!

Empfohlene Kommentare

Ethan B Martin: Der Text dieses Schalters ist sehr clever, aber ich empfehle ihn nicht. Bitte ermutigen Sie Entwickler nicht, JS-Code auf diese Weise zu schreiben. Wir haben dies einmal von einem Ingenieur schreiben lassen, was später bei der Codeüberprüfung zu großen Leseproblemen führte. Glücklicherweise haben wir es rechtzeitig in besser lesbaren Code umgestaltet. Vergleichen wir den Unterschied zwischen der Verwendung von switch und if:

function getWaterState1(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = 'Solid';
   break;
  case (tempInCelsius < 100): 
   state = 'Liquid';
   break;
  default: 
   state = 'Gas';
 }
 return state;
}
function getWaterState2(tempInCelsius) {
 if (tempInCelsius <= 0) {
  return 'Solid';
 }
 if (tempInCelsius < 100) {
  return 'Liquid';
 }
 return 'Gas';
}

Die zweite Schreibweise hat mehrere Vorteile:
A) Die Codemenge ist kleiner und besser lesbar; B) Sie müssen nicht deklarieren Wenn Sie eine lokale Variable verwenden, müssen die Leser nicht nachverfolgen, wie Sie diese Variable geändert haben. C) switch(true) kann wirklich verwirrend sein.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung der domänenübergreifenden Nutzung des lokalen Umgebungsbetriebsknotenservers

So erhalten Sie alle Daten im DOM-Dokumentenbaum

Das obige ist der detaillierte Inhalt von9 sehr wichtige Nutzungstipps (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!