JS中4个提升开发效率的小技巧

这篇文章将为大家详细讲解有关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个提升开发效率的小技巧"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。