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中简单的登录界面制作方法
Aug 19 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
js创建对象的方式总结
Jan 10 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
vue双向绑定及观察者模式详解
Mar 19 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php URL验证正则表达式
2011/07/19 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
很可爱的输入框
2008/08/03 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
webpack入门必知必会
2017/01/16 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
python实现双人五子棋(终端版)
2020/12/30 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015小学师德工作总结
2015/07/21 职场文书
JavaScript组合继承详解
2021/11/07 Javascript