iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >分享5个JavaScript的写法小技巧
  • 980
分享到

分享5个JavaScript的写法小技巧

2024-04-02 19:04:59 980人浏览 安东尼
摘要

目录前言过滤空值数组对象解构分隔数字箭头函数直接返回对象await 链条总结前言 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写法小技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 分享5个JavaScript的写法小技巧

本文链接: https://www.lsjlt.com/news/138725.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分享5个JavaScript的写法小技巧
    目录前言过滤空值数组对象解构分隔数字箭头函数直接返回对象await 链条总结前言 JavaScript 易上手,但是难以全面掌握;它有许多“怪癖”,只有在长时...
    99+
    2024-04-02
  • 关于JavaScript中JSON的5个小技巧分享
    目录1.格式化2.隐藏字符串化数据中的某些属性3.使用toJSON创建自定义输出格式4.恢复数据5.使用revivers隐藏数据1. 格式化 默认的字符串化器还会缩小 JSON,看起...
    99+
    2024-04-02
  • 分享11个常用JavaScript小技巧
    目录1.通过条件判断向对象添加属性2.检查对象中是否存在某个属性3.解构赋值4.循环遍历一个对象的key和value5.使用可选链(Optionalchaining)避免访问对象属性...
    99+
    2024-04-02
  • 5个实用的Pandas技巧分享
    本篇内容主要讲解“5个实用的Pandas技巧分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“5个实用的Pandas技巧分享”吧!目录Pandas技巧1&...
    99+
    2024-04-02
  • 分享Python 的十个小技巧
      一. 列表、字典、集合、元组的使用  from random import randint, sample  # 列表解析  data = [randint(-10, 10) for _ in xrange(10)]  filter(l...
    99+
    2023-01-31
    小技巧 Python
  • 分享几个写简洁java代码的小技巧
    目录1.定义配置文件信息2.用@RequiredArgsConstructor代替@Autowired3.不要返回null4.ifelse5.减少controller业务代码6.将字...
    99+
    2024-04-02
  • 总结分享10个超棒的JavaScript简写技巧
    目录1.合并数组2.合并数组(在开头位置)3.克隆数组4.解构赋值5.模板字面量6.For循环7.箭头函数8.在数组中查找对象9.将字符串转换为整数10.短路求值补充几点编码习惯1....
    99+
    2024-04-02
  • 分享JPA的几个小技巧
    目录1. 基本字段介绍2. 自定义ID生成器3. 自动填充字段4. End关系型数据库其实很讨人厌,尤其是在你使用数据库驱动的开发模式时。需要首先把表给创建好了,然后再使用代码生成器...
    99+
    2024-04-02
  • 8个JavaScript条件语句优化小技巧分享
    目录1、Array.includes2、Array.every3、尽早 return4、三元运算符5、switch...case6、Map/Object7、默认函数参数和解构8、逻辑...
    99+
    2024-04-02
  • 5个实用的PHP参数隐藏技巧分享
    5个实用的PHP参数隐藏技巧分享 PHP是一种广泛应用于Web开发的脚本语言,常见的应用包括网站后端开发、数据处理等。在进行PHP编程时,对参数的隐藏和保护是非常重要的。本文将分享5个...
    99+
    2024-03-09
    安全编码 隐藏敏感数据 参数加密 敏感数据
  • 常用的29个CSS小技巧分享
    本篇内容主要讲解“常用的29个CSS小技巧分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“常用的29个CSS小技巧分享”吧!1.清除图片下方出现几像素的空白间...
    99+
    2024-04-02
  • 分享常用的3个C++小技巧
    目录1、头文件是引用<iostream.h>还是<iostream>?2、逗号分割表达式3、在main函数之前运行代码1、头文件是引用<iostream...
    99+
    2024-04-02
  • Python语言的10个小技巧分享
    这篇文章主要讲解了“Python语言的10个小技巧分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python语言的10个小技巧分享”吧!10个Python小技巧1. 用ZIP处理列表假设...
    99+
    2023-06-16
  • 提高Python代码可读性的5个技巧分享
    目录1. Comments2. Explicit Typing3. Docstrings (Documentation Strings)4. Readable Variable Na...
    99+
    2024-04-02
  • 7个Python中的隐藏小技巧分享
    目录前言1、功能属性2、不完整代码的占位符3、 eval() 函数4、在 Python 解析器中使用以下命令启动文件托管服务器5、无限参数6、Zip() 方法7、旋转列表前言 Pyt...
    99+
    2023-03-20
    Python隐藏技巧分享 Python隐藏技巧 Python技巧
  • javascript写法技巧
    JavaScript是一种用于Web开发的高级编程语言,它已成为现代Web开发中必不可少的一部分。无论是在前端还是后端开发,JavaScript都是必学的语言之一。学习JavaScript需要花费一定的时间和精力,同时也需要一些技巧和诀窍。...
    99+
    2023-05-14
  • 分享7个杀手级JS小技巧
    目录一、数组乱序二、复制到剪贴板三、数组去重四、检测黑暗模式五、滚动到顶部六、滚动到底部七、生成随机颜色一、数组乱序 在使用需要某种程度的随机化的算法时,你会经常发现洗牌数组是一个相...
    99+
    2024-04-02
  • 常用的JavaScript方法和技巧分享
    这篇文章主要讲解了“常用的JavaScript方法和技巧分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“常用的JavaScript方法和技巧分享”吧!常用...
    99+
    2024-04-02
  • 分享5个Java接口性能提升的通用技巧
    目录前言1. 并发调用2. 避免大事务3. 添加合适的索引4. 返回更少的数据5. 使用缓存前言 作为后端开发人员,我们总是在编写各种API,无论是为前端web提供数据支持的HTTP...
    99+
    2023-01-03
    Java接口性能提升技巧 Java接口性能提升 Java接口性能
  • Vue中$once的两个实用小技巧分享
    目录前言清除定时器$once/$emit + async/await 实现 Dialog 同步执行总结前言 在 Vue 中有很多 API 都有很实用的地方,只是需要挖掘适用的场景,这...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作