5 个 JavaScript 写法小技巧分享

2022 年 8 月 31 日
广东
本文字数：1016 字
阅读完需：约 3 分钟

JavaScript 易上手，但是难以全面掌握；它有许多“怪癖”，只有在长时间的使用它，才能逐渐揭开它神秘的面纱~

本篇带来 JavaScript 几个片段代码，里面有些小技巧，肯定有你不知道~ 冲！

过滤空值

使用 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')

复制代码

<hr>

我是掘金安东尼，输出暴露输入，技术洞见生活，再会~

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/2fe3d7b99b89d73df39c6bce9】。文章转载请联系作者。

掘金安东尼

关注

安东尼陪你度过漫长编程岁月~ 2022.07.14 加入

社会我瓜哥，人狠话不多😎 微信 anthony1453，加我交个朋友😎 正联合【机械工业出版社】出版《程序员成长手册》，敬请期待😎 真正的大师，永远怀着一颗学徒的心（易）😎

发布

暂无评论

创作场景

5 个 JavaScript 写法小技巧分享

过滤空值

数组对象解构

分隔数字

箭头函数直接返回对象

await 链条

掘金安东尼

评论