分享几个JavaScript运算符的使用技巧

ECMAScript发展进程中,会有很多功能的更新,比如销毁,箭头功能,模块,它们极大的改变JavaScript编写方式,可能有些人喜欢,有些人不喜欢,但像每个新功能一样,我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符:空运算符,AND和OR运算符,这些运算符的出现,也是希望让我们的代码更干净简洁,下面分享几个优雅的JavaScript运算符使用技巧

一、可选链接运算符【?.】

可选链接运算符(Optional Chaining Operator) 处于ES2020提案的第4阶段,因此应将其添加到规范中。它改变了访问对象内部属性的方式,尤其是深层嵌套的属性。它也可以作为TypeScript 3.7+中的功能使用。

相信大部分开发前端的的小伙伴们都会遇到null和未定义的属性。JS语言的动态特性使其无法不碰到它们。特别是在处理嵌套对象时,以下代码很常见:

if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
}

上面的代码用于API响应,我必须解析JSON以确保名称存在。但是,当对象具有可选属性或某些配置对象具有某些值的动态映射时,可能会遇到类似情况,需要检查很多边界条件。

这时候,如果我们使用可选链接运算符,一切就变得更加轻松了。它为我们检查嵌套属性,而不必显式搜索梯形图。我们所要做的就是使用“?” 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符,并且如果未定义任何项,它将尽早返回。

对于静态属性用法是:

object?.property

对于动态属性将其更改为:

object?.[expression]

上面的代码可以简化为:

let title = data?.children?.[0]?.title;

然后,如果我们有:

let data;
console.log(data?.children?.[0]?.title) // undefined

data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

这样写是不是更加简单了呢? 由于操作符一旦为空值就会终止,因此也可以使用它来有条件地调用方法或应用条件逻辑

const conditionalProperty = null;
let index = 0;

console.log(conditionalProperty?.[index++]); // undefined
console.log(index);  // 0

对于方法的调用你可以这样写

object.runsOnlyIfMethodExists?.()

例如下面的parent对象,如果我们直接调用parent.getTitle(),则会报Uncaught TypeError: parent.getTitle is not a function错误,parent.getTitle?.()则会终止不会执行

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };

  parent.getName?.()   // parent
  parent.getTitle?.()  //不会执行

与无效合并一起使用

提供了一种方法来处理未定义或为空值和表达提供默认值。我们可以使用??运算符,为表达式提供默认值

console.log(undefined ?? 'codercao'); // codercao

因此,如果属性不存在,则可以将无效的合并运算符与可选链接运算符结合使用以提供默认值。

let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao

二、逻辑空分配(?? =)

expr1 ??= expr2

逻辑空值运算符仅在空值(空值或未定义)时才将值分配给expr1,表达方式:

x ??= y

可能看起来等效于:

x = x ?? y;

但事实并非如此!有细微的差别。

空的合并运算符(??)从左到右操作,如果x不为空,则短路。因此,如果x不为null或未定义,则永远不会对表达式y进行求值。因此,如果y是一个函数,它将根本不会被调用。因此,此逻辑赋值运算符等效于

x ?? (x = y);

三、逻辑或分配(|| =)

此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy与null有所不同,因为falsy可以是任何一种值:false,0,“”,null,undefined和NaN等

语法

x ||= y

等同于

x || (x = y)

在我们想要保留现有值(如果不存在)的情况下,这很有用,否则我们想为其分配默认值。例如,如果搜索请求中没有数据,我们希望将元素的内部HTML设置为默认值。否则,我们要显示现有列表。这样,我们避免了不必要的更新和任何副作用,例如解析,重新渲染,失去焦点等。我们可以简单地使用此运算符来使用JavaScript更新HTML:

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'

四、逻辑与分配(&& =)

可能你已经猜到了,此逻辑赋值运算符仅在左侧为真时才赋值。因此:

x &&= y

等同于

x && (x = y)

最后

本次分享几个优雅的JavaScript运算符使用技巧,重点分享了可选链接运算符的使用,这样可以让我们不需要再编写大量我们例子中代码即可轻松访问嵌套属性。但是IE不支持它,因此,如果需要支持该版本或更旧版本的浏览器,则可能需要添加Babel插件。对于Node.js,需要为此升级到Node 14 LTS版本,因为12.x不支持该版本。

如果你也有优雅的优雅的JavaScript运算符使用技巧,请不要吝惜,在评论区一起交流~

以上就是分享几个JavaScript运算符的使用技巧的详细内容,更多关于JavaScript运算符的使用的资料请关注我们其它相关文章!

(0)

相关推荐

  • 原生js中运算符及流程控制示例详解

    运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li

  • JavaScript中使用Spread运算符的八种方法总结

    Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中). 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 参数 iterable 必需. 迭代对象. arg0ToN 可选. 数组文本的一个或多个元素. args 可选. 函数的一个或多个参数. 本文将带大家了解如

  • 详解JavaScript中的Object.is()与"==="运算符总结

    三重相等运算符 === 严格检查2个值是否相同: 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是,ES2015规范引入了 Object.is(),其行为与严格的相等运算符几乎相同: Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是:什么时

  • JavaScript布尔运算符原理使用解析

    布尔运算符分为四种: 取反运算符(!) 且运算符(&&) 或运算符(||) 三元运算符( ? 表达式1 : 表达式2 ) 取反运算符(!) 用于将任何值转换为布尔值后再变为相反值,即true变false,false变true 取反运算符对以下六个值返回false,其余都返回true: undefined null '' false 0 NaN 如果对一个值取反两次,则相当于将其转换为了布尔值,与Boolean()函数的作用相同 !!1 等同于Boolean('1') 且运算符(&&

  • JS运算符简单用法示例

    本文实例讲述了JS运算符简单用法.分享给大家供大家参考,具体如下: js中的运算符 算术运算符:+,-,*,/,% 逻辑运算符:&,&&,|,||,! 自增运算符:++,--,+=,-= 关系运算符:<,>,=,<=,>=,!= 等于运算符:==,=== instance: <html> <head> <title>js运算符</title> <meta charset="UTF-8"

  • JavaScript逻辑运算符相关总结

    前言 关于 JavaScript 中的逻辑运算符,我们经常使用却可能不知道它的一些机制和用法. 机制 首先我们需要知道几种逻辑运算符的优先级是不同的(关于完整的运算符优先级,看运算符优先级),逻辑非>逻辑与>逻辑或>条件运算符(三目运算符).运算顺序条件运算符是从右向左,而逻辑与和逻辑或都是从左向右. //表达式的优先级导致结果不同 false && true || true // 结果为 true false && (true || true) // 结

  • JavaScript中展开运算符及应用的实例代码

    展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用. let obj1 = { value1: 1, value2: 2 }; let obj2 = {...obj1 }; console.log(obj2); // {value1: 1, value2: 2} 上面的用法实际相当于 obj2 = {value1: 1, value2: 2} 展开运算符的写法与obj2

  • JS运算符优先级与表达式示例详解

    前言 运算符优先级决定了表达式中运算执行的先后顺序,优先级越高的运算符会先执行. 运算符优先级 很多时候由于对运算符优先级的不确定,会用括号来确保表达式的执行顺序.如果搞清楚运算符的优先级,即使不用括号也能确保表达式按照正确的顺序执行. 其实单纯靠运算符的优先级来确定表达式的执行过程并不是一个绝对稳妥的做法,比如 new a()['b'] 这样的表达式就没法套用运算符优先级.当然一般情况下,绝大多数表达式我们都可以利用运算符优先级来判断,如果确实遇到比较复杂的难以直观判断出来的情况还是要查询 E

  • javascript的delete运算符知识点总结

    delete是一元操作符,它用来删除对象属性或者数组元素.就像 赋值.递增.递减运算符一样,delete也是具有副作用的,它是用来做删除操作的,不是用来返回一个值的,例如: var o = { x: 1, y: 2}; // 定义一个对象 delete o.x; // 删除一个属性 "x" in o // => false:这个属性在对象中不再存在 var a = [1,2,3]; // 定义一个数组 delete a[2]; // 删除最后一个数组元素 2 in a; // =

  • js表达式与运算符简单操作示例

    本文实例讲述了js表达式与运算符简单操作.分享给大家供大家参考,具体如下: /** * Created by Administrator on 2017/12/14. * 表达式与运算符 */ //1.基本表达式 加减乘除 var a = 4; a = 7/6; var b = (a + 4)/2; console.log(a); console.log(b); console.log("=========="); //end //2.比较运算符 == != > < >

随机推荐