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 相关文章推荐
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
JS实现拖动示例代码
Nov 01 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
微信小程序实现星级评价
Nov 20 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP 命名空间实例说明
2011/01/27 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
Vue程序调试的方法
2019/06/17 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
Python 字符串操作方法大全
2014/03/11 Python
Python入门篇之对象类型
2014/10/17 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
酒店七夕情人节活动策划方案
2014/08/24 职场文书
2014年创卫工作总结
2014/11/24 职场文书
礼仪培训心得体会
2016/01/22 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers