es6中??与||区别小结

更新时间：2024年01月02日 08:26:29 作者：奔跑的代码！

本文主要介绍了es6中??与||区别小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

??和||都是逻辑运算符，但它们的作用不同。
??是空值合并运算符，它用于检查左侧的表达式是否为null或undefined。如果是null或undefined，则返回右侧的表达式；如果不是，则返回左侧的表达式

let foo = null;
let bar = foo ?? 'default'; // bar 的值为 'default'

let baz; 
let qux = baz ?? 'default'; // qux 的值为 'default'

||是逻辑或运算符，它用于检查左侧的表达式是否为假。如果左侧的表达式为假，则返回右侧的表达式；如果左侧的表达式为真，则返回左侧的表达式。在JavaScript中，只有null、undefined、''、0、NaN被视为假值，其他值都被视为真值。

let foo = 'hello';
let bar = foo || 'default'; // bar 的值为 'hello'

let baz; 
let qux = baz || 'default'; // qux 的值为 'default'

因此，??和||的区别在于它们的逻辑行为和使用场景。??用于空值合并，而||用于逻辑或。

?. 链判断运算符

左侧的对象是否为null或undefined，若是则不再往下运算，而是返回undefined，否则一直运算下去，直到返回最后一个值。
链判断运算符?.读取深度嵌套在对象链中的属性值，而不必验证每个值。当值为空时，表达式停止计算并返回 undefined。

let person = {
    name: '拾柒',
    body: {
        color: 'yellow',
        height: 179,
        weight: 70,
        sex: null
    },
    action: function(name){
        console.log(name)
    }
}
let res = person?.body?.age; // => undefined 
// 等价于
let res = person&& person.body&& person.body.location // 作用就是判断person下的body下的age是否为null或者undefined，当其中一链为null或者undefined时就直接返回undefined

let res2 = person?.sex; // => undefined

链判断运算符?.有三种写法。

obj?.prop // 对象属性是否存在（例子如上）
obj?.[expr] // 同上
func?.(...args) // 函数或对象方法是否存在

person ?. action ?. ('peter'); // peter

?? 空值合并运算符

忽略错误值（如 0 和空字符串）的同时指定默认值。
左侧的对象是否为 undefined 或 null，若是的话，直接返回下一个值，若不是的话，则直接返回前一个值。
判断方式和 || 一样
区别就是:

?? 只判断 undefined 和 null

function query(item) {
    return item ?? {}
}
// 等价于
function query(item) {
    if (item == null || item == undefined) {
        return {}
    } else {
        return item;
    }
}

|| 判断假值 undefined、null、''、false、0

function query(item) {
    return item || {}
}
// 等价于
function query(item) {
    if (item === 0 || item === "" || item === false || item === null || item === undefined) {
        return {}
    } else {
        return item;
    }
}

??= 空赋值运算符

仅当值为 null 或 undefined 时，此赋值运算符才会赋值（没想出来和??比有什么适用场景...）

function config(options) {
    options.duration ??= 100;
    options.speed ??= 25;
    return options;
}

config({ duration: 125 }); // { duration: 125, speed: 25 }
config({}); // { duration: 100, speed: 25 }

&&= 与赋值运算符

当前者不是假值时，可赋值后者的值,若是假值时，直接赋值假值

let A = 'abc';
let a = 1;
let b = 0;
let c = false;
let d = null;
let e = undefined;
let f = '';
A &&= '拾柒'; // '拾柒'
a &&= '拾柒'; // '拾柒'
b &&= '拾柒'; // 0
c &&= '拾柒'; // false
d &&= '拾柒'; // null
e &&= '拾柒'; // undefined
f &&= '拾柒'; // ''

!! 双非

用来做类型判断，在第一步!（变量）之后再做逻辑取反运算

var a;
if(a != null && typeof(a) != undefined && a != ''){
    //a有内容才执行的代码  
}

等价于

if(!!a){
    //a有内容才执行的代码...  
}

到此这篇关于es6中??与||区别小结的文章就介绍到这了,更多相关es6 ??与||内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript中[]和{}对象使用介绍
[]不仅仅可以表示数组，可以直接通过对象的属性设置值和访问值，接下来为大家介绍下[]和{}对象的使用，感兴趣的你可以参考下哈
2013-03-03
原生javascript实现图片放大镜效果
这篇文章主要为大家详细介绍了原生javascript实现图片放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
eslint+prettier统一代码风格的实现方法
这篇文章主要介绍了eslint+prettier 统一代码风格的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
js如何查找json数据中的最大值和最小值方法
这篇文章主要介绍了js如何查找json数据中的最大值和最小值方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
js获取视频时长代码
下面的这段js获取视频时长代码是网上找的，还没有测试,需要的朋友可以参考下
2014-04-04
js精美的幻灯片画集特效代码分享
这篇文章主要介绍了js制作精美的幻灯片画集特效，视觉上特别有冲击感，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
这篇文章主要介绍了小程序角标的添加及绑定购物车数量进行实时更新的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
THREE.JS使用TransformControls对模型拖拽的代码实例
拖拽是前端实现中比较常用的一种效果,下面这篇文章主要给大家介绍了关于THREE.JS使用TransformControls对模型拖拽的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
Js 获取当前函数参数对象的实现代码
这篇文章主要介绍了Js 获取当前函数参数对象的实现代码,需要的朋友可以参考下
2016-06-06
webpack3.0升级4.0的方法步骤
这篇文章主要介绍了webpack3.0升级4.0的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04