JS 4个超级实用的小技巧 提升开发效率


Posted in Javascript onOctober 05, 2021

1、短路判断

当只需要简单的if条件时,可使用此方法

let x = 0;
let foo = () => console.log('执行了');

if(x === 0){
  foo()
}

通过使用&&运算符来实现同样的if功能,如果&&之前的条件为false,则&&之后的代码将不会执行。

let x = 0;
let foo = () => console.log('执行了');

x === 0 && foo()

还可增加更多的if条件,不过这也会增加语句的复杂性,不建议超过2个以上条件。

let x = 0;
let y = 0;
let foo = () => console.log('执行了');

x === 0 && y === 0 && foo()

2、可选链操作符 ( ? )

我们经常会判断JS对象中是否存在某个key,因为有时不确定后台API返回的数据是否是正确的。

user对象中包含一个属性name的对象,name对象有一个属性firstName,使用user.name.firstName直接进行判断的话,如果name属性不存在的话就会报错,所以在判断之前还需要判断user.name是否存在,需要嵌套两层if判断。

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

if(user.name){
  if(user.name.firstName){
    console.log('user对象 包含 firstName 字段')
  }
}

这时我们可以使用?操作符进行简化操作,如果user.name不存在,也将返回false,所以直接使用一层判断

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

if(user.name?.firstName){
  console.log('user对象 包含 firstName 字段')
}

3、空值合并操作符 ( ?? )

与if/else相比来说,三元运算符更加简短。如果逻辑简单,使用起来很方便。

例如:

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

let foo = () => {
  return user.name?.firstName ? 
    user.name.firstName : 
    'firstName 不存在'
}

console.log(foo())

首先使用?运算符来判读是否存在,存在即返回,不存在则返回false,进入后面的逻辑

使用??运算法使代码更加精简

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

let foo = () => {
  return user.name?.firstName ?? 
  'firstName 不存在'
}
  
console.log(foo())

4、return终止函数

下面函数判断x的值,使用大量if else嵌套

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x 小于 1'
  } else {
    if(x > 1){
      return 'x 大于 1'
    }else{
      return 'x 等于 1'
    }
  }
}

console.log(foo())

这种if else嵌套可以删除else条件来简化代码,因为return语句将终止代码执行并返回函数。

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x 小于 1'
  }
  if(x > 1){
    return 'x 大于 '
  }
  return 'x 等于 1'
}

console.log(foo())

到此这篇关于JS 4个超级实用的小技巧 提升开发效率的文章就介绍到这了,更多相关4个实用JS小技巧 提升开发效率内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vue实现简单跑马灯效果
May 25 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
Javascript之datagrid查询详解
Sep 15 #Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
JavaScript 数组去重详解
Sep 15 #Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 #Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php并发加锁示例
2016/10/17 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python实现多进程通信实例分析
2019/09/01 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
详解python变量与数据类型
2020/08/25 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
高校优秀辅导员事迹材料
2014/05/07 职场文书
农村党员对照检查材料
2014/09/24 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
分享Python异步爬取知乎热榜
2022/04/12 Python