5 个 JavaScript 写法小技巧分享

掘金安东尼

发布于 2022-09-19 10:52:11

3440

发布于 2022-09-19 10:52:11

文章被收录于专栏：掘金安东尼

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-02-03，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

javascript

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

javascript

node.js

登录后参与评论

0 条评论

热度