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

目录
  • 1、短路判断
  • 2、可选链操作符 ( ? )
  • 3、空值合并操作符 ( ?? )
  • 4、return终止函数

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小技巧 提升开发效率内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript编码小技巧分享

    三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. const x = 20; let big; if (x > 10) { big = true; } else { big = false; } //这样写... const big = x > 10 ? true : false; Short-circuit Evaluation 分配一个变量值到另一个变量的时候,你可能想要确保变量不是null.undefined或空.你可以写一个有多个if的条件语句或者Short

  • 9个JavaScript日常开发小技巧

    1.生成指定范围的数字 在某些情况下,我们会创建一个处在两个数之间的数组.假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法 let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000] // 还有这种方式,但对于很的范围就不太稳定 Array.from({ length: end - start + 1 }, (_, i

  • JavaScript前端开发时数值运算的小技巧

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6

  • 让你5分钟掌握9个JavaScript小技巧

    译者按: 技巧虽好.重在掌握并使用起来! 原文: Learn these neat JavaScript tricks in less than 5 minutes 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 1. 删除数组尾部元素 一个简单的用来清空或则删除数组尾部元素的简单方法就是改变数组的length属性值. const arr = [11, 22, 33, 44, 55, 66]; // truncanting arr.l

  • JavaScript的一些小技巧分享

    数组去重 ES6提供了几种简洁的数组去重的方法,但该方法并不适合处理非基本类型的数组.对于基本类型的数组去重,可以使用... new Set()来过滤掉数组中重复的值,创建一个只有唯一值的新数组. const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); > Result:(4) [1, 2, 3, 5] 这是ES6中的新特性,在ES6之前,要实现同

  • JavaScript小技巧带你提升你的代码技能

    目录 1.过滤唯一值 2.短路求值(Short-Circuit Evaluation) 2.1场景举例 3.转换Boolean型 4.转换String型 5.转换Number类型 6.快速求幂 7.快速Float转Integer 7.1使用场景 8.类中自动绑定 9.截取数组 10.获取数组中的最后的元素 11.格式化JSON代码 今天,我将跟大家分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是又很容易被忽略. 1.过滤唯一值 Set类型是在

  • JS利用map整合双数组的小技巧分享

    JS利用map整合双数组的小技巧分享

    目录 前言 模拟数据 合并后数据 合并思路 代码展示&解析 第一步 第二步 第三步 第四步 全部代码 总结 前言 最近因公司业务需求编写ECharts图表展示相关公司阶段型业务相关数据变化,需要服务端进行数据查询返回给前端进行数据展示.但是由于反回的数据不便于前端 ECharts展示所以需要进行数据整合,奈何本人经验不足只能请教公司大佬,在大佬帮助下完成了数据整合,并学到一个前所未闻的合并方法今天分享给大家. 模拟数据 下图是将要被合并的两数组 合并后数据 合并后数据要求以时间为唯一的key进行

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

    目录 1.短路判断 2.可选链操作符 ( ? ) 3.空值合并操作符 ( ?? ) 4.return终止函数 1.短路判断 当只需要简单的if条件时,可使用此方法 let x = 0; let foo = () => console.log('执行了'); if(x === 0){ foo() } 通过使用&&运算符来实现同样的if功能,如果&&之前的条件为false,则&&之后的代码将不会执行. let x = 0; let foo = () =&g

  • 让的PHP代码飞起来的40条小技巧(提升php效率)

    1.如果一个方法能被静态,那就声明他为静态的,速度可提高1/4; 2.echo的效率高于print,因为echo没有返回值,print返回一个整型; 3.在循环之前设置循环的最大次数,而非在在循环中; 4.销毁变量去释放内存,特别是大的数组; 5.避免使用像__get, __set, __autoload等魔术方法; 6.requiere_once()比较耗资源; 7.在includes和requires中使用绝对路径,这样在分析路径花的时间更少; 8.如果你需要得sexinsex到脚本执行时的

  • 值得收藏的SpringBoot 实用的小技巧

    前言 最近分享的一些源码.框架设计的东西.我发现大家热情不是特别高,想想大多数应该还是正儿八经写代码的居多:这次就分享一点接地气的: SpringBoot 使用中的一些小技巧. 算不上多高大上的东西,但都还挺有用. 屏蔽外部依赖 第一个是屏蔽外部依赖,什么意思呢? 比如大家日常开发时候有没有这样的烦恼: 项目是基于 SpringCloud 或者是 dubbo 这样的分布式服务,你需要依赖许多基础服务. 比如说某个订单号的生成.获取用户信息等. 由于服务拆分,这些功能都是在其他应用中以接口的形式提

  • 20个JS简写技巧提升工作效率

    目录 当同时声明多个变量时,可简写成一行 利用解构,可为多个变量同时赋值 巧用三元运算符简化if else 使用||运算符给变量指定默认值 使用&&运算符简化if语句 使用解构交换两个变量的值 适用箭头函数简化函数 使用字符串模板简化代码 多行字符串也可使用字符串模板简化 对于多值匹配,可将所有值放在数组中,通过数组方法来简写 巧用ES6对象的简洁语法 使用一元运算符简化字符串转数字 使用repeat()方法简化重复一个字符串 使用双星号代替Math.pow() 使用双波浪线运算符(~~)

  • 56个实用的JavaScript 工具函数助你提升开发效率

    56个实用的JavaScript 工具函数助你提升开发效率

    目录 1. 数字操作 (1)生成指定范围随机数 2. 数组操作 (1)数组乱序 (2)数组扁平化 (3)数组中获取随机数 3. 字符串操作 (1)生成随机字符串 (2)字符串首字母大写 (3)手机号中间四位变成* (4)驼峰命名转换成短横线命名 (5)短横线命名转换成驼峰命名 (6)全角转换为半角 (7)半角转换为全角 4. 格式转化 (1)数字转化为大写金额 (2)数字转化为中文数字 5. 操作存储 (1)存储loalStorage (2)获取localStorage (3)删除localSt

  • Go语言提升开发效率的语法糖技巧分享

    目录 前言 可变长参数 声明不定长数组 init函数 忽略导包 忽略字段 json序列化忽略某个字段 json序列化忽略空值字段 短变量声明 类型断言 切片循环 判断map的key是否存在 select控制结构 前言 哈喽,大家好,我是asong. 每门语言都有自己的语法糖,像java​的语法糖就有方法变长参数.拆箱与装箱.枚举.for-each​等等,Go​语言也不例外,其也有自己的语法糖,掌握这些语法糖可以助我们提高开发的效率,所以本文就来介绍一些Go语言的语法糖,总结的可能不能全,欢迎评论

  • 分享一些iOS开发实用的小技巧

    分享一些iOS开发实用的小技巧

    1.设置navigationbar title颜色 UIColor *whiteColor = [UIColor whiteColor]; NSDictionary *dic = [NSDictionary dictionaryWithObject:whiteColor forKey:NSForegroundColorAttributeName]; [self.navigationController.navigationBar setTitleTextAttributes:dic]; 2.获取

  • JavaScript实用代码小技巧

    在上次的 "Chrome DevTools 你可能不知道的小技巧" 文中,得到很多开发朋友的反馈确实不知道这些小技巧.今天,我们来聊一聊在 EcmaScript5/6+ 中的一些小技巧,欢迎评论区讨论下更多技巧. JSON.stringify 我们平时经常会用到JSON 对象,比如当我们要实现对象的深拷贝时,我们可以用JSON 对象的JSON.stringify和JSON.parse 来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系.在使用localStorage 时,也会用到

  • JDK源码中一些实用的“小技巧”总结

    JDK源码中一些实用的“小技巧”总结

    前言 这段时间比较闲,就看起了jdk源码.一般的一个高级开发工程师, 能阅读一些源码对自己的提升还是蛮大的.本文总结了一些JDK源码中的"小技巧",分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1 i++ vs i-- String源码的第985行,equals方法中 while (n--!= 0) { if (v1[i] != v2[i]) return false; i++; } 这段代码是用于判断字符串是否相等,但有个奇怪地方是用了i--!=0来做判断,我们通

  • vue.js项目中实用的小技巧汇总

    vue.js项目中实用的小技巧汇总

    前言 Vue.js 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1.安装jQuery

随机推荐