分享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实现右键菜单栏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了原生js实现图片放大缩小计时器效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现下拉列表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家详细介绍了JavaScript实现简单的音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
正如标题所言，js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。这就需要我们自己来权衡了，下面有个不错的示例2013-12-12
今天就给大家介绍一个特别基础的东西，javascript中函数的一点儿小知识之js代码的执行顺序问题，需要的朋友参考下吧2017-10-10
滑动门JS并封装成类2008-03-03
本文梳理lodash中那些高频使用的超究极无敌好用方法,熟练使用下面的十个方法能够让你的代码原地起飞,为你的开发之旅极大的减轻心智负担,快跟随小编一起学习一下吧2024-01-01
判断浏览器是否支持ActiveX控件，如果浏览器支持ActiveX控件可以利用2010-11-11
最新评论