Zusammenfassung der ES6-Nutzungstipps

Dieses Mal werde ich Ihnen eine Zusammenfassung der ES6-Nutzungsfähigkeiten geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von ES6? Hier sind praktische Fälle.

Wenn Sie weitere Tipps kennen, hinterlassen Sie bitte eine Nachricht. Gerne füge ich sie hinzu.

1. Obligatorische Parameter

ES6 bietet einen Standardparameterwertmechanismus, mit dem Sie Standardwerte für Parameter festlegen können, um Funktionen zu verhindern aufgerufen werden. Diese Parameter wurden nicht übergeben.

Im folgenden Beispiel schreiben wir eine erforderliche()-Funktion als Standardwert für die Parameter a und b. Das heißt, wenn einem der Parameter in a oder b beim Aufruf kein Wert übergeben wird, wird die Funktion „required()“ auf den Standardwert zurückgesetzt und ein Fehler ausgegeben.

const required = () => {throw new Error('Missing parameter')};
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.

2. Leistungsstarke Reduzierung

Die Reduzierungsmethode des Arrays ist sehr vielseitig. Es wird im Allgemeinen verwendet, um jedes Element in einem Array auf einen einzelnen Wert zu reduzieren. Aber man kann damit noch mehr machen.

2.1 Verwenden Sie Reduzieren, um Karte und Filter gleichzeitig zu implementieren

Angenommen, es gibt jetzt eine Sequenz und Sie möchten jedes Element davon aktualisieren (Kartenfunktion). und dann einen Teil herausfiltern (Filterfunktion). Wenn Sie zuerst Map und dann Filter verwenden, müssen Sie das Array zweimal durchlaufen.

Im folgenden Code verdoppeln wir die Werte im Array und wählen dann die Zahlen größer als 50 aus. Ist Ihnen aufgefallen, dass wir Reduce sehr effizient nutzen, um sowohl die Karten- als auch die Filtermethode zu vervollständigen?

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
 num = num * 2; 
 if (num > 50) {
  finalList.push(num);
 }
 return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 Verwenden Sie Reduzieren, um Karte und Filter zu ersetzen.

Wenn Sie den obigen Code sorgfältig lesen, sollten Sie verstehen, dass Reduzieren Karte und Filter ersetzen kann.

2.3 Verwenden Sie Reduzieren, um Klammern abzugleichen.

Eine weitere Verwendung von Reduzieren besteht darin, die Klammern in einer bestimmten Zeichenfolge abzugleichen. Für eine Zeichenfolge, die Klammern enthält, müssen wir wissen, ob die Anzahl von (und) konsistent ist und ob (vorher erscheint).

Im folgenden Code verwenden wir Reduce, um dieses Problem einfach zu lösen. Wir müssen zunächst nur eine Zählervariable deklarieren, deren Anfangswert 0 ist. Der Zähler erhöht sich bei Begegnung um eins (, der Zähler verringert sich bei Begegnung um eins). Wenn die Anzahl der linken und rechten Klammern übereinstimmt, ist das Endergebnis 0.

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter < 0) { //matched ")" before "("
   return counter;
  } else if(char === &#39;(&#39;) {
   return ++counter;
  } else if(char === &#39;)&#39;) {
   return --counter;
  } else { //matched some other char
   return counter;
  }
  
 }, 0); //<-- starting value of the counter
}
isParensBalanced(&#39;(())&#39;) // 0 <-- balanced
isParensBalanced(&#39;(asdfds)&#39;) //0 <-- balanced
isParensBalanced(&#39;(()&#39;) // 1 <-- not balanced
isParensBalanced(&#39;)(&#39;) // -1 <-- not balanced

2.4 Zählen Sie die Anzahl identischer Elemente in einem Array

Oft möchten Sie die Anzahl wiederkehrender Elemente in einem Array zählen und diese dann mit einem darstellen Objekt. Anschließend können Sie dieses Array mit der Reduce-Methode verarbeiten.

Der folgende Code zählt die Anzahl jedes Fahrzeugtyps und stellt dann die Gesamtzahl mit einem Objekt dar.

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

Es gibt so viele andere Verwendungsmöglichkeiten für Reduzieren. Ich empfehle Ihnen, die entsprechenden Codebeispiele auf MDN zu lesen.

3. Objektdekonstruktion

3.1 Löschen Sie unnötige Attribute

Manchmal tun Sie das nicht Sie möchten bestimmte Objekteigenschaften beibehalten, vielleicht weil sie vertrauliche Informationen enthalten oder einfach zu groß sind. Möglicherweise können Sie das gesamte Objekt aufzählen und löschen, aber in Wirklichkeit weisen Sie Variablen einfach die nutzlosen Eigenschaften zu und übergeben dann die nützlichen Teile, die Sie behalten möchten, als verbleibende Parameter.

Im folgenden Code möchten wir die Parameter _internal und tooBig löschen. Wir können sie den Variablen internal und tooBig zuweisen und die restlichen Eigenschaften dann zur späteren Verwendung in cleanObject speichern.

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 Verschachtelte Objekte in Funktionsparametern dekonstruieren

Im folgenden Code ist engine ein im Objekt car verschachteltes Objekt. Wenn wir am vin-Attribut der Engine interessiert sind, können wir es mithilfe einer Destrukturierungszuweisung leicht ermitteln.

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3.3 Objekte zusammenführen

ES6 bringt den erweiterten -Operator (...) mit. Es wird normalerweise zum Zerstören von Arrays verwendet, Sie können es aber auch mit Objekten verwenden.

Als nächstes verwenden wir den Spread-Operator, um ein neues Objekt zu erweitern, und die Eigenschaftswerte im zweiten Objekt überschreiben die Eigenschaftswerte des ersten Objekts. Beispielsweise überschreiben b und c von Objekt2 die gleichnamigen Attribute von Objekt1.

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

4. Sets

4.1 Verwendung von Set zur Implementierung der Array-Deduplizierung

in ES6, Da Set nur eindeutige Werte speichert, können Sie Set verwenden, um Duplikate zu entfernen.

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 对Set使用数组方法

使用扩展运算符就可以简单的将Set转换为数组。所以你可以对Set使用Array的所有原生方法。

比如我们想要对下面的Set进行filter操作，获取大于3的项。

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 数组解构

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

5.1 数值交换

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 接收函数返回的多个结果

在下面的代码中，我们从/post中获取一个帖子，然后在/comments中获取相关评论。由于我们使用的是async/await，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){
 return await Promise.all([
  fetch('/post'),
  fetch('/comments')
 ]);
}
const [post, comments] = getFullPost();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue实现移动端微信公众号步骤详解

JS设计模式中链式调用使用解析

Das obige ist der detaillierte Inhalt vonZusammenfassung der ES6-Nutzungstipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!