Tipps zur Verwendung von JavaScript

Vorwort

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.

Geschickt lernen und geschickt anwenden

​1. neues Set()

Einige Leute wissen vielleicht, dass ES6 eine neue Datenstruktur, Set, bereitstellt, aber nicht viele Leute können sie flexibel verwenden. Mit der Set-Datenstruktur können wir Duplikate einfach aus einem Array entfernen, wie 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]

2. Object.assign()

Object.assign() ist ebenfalls eine Erweiterungsmethode für in ES6 bereitgestellte Objekte, kann jedoch nur eine Ebene kopieren, z. B.:

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

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

3. map()

Die Map-Methode wird zum Durchlaufen des Arrays verwendet und verfügt über einen Rückgabewert. Sie kann jedes Element des Arrays bearbeiten und ein neues Array generieren. Manchmal kann sie die for- und forEach-Schleifen ersetzen, um den Code zu vereinfachen, z. B.:

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. Sie filtert das Array, löst nach jedem Element eine Rückruffunktion aus, behält das aktuelle Element bei oder entfernt es durch Beurteilung und gibt schließlich ein neues Array zurück, z. B.:

let arr4 = [1, 2, 3, 4, 5];

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

console.log(newArr4); // [2，4]

5. some()

Einige Methoden werden verwendet, um das Array zu durchlaufen und nach jedem Element eine Rückruffunktion auszulösen. Solange eine davon erfüllt ist, wird „true“ zurückgegeben, andernfalls wird „false“ zurückgegeben, ähnlich wie beim ||-Vergleich >

​6.every()

let arr5 = [{result: true}, {result: false}];

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

console.log(newArr5); // true

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

7. ~~Operator

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

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

console.log(newArr6); // false

Das ~-Symbol wird in JavaScript verwendet, um eine bitweise Invertierung durchzuführen. Der Operationswert einer bitweisen Operation muss eine Ganzzahl sein, sodass alles, was einer bitweisen Operation unterzogen wird, automatisch eine Ganzzahl wird . Sie können den Dezimalteil geschickt entfernen, ähnlich wie bei parseInt, wie zum Beispiel:

8. ||. Operator

let a = 1.23;
let b = -1.23;

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

Mit dem ||.-Operator können wir Standardwerte für Variablen festlegen, wie zum Beispiel:

9. …Operator

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

console.log(d); // 1

​…Operator ist eine Methode zum Destrukturieren von Arrays in ES6 und kann verwendet werden, um schnell die Parameter eines Arrays abzurufen, wie zum Beispiel:

10. Ternärer Operator

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

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

Dieser Operator sollte jedem bekannt sein, er kann das Schreiben von if else vereinfachen, wie zum Beispiel:

Fazit

let e = true,
    f = '';

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

// 等同于
e ? f = 'man' : f = 'woman';

In diesem Artikel werden nur 10 gängige Methoden zur Verbesserung der Codierungseffizienz aufgeführt. Natürlich kann jeder Wissenspunkt entsprechend erweitert und erforscht werden.

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