面试题 | js中的‘&&’、‘||’、‘!!’、‘==‘’和‘===‘’运算符

前言

本质是什么呢？&& 和 || 的作用只有一个(定义)：
进行布尔值的且和或的运算。当运算到某一个变量就得出最终结果之后，就返回哪个变量。&&运算符优先级大于||。

在javascript中：
以下内容会被当成false处理：''（空字符串） , false , 0 , null , undefined , NaN 以上在js中也称为虚值

1.&&运算符

&&可以叫逻辑与，在其操作数中找到第一个虚值表达式并返回它，如果没有找到任何虚值表达式，则返回最后一个真值表达式。它采用短路来防止不必要的工作。

console.log(false && 1 && []);//false
//' '这里不是空字符串，里面有空格
console.log(' '&& true && 5);//5
 

使用if语句

const router: Router = Router();
router.get('/endpoint', (req: Request, res: Response) => {
   let conMobile: PoolConnection;
   try {
      //do some db operations
   } catch (e) {
   if (conMobile) {
    conMobile.release();
   }
  }
});
 

使用&&操作符

const router: Router = Router();

router.get('/endpoint', (req: Request, res: Response) => {
  let conMobile: PoolConnection;
  try {
  } catch (e) {
    conMobile && conMobile.release()
  }
});
 

2.|| 运算符

||可以叫逻辑或，在其操作数中找到第一个真值表达式并返回它。这也使用了短路来防止不必要的工作。在支持 ES6 默认函数参数之前，它用于初始化函数中的默认参数值。

console.log(null || 1 || undefined); // 1

function logName(name) {
  var n = name || "Neck";
  console.log(n);
}

logName(); //Neck
 

3.!!运算符

!!运算符可以将右侧的值强制转换为布尔值，这也是将值转换为布尔值的一种简单方法。

首先介绍!,!一般是取反

console.log(!null);//true
console.log(!false);//true
console.log(!0);//true
console.log(!'');//true
console.log(!undefined);//true
console.log(!true);//false
 

正常判断对象不能为空

if(a!=null&&typeof(a)!=undefined&&a!=''){
    //a不为空
}
 

!!用法

if(!!a){
    //a不为空
}
 

使用Boolean()强制转换为布尔值

console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(' '));//true
console.log(Boolean({}));//true
console.log(Boolean([]));//true
console.log(Boolean(1));//true
console.log(Boolean([].length));//false
 

使用!!方法强制转换为布尔值

console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!''); // false
console.log(!!0); // false
console.log(!!NaN); // false
console.log(!!' '); // true
console.log(!!{}); // true
console.log(!![]); // true
console.log(!!1); // true
console.log(!![].length); // false
 

通过上面的对比，明显可以看出!!运算符的简单便捷

4.==和===运算符

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。

• ==运算符

强制是将值转换为另一种类型的过程。在这种情况下，==会执行隐式强制。在比较两个值之前，==需要执行一些规则。
假设我们要比较x == y的值。

1. 如果x和y的类型相同，则 JS 会换成===操作符进行比较。
2. 如果x为null, y为undefined，则返回true。
3. 如果x为undefined且y为null，则返回true。
4. 如果x的类型是number, y的类型是string，那么返回x == toNumber(y)。
5. 如果x的类型是string, y的类型是number，那么返回toNumber(x) == y。
6. 如果x为类型是boolean，则返回toNumber(x)== y。
7. 如果y为类型是boolean，则返回x == toNumber(y)。
8. 如果x是string、symbol或number，而y是object类型，则返回x == toPrimitive(y)。
9. 如果x是object，y是string，symbol则返回toPrimitive(x) == y。
10. 剩下的 返回 false

例子

x	y	x == y	符合条件
6	6	true	条件1 类型相同
6	'6'	true	条件4
null	undefined	true	条件2
0	false	true	条件7 y为boolean类型
'6,7'	[1,2]	true	条件8 使用toString()方法将数组转换为字符串，该方法返回1,2
'[object Object]'	{}	true	条件8 使用toString()方法将对象转换为字符串，该方法返回[object Object]

console.log(6 == 6);//true
console.log(6 =='6');//true
console.log(null == undefined);//true
console.log(0 == false);//true
console.log('5,6' == [5,6]);//true
console.log('[object Object]' == {});//true
 

• ===运算符

x	y	x === y	说明
6	6	true	值和类型都相同
6	'6'	false	值和类型都不相同
null	undefined	false	值和类型都不相同
0	false	false	值和类型都不相同
'6,7'	[1,2]	false	值和类型都不相同
'[object Object]'	{}	false	值和类型都不相同

使用===运算符，则第一个示例以外的所有比较将返回false，因为它们的类型不同，而第一个示例将返回true，因为两者的类型和值相同。

console.log(6 === 6);//true
console.log(6 ==='6');//false
console.log(null === undefined);//false
console.log(0 ===false);//false
console.log('5,6' === [5,6]);//false
console.log('[object Object]' === {});//false
 

let a = { a: 1 };
let b = { a: 1 };
let c = a;
console.log(a === b); // 打印 false，即使它们有相同的属性
console.log(a === c); // true
 

JS 以不同的方式比较对象和基本类型。在基本类型中，JS 通过值对它们进行比较，而在对象中，JS 通过引用或存储变量的内存中的地址对它们进行比较。这就是为什么第一个console.log语句返回false，而第二个console.log语句返回true。a和c有相同的引用地址，而a和b没有。

总结

学习使我快乐！冲冲冲！