一起盘点JavaScript中一些强大的运算符

目录
  • 前言
  • 一、??空值合并运算符
  • 二、??=空赋值运算符
  • 三、?.可选链操作符
  • 四、?:三元运算符
  • 五、逻辑与(&&)和逻辑或(||)
  • 六、位运算符 & 和 |
  • 七、双位运算符 ~~
  • 七、逻辑运算符 !
    • 7.1 利用!取反
    • 7.2 利用!!做类型判断
    • 7.3 两个值是否相等
  • 总结

前言

你在阅读其他人的代码的时候,有没有遇见一些奇怪的写法,让你的思路瞬间卡住,等你回过神来便不明觉厉,某位大侠曾经来过这里。

今天,我们就来盘点一下 JavaScript 中一些强大的运算符吧~~~

一、??空值合并运算符

如果你第一次遇到它,看到的是两个问号,估计脑海里还有更多的问号(小朋友,你是否有很多问号~~~)

两个问号??其美名曰空值合并操作符,如果第一个参数不是 null/undefined,将返回第一个参数,否则返回第二个参数。

console.log(1 ?? "www.shanzhzonglei.com"); // 1
console.log(false ?? "www.shanzhzonglei.com"); // false
console.log(null ?? "www.shanzhzonglei.com"); // www.shanzhzonglei.com
console.log(undefined ?? "www.shanzhzonglei.com"); // // www.shanzhzonglei.com

所以,只有当第一个参数是 null/undefined 的时候,才返回第二个参数。

注意,虽然 JS 中的未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔 false,空字符串''都是假值,但??非空运算符只对 null/undefined 做处理。

它与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。比如为假值('' 或 0)时。

console.log(1 || 2); // 1
console.log("" || 2); // 2

二、??=空赋值运算符

哦,现在还不止两个问号,还多了一个等号,题目越来越难了么?

??=空赋值运算符,仅当值为 null 或 undefined 时,此赋值运算符才会赋值。

const student = { age: 20 };
student.age ??= 18;
console.log(student.age); // 20

student.name ??= "shanguagua";
console.log(student.name); // 'shanguagua'

它和上面的??空值合并运算符是有联系的:x ??= y等价于x ?? (x = y),只有当 x 为 null 或 undefined 时,x = y才会执行。

let x = null;
x ??= 20;
console.log(x); // 20

let y = 5;
y ??= 10;
console.log(y); // 5

三、?.可选链操作符

可选链操作符?.允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。操作符会隐式检查对象的属性是否为 null 或 undefined,代码更加优雅简洁。

const obj = {
  name: "山呱呱",
  foo: {
    bar: {
      baz: 18,
      fun: () => {},
    },
  },
  school: {
    students: [
      {
        name: "shanguagua",
      },
    ],
  },
  say() {
    return "www.shanzhonglei.com";
  },
};

console.log(obj?.foo?.bar?.baz); // 18
console.log(obj?.school?.students?.[0]["name"]); // shanguagua
console.log(obj?.say?.()); // www.shanzhonglei.com

四、?:三元运算符

它也叫三目运算符。额,这个就很常用了。

对于条件表达式b ? x : y,先计算条件 b,然后进行判断。如果 b 的值为 true,计算 x 的值,运算结果为 x 的值;否则,计算 y 的值,运算结果为 y 的值。

console.log(false ? 1 : 2); // 2
console.log(true ? 1 : 2); // 1

五、逻辑与(&&)和逻辑或(||)

先来复习一下吧:

逻辑与(&&):当第一个操作数为 true 时,将不会判断第二个操作数,因为无论第二个操作数为何,最后的运算结果一定是 true。

实际开发中,利用设个特性,可实现如下操作:

1、如果某个值为 true,则运行某个 function

function say() {
  console.log("www.shanzhonglei.com");
}
let type = true;
type && say(); // www.shanzhonglei.com

2、判断某个值

// 如果age大于10并且小于20才会执行
if (age > 10 && age < 20) {
  console.log(age);
}

逻辑或(||): 当第一个操作数为 false 时(也就是 js 的假值),将不会判断第二个操作数,因为此时无论第二个操作数为何,最后的运算结果一定是 false。

实际开发中,利用设个特性,可实现如下操作:

1、给某个变量设置初始值

let student = {
  name: "shanguagua",
};

console.log(student.age || "www.shanzhonglei.com"); // www.shanzhonglei.com

2、判断某个值

// 如果age等于10或者等于20或者等于30都执行
if (age === 10 || age === 20 || age === 30) {
  console.log(age);
}

六、位运算符 & 和 |

位运算符是按位进行运算,&(与)、|(或),使用位运算符时会抛弃小数位,我们可以利用|0来给数字取整。也可以使用&1来判断奇偶数。

实际开发中,利用设个特性,可实现如下操作:

1、取整

1.3 |
  (0 - // 打印出 1
    1.9) |
  0; // 打印出 -1

2、判断奇偶数

let num = 5;
!!(num & 1); // true
!!(num % 2); // true

七、双位运算符 ~~

可以使用双位操作符来替代正数的 Math.floor( ),替代负数的 Math.ceil( )。

双否定位操作符的优势在于它执行相同的操作运行速度更快,对正数来说~~运算结果与 Math.floor( ) 运算结果相同,而对于负数来说与 Math.ceil( ) 的运算结果相同。

Math.floor(5.2) === 5; // true
~~3.2 === 3; // true
Math.ceil(-6.6) === -6; // true
~~-4.5 === -6; // true

七、逻辑运算符 !

!,可将变量转换成 boolean 类型,null、undefined 和空字符串''取反都为 true,其余都为 false。一般来说会有好几种用法,!,!!,!=,!==。

7.1 利用!取反

let cat = false;
console.log(!cat); // true

7.2 利用!!做类型判断

判断变量 a 不等于 null,undefined 和''才能执行的方法。

var a;
if (a != null && typeof a != undefined && a != "") {
  //a有内容才执行的代码
}

等价于:

if (!!a) {
  //a有内容才执行的代码...
}

7.3 两个值是否相等

一般来说都是用的全不等于!==,因为使用不等于!=的话,0 != ""返回的是 false,原因是 JS 中 0 和''转化成布尔型都为 false,所以推荐还是使用全不等于!==。

let a = 0;
let b = 0;
let c = "0";
let d = '';
a != b       //false
a != c      // false    number和string的0 被判断为相等
a != d      // false    0和空字符串被判断为相等

a !== b    // false
a !== c   // true
a !== d   // true

总结

到此这篇关于JavaScript中一些强大的运算符的文章就介绍到这了,更多相关JavaScript强大的运算符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Javascript 按位左移运算符使用介绍(<<)

    按位左移运算符 (<<)左移表达式的位. result = expression1 << expression2 参数result 任何变量. expression1 任何表达式. expression2 任何表达式. 说明<< 运算符把 expression1 的所有位向左移 expression2 指定的位数.例如: var temptemp = 14 << 2变量 temp 的值为 56,因为 14 (即二进制的 00001110)向左移两位等于 56

  • javascript三元运算符用法实例

    三元运算符用法实例: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. 复制代码 代码如下: <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------

  • Javascript 按位取反运算符 (~)

    复制代码 代码如下: result = ~ [数字] 所有一元运算符(如 ~ 运算符)都按照下面的规则来计算表达式的值: 复制代码 代码如下: 1. 如果应用于未定义的表达式或 null 表达式,则会引发一个运行时错误.2. 将对象转换为字符串.3. 如果可能,将字符串转换为数字. 否则,将引发运行时错误.4. 布尔值被视为数字(如果为 false,则为 0:如果为 true,则为 1). 运算符将应用于结果数字. ~ 运算符查看表达式的二进制表示形式的值,并执行位非运算. 表达式中的任何一位为

  • 详解js运算符单竖杠“|”与“||”的用法和作用介绍

    在js开发应用中我们通常会碰到"|"与"||"了,那么在运算中"|"与"||"是什么意思呢? 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|

  • js 与或运算符 || && 妙用

    首先出个题:如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 复制代码 代码如下: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step

  • js中的 || 与 && 运算符详解

    js中逻辑运算符在开发中可以算是比较常见的运算符了,主要有三种:逻辑与&&.逻辑或||和逻辑非!. 当&&和|| 连接语句时,两边的语句会转化为布尔类型(Boolean),然后再进行运算,具体的运算规则如下: 1.&& 1.1两边条件都为true时,结果才为true: 1.2如果有一个为false,结果就为false: 1.3当第一个条件为false时,就不再判断后面的条件 注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的值:如果结

  • JS按位非(~)运算符与~~运算符的理解分析

    那么,对于typeof var!=="number"的类型来说,进行运算时,会尝试转化成32位整形数据,如果无法转换成整形数据,就转换为NaN: JS在位运算上用了更简便的一种方法来实现这中运算,那么它的实现原理大致上可以这样理解: 复制代码 代码如下: var testData=-2.9; var testResult=(typeof testData==="number"&&!isNaN(testData)&&testData!=

  • 教你JS中的运算符乘方、开方及变量格式转换

    1)如何计算乘方 题一:3的4次方(不会打,请原谅 ==!!!) 3的4次方=3*3*3*3 var a = Math.pow(3,4); console.log(a); 说明:Math.pow()是用来计算乘方的语法 注意:Math的M是大写: 题二:3的4*5次方 var a =Math.pow(3,4*5); console.log(a); 2)如何计算根号 题目:根号81 var a = Math.sqrt(81); console.log(a); 变量格式转换 用户的输入 var ye

  • javascript typeof的用法与typeof运算符介绍[详细]第1/2页

    经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "

  • JS中三目运算符和if else的区别分析与示例

    今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码 代码如下: if(n >= count-1){ n =0; }else{ n ++; } 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法 复制代码 代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,if else没有返回值 做了如下测试: 复制代码 代码如下: var n=1;  if(n

随机推荐