问答

请问这个if用法在JavaScript什么意思呢?

作者:admin 2021-08-21 我要评论

// 获取当前选项卡IDfunction getCurrentTabId(callback){ chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if(callback) callback(t...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        if(callback) callback(tabs.length ? tabs[0].id: null);
    });
}





// 获取当前标签ID
$('#get_current_tab_id').click(() => {
    getCurrentTabId(tabId => {
        alert('当前标签ID:' + tabId);
    });
});

就是这一句

 if(callback) callback(tabs.length ? tabs[0].id: null);

是什么意思呢, 如果?? 就??

###

首先,if语句省略了 {}。

if(callback) callback(tabs.length ? tabs[0].id: null);

其次,上面这行代码等同于下面所示:

if(callback){
    if(tabs.length === 0){
        callback(null);
    } else {
        callback(tabs[0].id);
    }
}

关于是否用三目运算符来编写,还是要看团队成员是否都能接受。如果不能接受,还是不要这样写,维护成本高。毕竟写出的代码不仅是让计算机能执行,还是要给人看的。

###

这不是很简单嘛……

如果 callback不为空 那么
执行回调(如果tab.length不为空,则返回tabs[0].id的值,否则返回null)

回调的里面是一个三目运算符,相当于另一个if判断。这种语法其实还是挺常见的,不过感觉还是C/C++里面喜欢这么用。java程序员不喜欢简洁,更喜欢写成if (callback != null)这种形式。如果是比较新的语言,还支持???.这种运算符,有兴趣的可以了解一下。

###

先用 if 判断 callback 是否存在,存在的话就执行它;而执行的时候,通过 三目运算 符确定给 callback 传递什么参数, tabs.length 为零,即 tabs 至少有一个子项的时候,传第一个子项的 id,否则就传 null
等价于:

if(callback){
    if(tabs.length === 0){
        callback(null);
    } else {
        callback(tabs[0].id);
    }
}

如果是我的话,在不需要维护的项目里会写得面目全非:

callback instanceof Function && callback(tabs.length ? tabs[0].id: null);

使用 ES2020 更佳:

callback instanceof Function && callback(tabs?.[0]?.id || null);
###
  1. 这相当于 if 的简单写法,当只有一行的时候可以省去 {}。不过我的规范不允许这么做。
  2. null 调用会报错,所以判断一下再调用比较好
###

这段代码为了提高健壮性,采用了一定处理。
整个代码等效于:

if(callback){ // 判断callback是否是有效的,这里其实还可以改进,这里只判断了是非“无效值”,而不是判断的确实有效,即callback可能是非函数类型的,后面一样会异常
    if(tabs.length == 0){  // 再判断对应全局(上层)变量参数是否至少有一个
        callback(null);
    } else {
        callback(tabs[0].id);
    }
}

这里的代码配合合适的callback实参(函数)定义和变量定义,就可以很好的完成工作啦。

###

js高程里面有写,都不推荐这种写法

###

if后的括弧中的表达式为callback,就是判断 callback这个变量是否存在。callback可能存在,也可能为null,也可能为undefind。如果存在则把callback作为函数调用一下,tabs.length ? tabs[0].id: null就是他的参数。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器