Javascript + Typescript 特殊运算符号

Js + Ts 特殊运算符号

通用

空值合并运算符 ?? 与 || &&

?? 更像是针对于异常数据的处理

|| 包含针对 异常数据与 空数据的处理，根据实际情况选择使用即可！

&& 前者为真 ，返回后者，否则返回前者。

console.log(null ?? 'deault');  //  "deault"
console.log(undefined ?? 'deault'); //  "deault"
console.log(false ?? 'deault'); // false
console.log(NaN ?? 'deault'); // NaN
console.log("" ?? 'deault'); // ""
console.log(0 ?? 'deault'); // 0
//用法
// let person = data.xx ? data.xx : {name: 'NiGuang'}; 代替三目
let person = data.xx ?? {name: 'NiGuang'};

console.log(null || 'deault');  //  "deault"
console.log(undefined || 'deault'); //  "deault"
console.log(false || 'deault'); // "deault"
console.log(NaN || 'deault'); // "deault"
console.log("" || 'deault'); // "deault"
console.log(0 || 'deault'); // "deault"

console.log("string" && 'deault');  //  "deault"
console.log(null && 'deault'); //null
console.log(undefined && 'deault'); //  undefined
console.log(false && 'deault'); // false
console.log(NaN && 'deault'); // Nan
console.log("" && 'deault'); // ""
console.log(0 && 'deault'); // 0

可选链 ?.

相信大家已经非常熟悉这个操作符了，就是用作调用对象的属性，无此属性，返回undefined，不至于报错！

let grade1 = {
    data: {},
    resp: 'success',
    code: 1000
}
 
// 使用了可选链式运算符之后直接写，如果在其中一层没找到会自动赋值为undefined，不再向 后查找，避免了使用if进行一层层判断。
console.log(grade1.data?.productList?.name); // undefined

取整 ~~

～～ 不四舍五入，抹掉零头式取整

console.log(~~10.8); // 10
console.log(~~10.3); // 10
console.log(~~-5.9); // -5

取中间值 >>

// 求（2,7）的中间值
console.log(Math.floor(2 + (7 - 2) / 2));  // 4
console.log(Math.floor((2 + 7) / 2));  // 4
console.log((2 + 7) >> 1);  // 4

Ts文件中使用

双感叹号 !!

JavaScript具有隐式转换类型，像''、0、null、undefined会被转换为false。

为了让代码更加严谨，通常使用双感叹号来将一个空状态强制转换为boolean类型。

const  formateData = (data:Array<string>)=>{
    //TO DO... 可能返回undefined
    return data.length > 0 ? true :null
}
const result = (res:Array<string>):boolean=>{
    return formateData(res)!!
}

当然：不会有人故意返回null的，这只是一个例子～

变量后面加 ! (Ts文件中使用)

let name: string | null = "Tom";
// 避免了编译器的空值检查，但是生成的js文件中还是name.length，如果此时name为null，那么就会出现运行时异常
console.log(name!.length); 

function greet(name: string): string {
  return `Hello, ${name}`;
}
const name2: string | null = "Tom";
console.log(greet(name2!)); // 告诉编译器此变量不会为null或undefined

之后还有比较奇特的 运算符 本篇文章会再进行修改补充！