本文总结了5个提升JavaScript代码简洁性与可读性的技巧，包括利用Boolean过滤空值、数组与对象的解构赋值、ES12引入的数字分隔符、箭头函数直接返回对象的处理方式，以及异步数据链式处理。掌握这些写法有助于优化代码结构。
前言
JavaScript 语言入门门槛较低，但想要全面精通却颇具挑战；它包含许多独特的行为特征，只有经过长期的实际开发与应用，才能逐步深入理解其底层逻辑。
本文整理了几个 JavaScript 的代码片段，其中包含一些实用的编码技巧，或许能为你带来新的启发，一起探索吧。
过滤空值
filter() 方法用于创建一个新数组，新数组中的元素包含原数组中所有通过指定条件检测的元素。
需要注意的是：filter() 方法不会对空数组执行检测操作。
同时需注意：filter() 方法不会修改原始数组。
若要使用 filter() 过滤掉 null、undefined 或空字符串等“空”值，可以利用 .filter(Boolean) 这一简洁写法。
该写法会将所有空值转换为 false 并从列表中移除，实现方式既优雅又高效。
const groceries = ['apple', null, 'milk', undefined, 'bread', ''];
const cleanList = groceries.filter(Boolean);
console.log(cleanList);
// 'apple', 'milk', 'bread';数组对象解构
我们在开发中经常使用 ES6 的解构语法。当数组中的每一项都是对象，且需要获取数组第一个对象中的某个属性值时，可以采用如下写法。
const people = [
{
name: "Lisa",
age: 20,
},
{
name: "Pete",
age: 22,
},
{
name: "Caroline",
age: 60,
}
];
const [{age}] = people;
console.log(age);
// 20此外，还可以利用逗号占位符的方式，指定跳过某些项而直接对特定位置的项进行赋值。
const people = [
{
name: "Lisa",
age: 20,
},
{
name: "Pete",
age: 22,
},
{
name: "Caroline",
age: 60,
}
];
const [, , caroline] = people;
console.log(caroline);
// {
// name: "Caroline",
// age: 60,
// }当然，这里也包含了常见的对象解构赋值用法。
const caroline = {
firstNm: 'Caroline',
ag: 27,
};
const {firstNm: firstName, ag: age } = caroline;
console.log(firstName, age);
// Caroline, 27分隔数字
在较大的数字中使用分隔符号，可以显著提高代码的可读性；这是 ES12 标准引入的新特性。
const bigNumber = 1_000_000;
console.log(bigNumber);
// 1000000箭头函数直接返回对象
当使用箭头函数需要直接返回一个对象时，为了避免与函数体的大括号 { 产生歧义，只需在对象外层包裹一层小括号 ( 即可解决该问题。
const createPerson = (age, name, nationality) => ({
age,
name,
nationality,
});
const caroline = createPerson(27, 'Caroline', 'US');
console.log(caroline);
// {
// age: 27,
// name: 'Caroline'
// nationality: 'US',
// }await 链条
我们可以将 filter 和 map 方法链接在 await 方法之后，从而形成链式调用，对获取的数据进行过滤或映射处理。
const chainDirectly = (await fetch('https://www.people.com'))
.filter(person => age > 20)
.filter(person => nationality === 'NL')总结
关于 JavaScript 写法技巧的介绍到此结束，更多相关内容请搜索本站历史文章或继续阅读后续文章，感谢大家的支持！