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中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
一个实用的php验证码类
2017/07/06 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
node.js中的require使用详解
2014/12/15 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python----数据预处理代码实例
2019/03/20 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
20年同学聚会邀请函
2014/02/04 职场文书
三方协议书范本
2014/04/22 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
请假条应该怎么写?
2019/06/24 职场文书
JavaScript前端面试组合函数
2022/06/21 Javascript