亲宝软件园·资讯

展开

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

前端技术驿站 人气:0
想了解一起盘点JavaScript中一些强大的运算符的相关内容吗,前端技术驿站在本文为您仔细讲解JavaScript强大的运算符的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:javascript,运算符,js与或运算符,javascript特殊运算符,下面大家一起来学习吧。

前言

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

今天,我们就来盘点一下 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

总结

加载全部内容

相关教程
猜你喜欢
用户评论