js的操作符详解(二)

继续上一篇哈, 这一篇主要说一下以下几个操作符 :

• 取余操作符(%),

• 指数操作符(**),

• 布尔操作符(!),

• 逻辑与 (&&)

• 逻辑或 (||)

• 关系操作符 (>, <,>=,<=)

1. 取余操作符 %

符号是% 这个操作符可以求得两操作数相除的余数

    // 操作数是数字的话正常进行运算
    // 如果操作数是其他一些比较狗的值,则会先调用用 Number 将其转成数字进行运算
    const num = 5;
    console.log(num % 2);   // 1
    console.log(num % '2'); // 1 
    console.log('5' % '2'); // 1
    console.log(num % []);  // NaN
    console.log(num % {});  // NaN
    console.log(num % null);// NaN
    console.log(num % undefined); // NaN

2. 指数操作符 ** 

符号是**  和Math.pow() 这个函数的功能一致, 可以求得数字的n次方

    // 碰到操作数不是数字的还是一样的套路, 调用 Number 转型函数转成数字再做运算
    let num = 3;
    num = num ** 2
    console.log(num); //9
    console.log(Math.pow(3, 2)); //9
    console.log('3' ** '2');  // 9
    console.log('3' ** null); // 1

3. 布尔操作符 ! 

符号是!  对一个值使用布尔操作符可以取得值对应的布尔值, 以此来进行一些逻辑操作

(1) ! 的情况 对值使用!得到该值对应的布尔值取反的结果

    console.log(!1); // 1原本对应的布尔值是 true 取反后得到 false
    console.log(!{});// {}原本对应的布尔值是 true 取反后得到 false
    console.log(!'');// ''原本对应的布尔值是 false 取反后得到 true
    console.log(!'abc');// 'abc'对应的布尔值是 true 取反得到 false

(2) !! 的情况 对值使用!!得到该值对应的布尔值 

    console.log(!!1); // 1原本对应的布尔值是 true 
    console.log(!!{});// {}原本对应的布尔值是 true 
    console.log(!!'');// ''原本对应的布尔值是 false 
    console.log(!!'abc');// 'abc'对应的布尔值是 true 

额外说一点 true对应的数字是1, false对应的数字是0 

现在我有一个需求, 把 undefined 转成0, 你会怎么写?

console.log(+!!undefined); // 0

4. 逻辑与操作符 && 

符号是 && , 如果符号左侧可以是值, 变量, 表达式 , 右侧可以是任何逻辑 , 如果符号左侧成立, 则执行符号右侧的逻辑 , 否则逻辑中单直接返回左侧不成立的结果 .  接下来演示一下 

    console.log(1 && 2); // 1 成立 返回 2
    console.log({} && null); // {} 成立 返回 null
    console.log(undefined && 3); // undefined 不成立 直接逻辑中断 返回undefined

    // 小场景 当我的变量 (假设为 flag)对应的布尔值为 true 时, 我需要发请求 
    // 伪代码 
    flag && axios.get('****')

5. 逻辑或操作符 || 

符号是 || , 如果符号左侧成立直接返回左侧成立的结果 , 这属于逻辑中断, 不会执行右侧的代码,  如果符号左侧不成立返回右侧的结果

    // 左侧成立的结果 逻辑中断右侧代码不会执行
    console.log({} || num++); // 返回{}
    console.log(2 || console.log(sum)); // 返回2
    console.log(1 || []);// 返回1
    // 左侧不成立的结果
    console.log(0 || undefined) // 因为0对应的布尔值是false 所以返回undefined
    console.log(null || null) // null 为false 返回null
    console.log(NaN || 3) // NaN对应的布尔值为false 返回3
    console.log(!!NaN);// 这里验证一下 false

6. 关系操作符 < > >= <=

对比规则 : 

• 两侧都是数值, 按照数值大小比较
• 两侧都是字符串, 按照对应的字符编码进行比较
• 一侧数值一侧字符串 将字符串转成数字
• 有一侧是对象, 调用对象的vaueOf方法,再根据前面的规则进行比较
• 有一侧是布尔值, 将布尔值转成数字,再进行比较

    const obj = {}
    obj.valueOf = 3;
    console.log(1 < 2); // true
    console.log('a' < 'b'); // 97 < 98
    console.log('a'.charCodeAt(), 'b'.charCodeAt()); // 输出字符的编码
    console.log('a' < 2); // false 
    console.log(obj < 2); // false 3 < 2
    console.log(true < 2); // false 1 < 2

其他的下一节在说哈......