11个常用JS小小技巧

2022-06-01 0 834

在我们的日常开发过程中,我们经常会遇到数字与字符串转换,检查对象中是否存在对应值,条件性操作对象数据,过滤数组中的错误值,等等这类处理。

在这里,整理出了一些常用的小技巧,这些技巧是我比较喜欢的❤️,可以使我们的代码更精简、更干净,且非常实用。

  1. 通过条件判断向对象添加属性
const isValid = false;
const age = 18;

// 我们可以通过展开运算符向对象添加属性
const person = {
    id: 'ak001',
    name: 'ak47',
    ...(isValid && {isActive: true}),
    ...((age > 18 || isValid) && {cart: 0})
}

console.log('person', person)
  1. 检查对象中是否存在某个属性
const person = {
    id: 'ak001',
    name: 'ak47'
}

console.log('name' in person); // true
console.log('isActive' in person); // false
  1. 解构赋值
const product = {
  id: 'ak001',
  name: 'ak47'
}

const { name: weaponName } = product;

console.log('weaponName:', weaponName); // weaponName: ak47

// 通过动态key进行解构赋值
const extractKey = 'name';
const { [extractKey]: data } = product;

console.log('data:', data); // data: ak47
  1. 循环遍历一个对象的key和value
const product = {
  id: 'ak001',
  name: 'ak47',
  isSale: false
}

Object.entries(product).forEach(([key, value]) => {
  if(['id', 'name'].includes(key)) {
    console.log('key:',key, 'value:',value)
  }
})

// key: id value: ak001
// key: name value: ak47
  1. 使用可选链(Optionalchaining)避免访问对象属性报错
const product = {
  id: 'ak001',
  name: 'ak47'
}

console.log(product.sale.isSale); // throw error

console.log(product?.sale?.isSale); // undefined

注意⚠️: 在实际使用场景中,有些场景对于我们要获取的属性是非必需的,我们可以通过上面这种方式去避免报错出现;但是有些场景下一些属性是必须的,不然就会影响我们的实际功能,这个时候还是尽量给出清晰的报错提示来解决这种错误的出现。

6.检查数组中falsy的值

const fruitList = ['apple', null, 'banana', undefined];

// 过滤掉falsy的值
const filterFruitList = fruitList.filter(Boolean);
console.log('filterFruitList:', filterFruitList); 
// filterFruitList:['apple', 'banana']
// 检查数组中是否有truthy的值
const isAnyFruit = fruitList.some(Boolean);
console.log('isAnyFruit:', isAnyFruit); // isAnyFruit: true

7.数组去重

const fruitList = ['apple', 'mango', 'banana', 'apple'];

const uniqList = [...new Set(fruitList)]
console.log('uniqList:', uniqList); // uniqList: ['apple', 'mango', 'banana']
  1. 检查是否为数组类型
const fruitList = ['apple', 'mango'];

console.log(typeof fruitList); // object
console.log(Array.isArray(fruiltList)); // true

9.数字&字符串类型转换

const personId = '007';
console.log('personId:', +personId, 'type:', typeof +personId); 
// personId: 7 type: number

const personId = 119;
console.log('personId:', personId + '', 'type:', typeof (personId + '')); 
// personId: 119 type: string
  1. 巧用空值合并(??)
let data = undefined ?? 'noData;
console.log('data:', data); // data: noData

data = null ?? 'noData';
console.log('data:', data); // data: noData

data = 0 ?? null ?? 'noData';
console.log('data:', data); // data: noData

// 当我们根据变量自身判断时
data ??= 'noData';
console.log('data:', data); // data: noData

和或(||) 运算符的区别?\
或运算符针对的是falsy类的值 (0,’ ’, null, undefined, false, NaN),而空值合并仅针对null和undefined生效;

  1. 通过!!进行布尔转换
console.log('this is not empty:', !!'')
// this is not empty: false

console.log('this is not empty:', !!'Data')
// this is not empty: true

最后,希望这些小小技巧能够帮助到大家的日常开发

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 互联网技术 11个常用JS小小技巧 https://www.lingchenw.cn/jishu/1659.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载