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); // false3. 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 byeconst 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: Sie können auch die folgende optionale Funktionskette verwenden: const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0
Nach dem Login kopieren
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); // undefinedconst person = {
firstName: '前端',
lastName: '小智',
printName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined8. 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
const stringNumer = '123'; console.log(+stringNumer); //123 console.log(typeof +stringNumer); //'number'
const myString = 25 + ''; console.log(myString); //'25' console.log(typeof myString); //'string'
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
myArray.filter(val => Boolean(val));
myArray.filter(Boolean);
const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat();
//[ { id: 1 }, { id: 2 }, { id: 3 } ]const arr = [0, 1, 2, [[[3, 4]]]]; console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]
const person = {
name: '前端小智',
age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]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 20const str = 'Red-Green-Blue'; // 只规制第一次出现的 str.replace('-', ' '); // Red Green-Blue // 使用 RegEx 替换所有匹配项 str.replace(/\-/g, ' '); // Red Green Blue
// 难以阅读 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
