void(0)与undefined 与特殊运算符

前景介绍:

在刷题的时候遇到一个题目,也学习了其他大佬的实现方式,在此记录一下作为学习和分享.

题目描述

获取 url 中的参数

1. 指定参数名称，返回该参数的值 或者 空字符串
2. 不指定参数名称，返回全部的参数对象 或者 {}
3. 如果存在多个同名参数，则返回数组

4. 不支持URLSearchParams方法

   举例

   输入：
    http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key
   输出：
    [1, 2, 3]

   实现

   function getUrlParam(sUrl,sKey){
    var paramArr = sUrl.split('?')[1].split('#')[0].split('&'); // 取出每个参数的键值对放入数组
    const obj = {};
    paramArr.forEach(element => {
    const [key, value] = element.split('=');  // 取出数组中每一项的键与值
    if(obj[key] === void 0){   // 表示第一次遍历这个元素，直接添加到对象上面
    obj[key]=value
    } else{
    obj[key]=[].concat(obj[key],value); // 表示不是第一次遍历说明这个键已有，通过数组存起来。
    }});
    return sKey===void 0 ? obj : (obj[sKey]||'') 
    
    console.log(getUrlParam('http://www.nowcoder.com?key=1&key=2&key=3&test1=4#hehe')) // {key:['1','2','3'],test1:'4' }
   }
   

解析

这里void 0 的用法对于我的接受还是比较新的,于是就查了一下代表的是什么意思,
在MDN的undefined 的介绍中讲到其实就是所void 0 是undefined的一种替代方案,
void 0 === undefined的结果是true.
其实void关键字不是第一次出现了,还有一下集中使用方式:

return sKey===void 0?obj:obj[sKey]||''
void 0===undefined 判断为true
上式判断函数中是否传入了sKey参数，如果传入了取后值，未传入取前值
??是合并运算符，当值不为undefined和null时，取前值，否则去后值

<-- 阻止连接的跳转 : 死链接 -->
<a href="javascript:void(0)">点击</a>
<a href="javascript:void(alert('哈哈哈'))">点击</a>

题外话

好记性不如烂笔头,在记录void(0)的时候顺便又想起其他几个比较特殊的逻辑操作符,在这里也在啰嗦一下

??(空值合并操作符)

   空值合并操作符当左侧的值不为`null和undefined`的时候才会返回右侧的值,否则返回左侧的值.

|| (逻辑或运算符)

逻辑或运算符当左侧的值为假时就会返回右侧的值,否则返回左侧的值.

?.(可选链操作符)

类似于`.`操作符,但是区别在与当他的引用为空的(`null和undefined`)时候,不会引起错误.

&& (逻辑与)

逻辑与运算符需要左右两侧的值都为真时才会显示为真,否则为假.

结束语

这里记录的可能不是很完整,包括如果有些描述的不准确的地方,欢迎和希望大家帮忙指出,一起学习进步