Heim > Web-Frontend > js-Tutorial > Hauptteil

Fassen Sie 10 gängige Methoden in der JS-Syntax zusammen, um die Codierungseffizienz zu verbessern

零下一度
Freigeben: 2017-05-17 18:01:32
Original
1623 Leute haben es durchsucht

Vorwort

Aufgrund einiger Veränderungen in der Arbeit und im Leben ist die Häufigkeit des Schreibens von Artikeln in letzter Zeit etwas zurückgegangen. Es tut mir wirklich leid, aber ich Ich glaube, dass es bald nachlassen wird, und ich danke Ihnen allen für Ihre anhaltende Aufmerksamkeit und Unterstützung.

In diesem Artikel werden hauptsächlich einige Methoden und Techniken zum Schreiben von JavaScript-Code vorgestellt. Obwohl manchmal alle Wege nach Rom führen, gibt es möglicherweise immer den kürzesten Weg. Ich hoffe, dass jeder Code durch die folgenden JavaScript-Kenntnisse „komplex und vereinfacht sowie vereinfacht und verfeinert“ werden kann.

Gekonnt lernen und nutzen

1. neu Set()

Jemand weiß vielleicht, dass in ES6 neue Daten bereitgestellt werden Die Struktur ist festgelegt, aber es gibt möglicherweise nicht viele Leute, die sie flexibel nutzen können. Mit der Set-Datenstruktur können wir ein Array einfach deduplizieren, zum Beispiel:

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

console.log(newArr); // [1, 2, 3]
Nach dem Login kopieren

2Object.assign()

Object.assign() ES6 Die Erweiterungsmethode des in bereitgestellten Objekts kann zum Zusammenführen und Kopieren von Objekten verwendet werden, z. B.:

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

console.log(obj3); // {a: 1, b: 2}
Nach dem Login kopieren

3. Die Kartenmethode wird zum Durchlaufen des Arrays verwendet und hat einen Rückgabewert. Sie können jedes Element des Arrays bearbeiten und ein neues Array generieren. Manchmal kann es die for- und forEach-Schleifen ersetzen, um den Code zu vereinfachen:

4 ()
let arr3 = [1, 2, 3, 4, 5];

let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10

console.log(newArr3); // [10, 20, 30, 40, 50]
Nach dem Login kopieren

Die Filtermethode wird auch zum Durchlaufen des Arrays verwendet. Wie der Name schon sagt, filtert sie das Array, löst nach jedem Element eine

Rückruffunktion

aus und behält oder entfernt das aktuelle Element Beurteilung und gibt schließlich ein neues Array zurück, wie zum Beispiel:

5. some()
let arr4 = [1, 2, 3, 4, 5];

let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数

console.log(newArr4); // [2,4]
Nach dem Login kopieren

Die Methode some wird verwendet, um das Array zu durchlaufen und nach jedem Element eine Rückruffunktion auszulösen. Solange man die Bedingungen erfüllt, wird true zurückgegeben, andernfalls wird false zurückgegeben. Beispiel:

6.every()
let arr5 = [{result: true}, {result: false}];

let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为true

console.log(newArr5); // true
Nach dem Login kopieren

jede Methode wird verwendet um das Array zu durchlaufen und nach jedem Element eine Rückruffunktion auszulösen, solange eines nicht erfüllt ist. Die Bedingung gibt false zurück, andernfalls gibt sie true zurück, ähnlich wie beim &&-Vergleich, zum Beispiel:

7 ~ ~
let arr6 = [{result: true}, {result: false}];

let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为false

console.log(newArr6); // false
Nach dem Login kopieren
Operator

~ In JavaScript verwendete Symbole sind Die Funktion der bitweisen Negation, ~~ besteht darin, zweimal zu negieren, und der Operationswert der

Bitoperation

muss sein integer, und das Ergebnis ist ebenfalls eine Ganzzahl, sodass alle bitweisen Operationen automatisch durchgeführt werden. Um eine Ganzzahl zu werden, können Sie den Dezimalteil geschickt entfernen, ähnlich wie bei parseInt, zum Beispiel:

8. ||. Operator
let a = 1.23;
let b = -1.23;

console.log(~~a); // 1
console.log(~~b); // -1
Nach dem Login kopieren

Clevere Verwendung von ||. Der Operator

Variable

legt den Standardwert fest, wie zum Beispiel:

9. .Operator
let c = 1;
let d = c || 2; // 如果c的值为true则取存在的值,否则为2

console.log(d); // 1
Nach dem Login kopieren

...Der Operator ist die Methode zum Zerstören von Arrays in ES6, mit der Sie schnell die Parameter des Arrays abrufen können, z. B.:

10.
let [num1, ...nums] = [1, 2, 3];

console.log(num1); // 1
console.log(nums); // [2, 3]
Nach dem Login kopieren
Ternärer Operator

Operator Dieser Operator sollte jedem bekannt sein und kann im Stillen geschrieben werden. Vereinfachen Sie die Schreibweise, wenn nicht, wie zum Beispiel:

Schlussfolgerung
let e = true,
    f = '';

if (e) {
    f = 'man';
} else {
    f = 'woman';
}

// 等同于
e ? f = 'man' : f = 'woman';
Nach dem Login kopieren

In diesem Artikel werden nur 10 gängige Methoden zur Verbesserung der Codierungseffizienz in der

JavaScript-Syntax

aufgeführt. Natürlich kann jeder Wissenspunkt entsprechend erweitert und erforscht werden. Ich hoffe, dass jeder beim Lernen eine geschickte Verwendung erreichen kann geschickt. 【Verwandte Empfehlungen】


1.

Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen 2.

Kostenloses js-Online-Video-Tutorial

3 php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonFassen Sie 10 gängige Methoden in der JS-Syntax zusammen, um die Codierungseffizienz zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage