Fassen Sie 15 JavaScript-Entwicklungsfähigkeiten zusammen (organisiert und geteilt)

Dieser Artikel gibt Ihnen einige Tipps, die häufig in Projekten verwendet werden. JavaScript verfügt über viele coole Funktionen, die die meisten Anfänger und fortgeschrittenen Entwickler nicht kennen. Ich hoffe, es hilft allen.

1. Eigenschaften zu Objekten bedingt hinzufügen

Wir können den Spread-Operator (...) verwenden, um schnell Eigenschaften zu JS-Objekten bedingt hinzuzufügen.

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

Der &&-Operator gibt den zuletzt ausgewerteten Ausdruck zurück, wenn jeder Operand als wahr ausgewertet wird. Es wird also ein Objekt {age: 16} zurückgegeben, das dann erweitert wird, um Teil des Personenobjekts zu sein.

Wenn die Bedingung falsch ist, führt JavaScript Folgendes aus:

const person = {
  id: 1,
  name: '前端小智',
  ...(false), 
};
// 展开 `false` 对对象没有影响
console.log(person); // { id: 1, name: 'John Doe' }

2. Überprüfen Sie, ob das Attribut im Objekt vorhanden ist.

Sie können das Schlüsselwort in verwenden, um zu überprüfen, ob ein bestimmtes Attribut im JavaScript-Objekt vorhanden ist .

const person = { name: '前端小智', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

3. Dynamische Eigenschaftsnamen in Objekten

Das Festlegen von Objekteigenschaften mithilfe dynamischer Schlüssel ist einfach. Verwenden Sie einfach ['Schlüsselname'], um Eigenschaften hinzuzufügen:

const dynamic = 'flavour';
var item = {
  name: '前端小智',
  [dynamic]: '巧克力'
}
console.log(item); // { name: '前端小智', flavour: '巧克力' }

Der gleiche Trick kann verwendet werden, um Objekteigenschaften mithilfe dynamischer Schlüssel zu referenzieren:

const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'

4. Objektdestrukturierung mithilfe dynamischer Schlüssel

Das wissen wir bei Objekten Bei der Destrukturierung können Sie Folgendes verwenden: um die destrukturierten Eigenschaften umzubenennen. Aber wussten Sie, dass Sie die Eigenschaften eines Objekts auch dekonstruieren können, wenn der Schlüsselname dynamisch ist?

const person = { id: 1, name: '前端小智' };
const { name: personName } = person;
console.log(personName); // '前端小智'

Jetzt verwenden wir dynamische Schlüssel, um Eigenschaften zu zerstören:

5. Nullwert-Koaleszenzoperator

Der ??-Operator ist nützlich, wenn wir überprüfen möchten, ob eine Variable null oder undefiniert ist. Wenn sein linker Operand null oder undefiniert ist, gibt er den rechten Operanden zurück, andernfalls gibt er seinen linken Operanden zurück.

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template); // Good bye

Im dritten Beispiel wird 0 zurückgegeben, denn obwohl 0 in JS als falsch gilt, ist es nicht null oder undefiniert. Sie denken vielleicht, dass wir den ||-Operator verwenden können, aber es gibt einen Unterschied zwischen den beiden.

Sie denken vielleicht, dass wir den ||-Operator hier verwenden können, aber es gibt einen Unterschied zwischen den beiden.

const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0

6. Optionale Kette? Das ist für jeden Entwickler ein lästiges Problem. Um dieses Problem zu lösen, wurde eine optionale Verkettung eingeführt. Werfen wir einen Blick darauf:

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0

Sie können auch die folgende optionale Funktionskette verwenden:

const book = { id:1, title: 'Title', author: null };
// 通常情况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined

7. Mit dem Operator !! können Sie das Ergebnis eines Ausdrucks schnell konvertieren in einen booleschen Wert (wahr oder falsch):

const person = {
  firstName: '前端',
  lastName: '小智',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined

8. String- und Ganzzahlkonvertierung

Verwenden Sie den +-Operator, um Strings schnell in Zahlen umzuwandeln:

const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false

Um Zahlen schnell in Strings umzuwandeln, können Sie auch verwenden das +-Operatorsymbol, gefolgt von einer leeren Zeichenfolge:

const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'

Diese Typkonvertierungen sind sehr praktisch, führen jedoch zu weniger Klarheit und Lesbarkeit des Codes. Daher erfordert die tatsächliche Entwicklung eine sorgfältige Auswahl und Verwendung.

9. Überprüfen Sie das Array auf falsche Werte.

Jeder sollte Array-Methoden verwendet haben: filter, some, every. Diese Methoden können mit der booleschen Methode verwendet werden, um wahre und falsche Werte zu testen.

const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'

So funktioniert es. Wir wissen, dass diese Array-Methoden eine Rückruffunktion akzeptieren, daher übergeben wir einen Booleschen Wert als Rückruffunktion. Die boolesche Funktion selbst akzeptiert einen Parameter und gibt abhängig von der Wahrheit des Parameters „true“ oder „false“ zurück. Also:

const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false

ist äquivalent zu:

myArray.filter(val => Boolean(val));

10. Arrays reduzieren

Auf dem Prototyp-Array gibt es eine Methode flat, die aus einem Array von Arrays ein einzelnes Array erstellt.

myArray.filter(Boolean);

Sie können auch eine Tiefenstufe definieren, die angibt, wie tief eine verschachtelte Array-Struktur abgeflacht werden soll. Zum Beispiel:

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat(); 
//[ { id: 1 }, { id: 2 }, { id: 3 } ]

11.Object.entries

Die meisten Entwickler verwenden die Object.keys-Methode, um über Objekte zu iterieren. Diese Methode gibt nur ein Array von Objektschlüsseln zurück, keine Werte. Wir können Object.entries verwenden, um Schlüssel und Werte abzurufen.

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

Um über ein Objekt zu iterieren, können wir Folgendes tun:

const person = {
  name: '前端小智',
  age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]

Beide der oben genannten Methoden geben das gleiche Ergebnis zurück, aber Object.entries ist einfacher, die Schlüssel-Wert-Paare zu erhalten.

12.replaceAll-Methode

Um in JS alle Vorkommen einer Zeichenfolge durch eine andere Zeichenfolge zu ersetzen, müssen wir einen regulären Ausdruck wie diesen verwenden:

Object.keys(person).forEach((key) => {
  console.log(`${key} is ${person[key]}`);
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key} is ${value}`);
});
// name is 前端小智
// age is 20

Aber in ES12 gab es eine neue Methode namens replaceAll zu String.prototype hinzugefügt, wodurch alle Vorkommen einer Zeichenfolge durch einen anderen Zeichenfolgenwert ersetzt werden.

const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

13. Zahlentrennzeichen

Sie können einen Unterstrich als Zahlentrennzeichen verwenden, was das Zählen der Nullen in der Zahl erleichtert.

// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000

下划线分隔符也可以用于BigInt数字，如下例所示

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = 'on';

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。

const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a) {
  a = b
}

检查a的值是否为真，如果为真，那么更新a的值。使用逻辑或 ||操作符也可以做同样的事情。

const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);

使用空值合并操作符 ??:

const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined) {
  a = b;
}

注意：??操作符只检查 null 或 undefined 的值。

【相关推荐：javascript学习教程】

Das obige ist der detaillierte Inhalt vonFassen Sie 15 JavaScript-Entwicklungsfähigkeiten zusammen (organisiert und geteilt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!