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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
vue params、query传参使用详解
Sep 12 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
js+html实现点名系统功能
Nov 05 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 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
php魔术变量用法实例详解
2014/11/13 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python得到windows自启动列表的方法
2018/10/14 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
学python安装的软件总结
2019/10/12 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
《我为你骄傲》教学反思
2014/02/20 职场文书
运动会通讯稿500字
2014/02/20 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
应届生自荐书
2014/06/23 职场文书
见习报告怎么写
2014/10/31 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
庭外和解协议书
2016/03/23 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
python之json文件转xml文件案例讲解
2021/08/07 Python