JavaScript 的10个好用的开发技巧
JavaScript 是前端开发中的必备语言。但是我发现很多同学对于 JavaScript 的技巧使用却并不熟悉。所以，今天咱们就来分享一下开发技巧，帮你更好地使用 JavaScript，提升开发效率！
01：使用别名进行析构
想要获取到一个对象的多个属性时。使用 解构 + 别名 的方式一次获取多个对象的属性，并重新命名
const person = { firstName: 'John', lastName: 'Doe', age: 30 };
const { firstName: fName, lastName: lName } = person;
console.log(fName); // Output: John
console.log(lName); // Output: Doe
02：可选链接
可选的链运算符(？.)允许您访问对象的嵌套属性，而 不必担心中间属性是空 的还是未定义的。（注意：不要滥用！！！）
const user = {
info: {
address: {
city: 'JiNan'
}
}
};
const city = user?.info?.address?.city;
console.log(city); // 输出: JiNan
const city = user?.hello?.city;
console.log(city); // 不会报错
03：Nullish 合并操作符
'??'是一个Nullish合并操作符（Nullish coalescing operator）。它用于判断一个值是否为null或undefined，如果是的话，则返回另一个值。
它与'||'或'??'操作符有所不同，因为它只检查空值 ( null 或 undefined )的情况，而不是任何“假值” ( false , 0 , '' 等)的情况。
例如，下面的代码展示了'??'操作符的用法：
const foo = null ?? 'default value';
console.log(foo); // Output：'default value'
const bar = undefined ?? 'default value';
console.log(bar); // Output：'default value'
const baz = 0 ?? 'default value';
console.log(baz); // Output：0
04：动态对象键
可以使用方括号来定义对象字面量中的动态对象键。
const dynamicKey = 'dynamicProperty';
const obj = {
[dynamicKey]: '这是一个动态的属性'
};
console.log(obj.dynamicProperty); // 这是一个动态的属性
05：私有类字段
现在，JavaScript类支持使用#符号的私有字段。
私有字段不能从类外部访问，从而提供封装和信息隐藏。
class Counter {
#count = 0;
increment() {
this.#count++;
}
getCount() {
return this.#count;
}
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount()); //Output: 1
06：Promise.allSettled()
Promise.allSettled() 方法返回一个 Promise，该 Promise 在所有给定的 Promise 已经 resolve 或 reject 后 resolve，提供每个 Promise 的结果数组。
const promises = [
Promise.resolve('Resolved'),
Promise.reject('Rejected')
];
Promise.allSettled(promises)
.then(results => {
console.log(results);
});
// [{ status: "fulfilled", value: "Resolved" }, { status: "rejected", reason: "Rejected" }]
07：globalThis 全局对象
globalThis对象提供了一种在不同环境下（包括浏览器和Node.js）访问全局对象的一致方式。
console.log(globalThis === window); // 在浏览器场景下: true
console.log(globalThis === global); // 在 Node.js 中: outputs: true
08：RegExp匹配索引
正则表达式匹配现在提供有关 发生匹配的索引的信息。
const text = 'Hello, world!';
const pattern = /world/;
const match = text.match(pattern);
console.log(match.index); // 7
09：flatMap
flatMap() 方法将 map() 和 flat() 的效果结合到一个方法中。
const numbers = [1, 2, 3];
const doubledAndFlattened = numbers.flatMap(num => [num * 2]);
console.log(doubledAndFlattened); // [2, 4, 6]
10：逻辑赋值运算符
JavaScript 引入了逻辑赋值运算符（&&=、||= 和 ??=），以简洁的方式将逻辑操作与赋值结合起来。
let x = false;
x ||= true;
console.log(x); // Output: true
原文地址：https://blog.csdn.net/qq_44848480/article/details/136389938
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！