Tipps zur Verwendung von ES6/JavaScript (ausführliches Tutorial)

Dieser Artikel erklärt Ihnen hauptsächlich die ES6/JavaScript-Nutzungsfähigkeiten. Freunde in Not können darauf zurückgreifen.

Es gibt einige Methoden und Techniken beim Schreiben von JavaScript-Code. Auch wenn manchmal alle Wege nach Rom führen, kann es sein, dass es immer den kürzesten Weg gibt. In diesem Artikel erfahren Sie einige Tipps, die jeder kennt, aber nicht sehr oft verwenden

Einige Tipps

1.new Set()

Um Arrays zu deduplizieren, habe ich in meinem „Unterbewusstsein“ das Gefühl, dass wir eine Schleife durchführen und mit der Deduplizierung vergleichen sollten. Tatsächlich bietet ES6 einen neuen Datenstruktursatz, der zum einfachen Deduplizieren von Arrays verwendet werden kann, wie zum Beispiel:

let arr = [1,1, 2, 2, 3, 3];
let set = new Set(arr); //
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。 
console.log(newArr); // [1, 2, 3]

2.Object.assign()

ist auch eine Erweiterungsmethode von Objekten, die in ES6 bereitgestellt werden und zum Zusammenführen und Verwenden verwendet werden können Das Kopieren von Objekten, wie das Zusammenführen von Objekten, war früher ebenfalls sehr umständlich, aber jetzt ist es sehr einfach, zum Beispiel:

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // {a: 1, b: 2}

3.map()

map-Methode wird zum Durchlaufen von Arrays mit Rückgabewerten verwendet, kann jedes Element des Arrays bearbeiten und ein neues Array generieren. Manchmal können sie for- und forEach-Schleifen ersetzen, um den Code zu vereinfachen, wie zum Beispiel:

let arr3 = [1, 2, 3, 4, 5];
let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10
console.log(newArr3); // [10, 20, 30, 40, 50]

4 .filter()

Die Filtermethode wird auch zum Durchlaufen des Arrays verwendet. Wie der Name schon sagt, filtert sie das Array und löst anschließend eine Rückruffunktion aus jedes Element und behält oder entfernt das aktuelle Element durch Beurteilung und gibt schließlich ein neues Array zurück, wie zum Beispiel:

let arr4 = [1, 2, 3, 4, 5];
let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模，过滤余数不为0的数
console.log(newArr4); // [2，4]

5.some()

Eine Rückruffunktion wird zum Durchlaufen des Arrays verwendet. Solange eine Bedingung erfüllt ist, gibt sie true zurück, andernfalls gibt sie false zurück, ähnlich wie beim ||-Vergleich :

let arr5 = [{result: true}, {result: false}];
let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true，即为true
console.log(newArr5); // true

6.every() //Mit 5 Im Gegenteil, die

jede Methode wird verwendet, um das Array zu durchlaufen und auszulösen Eine Callback-Funktion nach jedem Element, sie gibt „false“ zurück, andernfalls gibt sie „true“ zurück, ähnlich wie beim &&-Vergleich. Zum Beispiel:

let arr6 = [{result: true}, {result: false}];
let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为false
console.log(newArr6); // false

7. Ternär Operator

Dieser Operator sollte jedem bekannt sein und kann vereinfacht werden, wenn er stillschweigend geschrieben wird, zum Beispiel:

let e = true,
f = '';
if (e) {
f = 'aaa';
} else {
f = 'bbb';
}
// 等同于
f = e ? 'aaa' : 'bbb';

8.~~Operator

~ Das Symbol wird in JavaScript verwendet, um eine bitweise Negation durchzuführen. ~~Es bedeutet eine zweimalige Invertierung, und der Operationswert der Bitoperation muss eine Ganzzahl sein , und das Ergebnis ist auch eine Ganzzahl, sodass die Bitoperation automatisch zu einer Ganzzahl wird und der Dezimalteil geschickt entfernt werden kann, ähnlich wie bei parseInt, wie zum Beispiel:

let a = 1.23;
let b = -1.23;
console.log(~~a); // 1
console.log(~~b); // -1

Das Obige ist, was ich für alle kompiliert habe . Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie die Node-Ebene, um das Hochladen mehrteiliger Formulardateien zu implementieren

So verwenden Sie React, um das Portal wiederverwendbar zu kapseln Komponenten

So senden Sie Anfragen an die Zwischendienstschicht im Knoten (ausführliche Anleitung)

So erhalten Sie Excel-Inhalte im Knoten

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von ES6/JavaScript (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!