写点什么

5 个 JavaScript 写法小技巧分享

作者:掘金安东尼
  • 2022 年 9 月 04 日
    广东
  • 本文字数:1016 字

    阅读完需:约 3 分钟

5 个 JavaScript 写法小技巧分享

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



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

过滤空值

使用 filter() 过滤 “空” 值,如 nullundefined 或空字符串,可以使用 .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>


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

发布于: 刚刚阅读数: 5
用户头像

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

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

评论

发布
暂无评论
5 个 JavaScript 写法小技巧分享_JavaScript_掘金安东尼_InfoQ写作社区