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

更新时间：2021年09月29日 11:45:52 作者：傲夫靠斯

JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧，在平时的工作中可以大大的缩短代码量和开发时间。,需要的朋友可以参考下面文章内容哟

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

您可能感兴趣的文章:

JS
小技巧

autojs使用intent发送邮件带附件实现示例
这篇文章主要为大家介绍了autojs使用intent发送邮件带附件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
微信小程序（三）：网络请求
本篇文章主要介绍了微信小程序（三）：网络请求。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
Fabric.js 保存自定义属性方法示例
这篇文章主要为大家介绍了Fabric.js 保存自定义属性方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
js类型判断内部实现原理示例详解
这篇文章主要为大家介绍了js类型判断内部实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下
2016-09-09
JSON与JS对象的区别与对比
JSON是什么？JSON是JS的一种简单数据格式,JSON是JavaScript原生格式，它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号
2017-03-03
详解微信小程序开发之——wx.showToast(OBJECT)的使用
本篇文章主要介绍了微信小程序开发之——wx.showToast(OBJECT)的使用，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
面试手写实现Promise.all
这篇文章主要为大家介绍了面试手写实现Promise.all过程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
JS ES新特性之变量的解耦赋值
这篇文章主要介绍了JS ES新特性变量的解耦赋值，ECMAScript 2015中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解耦赋值，下面一起进入文章学习该内容,需要的朋友也可以参考一下
2021-12-12
JavaScript前端学算法题解LeetCode最大重复子字符串
这篇文章主要为大家介绍了JavaScript前端学算法题解LeetCode最大重复子字符串，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09