Java教程

Javascript之常用运算符

本文主要是介绍Javascript之常用运算符,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在Javascript中,为了进行逻辑运算的判断,我们会使用很多的运算符。运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

Javascript 常见的有下面这些运算符:

  • 算数运算符
  • 赋值运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 三元运算符
  • 位运算符
  • 空值合并运算符
  • 空赋值运算符
  • 可选链式运算符
  • 双星号运算符

接下来,我就一一介绍它们的用法及应用场景

1.算数运算符

使用场景:算术运算使用的符号,用于执行两个变量或值的算术运算。

我们都知道在日常的生活中,我们难免会进行交易,比如 你去超市买东西,会和收银员进行物品与金钱的交易,这就会使用到算数,而程序中中同样也会使用运算。程序中常用的算数运算符有:

运算符描述实例
+5+10=15
-10-5=5
*10*5=50
/10/5=2
%取余10%5=0

这里,我要特别强调的一点,对于 算数运算符只针对于整数型的值,而对于浮点型会出现精度问题,所以:不要直接运算两个浮点数,因为结果可能你会出乎意料。

常见的一个经典面试题:

0.1+0.2= ?

这个题,可能很多人会毫无疑问的回答0.3,可事实结果却不是0.3,这是为什么呢?
这就是因为计算机是二进制的,对于浮点型的小数来说,并不会像现实当中进行运算,存在精度问题,那么 0.1 + 0.2 到底等于多少呢?

结果是:0.30000000000000004

如果使用一个浮点型小数去和一个整数进行运算,也不会出现你想要的答案,比如:

console.log(0.08 * 100); // 结果不是 7, 而是:8.000000000000001

2.赋值运算符

赋值运算符就是进行值或变量的赋值,等号左边等于等号右边。

赋值运算符又可以分为简单和复合两种赋值运算

常见的 赋值运算符除了有 = 之外,+=、-=、*=、/=、%=也是赋值运算符。

var num1 = 66;
var num2 = num1;
var num3 = num1 + 5;
console.log(num2);  // 输出:66
console.log(num3);  // 输出:71

3.递增和递减运算符

使用场景:如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( – )运算符来完成。

在 JavaScript 中,递增(++)和递减( - - )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我 们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。 注意:递增和递减运算符必须和变量配合使用。

  • 前置递增运算符 (先自加,后运算)
var num = 10;
console.log(++num + 5);   // 16
  • 后置递增运算符 (先运算,后自加)
 var num = 10; 
 console.log(5 + num++); // 15

4.比较运算符

使用场景:两个数据进行比较,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。

运算符说明案例结果
>大于10>5true
<小于6<3false
>=大于等于10>=6true
<=小于等于6<=20true
==等于 (存在隐式转换,常用来判断)10==10true
!=不等于20!=10true
===全等21===“21”false
!==不全等(数值跟类型必须全部相同)10!==“30”true

5.逻辑运算符

使用场景:使用布尔值进行逻辑判断,逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。

运算符说明案例结果
&&逻辑与10>5 && 12 <10false
11逻辑或6<3 // 10<30true
&逻辑非(取反符)! truefalse

在逻辑运算符中,常见的是短路运算(逻辑中断)

短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。

var num1 = 123 && 456  // 456
var num2  =  0 && 123  // 0
var num3 = 123 || 456 //123
var num4 = 0 || 456  // 456
var num5 = 123 && 234 && 345 // 345 
var num6 = 123 || 234 || 345  // 123

总结:

  • 逻辑与短路运算中,如果表达式1 为真,会返回表达式2的值
  • 逻辑或短路运算中,如果表达式1 为真,会返回表达式1的值,如果表达式1为假,会返回表达式2的值
  • 无论有多少个表达式,都会按照 上述的逻辑进行判断

这里,我说下 Javascipt中是假值的情况都有:null、undefined、""(空字符串)、+0、-0、NaN,除此之外都是真值。

6.三元运算符

使用场景:只存在真或假的情况,常使用更加方便简洁。

var flag = true;
var text = flag ? "我是真的孙悟空":"我是假的孙悟空";
console.log(text);   // 我是真的孙悟空

7.位运算符

位运算符包括 & 和 |

使用场景:基本和逻辑运算符一样,都是做逻辑判断的,结果返回为布尔值。

var num = 12 & 2   // 2 
var num1 = 32 | 6    // 32
var flag = 18 > 16 | 25< 16  // true

8.空值合并运算符 (??)

使用场景:为了解决或运算符|| 而设计出来的。
或运算符的操作|| -->当左侧的数据为假值(数字 0, 布尔类型的 false,空字符串,undefined, null)时,则执行右侧的语句
空值合并运算符??–->只会在左侧为 undefined 或者 null 时,才会执行右侧的语句

var a =  0 ; 
var r = undefined || null;
var b = a || 123;   // 此时 b =  123
var c = r ?? 456  //此时 c = 456

9.空赋值运算符(??=)

同时,空值合并运算符还可以与=结合成为一个赋值操作,当左侧为 null 或者 undefined 时,则将右侧语句的结果赋值给左侧的变量:

let x = null
let y = 5
console.log(x ??= y) // => 5 

10.可选链式运算符(?.)

使用场景:如果要访问对象的深层嵌套属性,则必须通过很长的布尔表达式去检查每个嵌套级别中的属性。必须检查每个级别中定义的每个属性,知道所需的深度嵌套的属性为止。

试想想,如果在任何级别的对象中都有undefined或null的嵌套对象,如果不进行检查,那么程序将会报错至崩溃。所以我们必须检查每个级别,确保当它遇到undefined或null对象时不崩溃。那么此时只需要使用?.来访问嵌套对象。而且如果碰到undefined或Null属性,那么它只返回undefined。

const student = {
  score: {
    math: [98, 67, () => {
        return 99;
      },
    ],
  },
};
student?.score?.math?.[2]?.(); // 99

这样写的好处,是为了避免某一个变量出现undefined或null ,致使程序出现报错。

11.双星号运算符()**

使用场景:双星号运算符**(求幂运算符)相当于 js 中 的 Math.pow() , 他执行的是一个幂运算

1 ** 2; // 1
2 ** 4; // 2 的 4 次幂  ==》  Math.pow(2,4);

在开发中,多使用这些运算符,会使我们的代码更加简洁,可读性更好。希望通过这篇文章可以对小伙伴们有所帮助。

这篇关于Javascript之常用运算符的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!