分享5个JavaScript的写法小技巧

 更新时间:2022年02月10日 12:12:09   作者:掘金安东尼  
写代码的时候总有一些东西是会重复出现的,次数多了你就会想找找捷径了,下面这篇文章主要给大家介绍了关于5个JavaScript的写法小技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

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写法小技巧的文章就介绍到这了,更多相关JavaScript写法小技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现密码强度检测【附示例】

    js实现密码强度检测【附示例】

    下面小编就为大家带来一篇js实现密码强度检测【附示例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-03-03
  • 浅谈js中test()函数在正则中的使用

    浅谈js中test()函数在正则中的使用

    下面小编就为大家带来一篇浅谈js中test()函数在正则中的使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 原生js实现秒表计时器功能

    原生js实现秒表计时器功能

    这篇文章主要为大家详细介绍了原生js实现秒表计时器功能,可以开始、暂停、清除,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Javascript中将变量转换为字符串的三种方法

    Javascript中将变量转换为字符串的三种方法

    这篇文章主要给大家介绍了关于Javascript中将变量转换为字符串的三种方法,这三种方法分别是:value.toString()、"" + value和String(value),文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • js如何清空input file的值

    js如何清空input file的值

    这篇文章主要介绍了js如何清空input file的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 第一次接触神奇的Bootstrap

    第一次接触神奇的Bootstrap

    第一次接触神奇的Bootstrap,Bootstrap提供了用户友好、扩浏览器的解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • easyui tree带checkbox实现单选的简单实例

    easyui tree带checkbox实现单选的简单实例

    下面小编就为大家带来一篇easyui tree带checkbox实现单选的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS原生瀑布流效果实现

    JS原生瀑布流效果实现

    这篇文章主要介绍了JS原生瀑布流效果实现 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js实现瀑布流布局(无限加载)

    js实现瀑布流布局(无限加载)

    这篇文章主要为大家详细介绍了js实现瀑布流布局,无限加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 如何用JavaScript让你的浏览器说话

    如何用JavaScript让你的浏览器说话

    这篇文章主要介绍了如何用JavaScript让你的浏览器说话,对语音感兴趣的同学,可以实验一下
    2021-04-04

最新评论