javascript运算符

最新推荐文章于 2025-06-08 15:03:32 发布

原创最新推荐文章于 2025-06-08 15:03:32 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6

JS 专栏收录该内容

15 篇文章

订阅专栏

本文详细探讨了JavaScript中的加法运算、字符参与运算、布尔值运算，以及减法、乘除、位运算、一元运算、赋值运算、关系运算和逻辑运算。重点讲解了运算符优先级、隐式转换和特殊用法，适合理解JavaScript基础运算的进阶开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、加法运算

如果仅仅是数值运算，那么我们也不至于把加法运算单独提出来说。在这里我们要考虑到各种类型的变化所以加法运算就相对比较复杂了

(1) 纯数值的加法运算**

这个运算就是尊重我们的数学运算来完成就好了，但是仍然有几个地方需要注意。这里我们可以看到运算结果一定是1，但是绝对不是1.0，也就是说如果小数位是0，是不会被保留的。

var a1=0.4;
var b1=0.6;
console.log(a1+b1);//1
var a2=NaN;
var b2=4;
console.log(a2+b2);//NaN

(2) 有字符参与的加法运算

所有有字符参与的加法运算，优先字符运算，不管是一个字符还是两个都是字符，那么按照字符加法方式运算，即先将非字符的内容隐式转换为字符型，然后再做首尾相连。

例如：

var a1=4;
var b1="5";
console.log(a1+b1);//"45"
var a2="a";
var b2="b";
console.log(a2+b2);//"ab"
var a3=true;
var b3="b";
console.log(a3+b3);//"trueb"
var a4;
var b4="b";
console.log(a4+b4);//"undefinedb"
var a5=null;
var b5="b";
console.log(a5+b5);//"nullb"
var a6=NaN;
var b6="b";
console.log(a6+b6);//"NaNb"

(3) 有布尔值参与的加法运算

如果运算中有字符的参与，优先按照字符的加法运算来操作。如果没有字符运算，参照数学运算，也就是先把所有的布尔值都隐式转换为数值，然后做数值加法运算。

var a1=4;
var b1=false;
console.log(a1+b1);//4
var a2="a";
var b2=false;
console.log(a2+b2);//"afalse"
var a3=true;
var b3=false;
console.log(a3+b3);//1
var a4;
var b4=false;
console.log(a4+b4);//NaN
var a5=null;
var b5=false;
console.log(a5+b5);//0
var a6=NaN;
var b6=false;
console.log(a6+b6);//NaN

2、减法、乘法、除法、取模运算

减法、乘法、除法就是我们小学学习过的减乘除，在这里，所有的运算都遵从于数学的运算方法，也就是不管遇到什么，都先隐式转换为数值，然后才进行运算。

取模运算就是取余运算，也就是除某个数后得到的余数。

例如

var a1=4;
var b1=false;
console.log(a1*b1);//0
var a2="a";
var b2=false;
console.log(a2-b2);//NaN
var a3=true;
var b3=false;
console.log(a3-b3);//1
var a4;
var b4=8;
console.log(a4*b4);//NaN
var a5=null;
var b5=5;
console.log(a5*b5);//0
var a6=NaN;
var b6=3;
console.log(a6*b6);//NaN
var a7=10;
var b7=3;
console.log(a7%b7);//1
var a8=10;
var b9=3;
console.log(a7/b7);//3.33333333

3、位运算符 ~ ，&， |， ^， <<， >>

**
**

位运算就是先把数据转换为2进制，然后再进行运算的方法

(1) ~位非运算

**
**

其实就是+1取负的运算，例如~1===-(1+1)–>-2

console.log(~1);//-2
  console.log(~0);//-1;
  console.log(~-1);//0;
console.log(3+~2);//0

(2) &位与运算

**
**

先把数值转换为二进制，然后再根据位置顺序做与运算，与运算需要遵守的规则是

1&1=1 0&0=0 1&0=0 0&1=0

console.log(5&6);//4;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4nNs1Gs-1609384874068)(C:\Users\HP\Desktop\1609384316(1)].jpg)

我们可以看到5&6.先把5转换为二进制就是101，再把6转换为二进制是110，垂直按位运算，1&0就是0，0&1就是0，1&1就是1，最后得到的值是100，100这个二进制最后转换为十进制就是4，因此5&6===4

(3) |位或运算

先把数值转换为二进制，然后再根据位置顺序做位或运算，位或运算需要遵守的规则是

1|1=1 0|0=0 1|0=1 0|1=1

console.log(5|6);//7;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OGyUu8D6-1609384874071)(C:\Users\HP\Desktop\1609384439(1)].jpg)

我们可以看到5|6.先把5转换为二进制就是101，再把6转换为二进制是110，垂直按位运算，1|0就是1，0|1就是1，1|1就是1，最后得到的值是111，111这个二进制最后转换为十进制就是7，因此5|6===7

(4) ^位异或运算

先把数值转换为二进制，然后再根据位置顺序做异或运算，异或运算需要遵守的规则是

1^1=0 0^0=0 1^0=1 0^1=1

console.log(5^6);//3;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0X80orYz-1609384874072)(C:\Users\HP\Desktop\微信图片_20201231111502.jpg)]

我们可以看到5^{6.先把5转换为二进制就是101，再把6转换为二进制是110，垂直按位运算，1}0就是1，0^1就是1，11就是0，最后得到的值是011，011这个二进制最后转换为十进制就是3，因此5^6===3

异或多用于加密解密，例如：

var x=1345;
var key=3452;
var y=x^key;
var z=y^key;
z的值等于x的值

(5) <<左移位运算符

先把数值转换为二进制，然后再根据向左移位，在最后补零。最后转换回十进制。

例如

console.log(3<<4);//48;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jg8ag4Iv-1609384874073)(C:\Users\HP\Desktop\微信图片_202012311116163333333.jpg)]

3转换为二进制是11，11向左移动4位，然后空出来的位置补0，最后得到110000.

这个值转换为10进制就是48了

(6) >>右移位运算符

**
**

先把数值转换为二进制，然后再根据向左移位，在最后补零。最后转换回十进制。

例如

console.log(26>>3);//3;

26转换为二进制是11000，11000向右移动3位，然后把超出的数值都删除了，最后得到11.

这个值转换为10进制就是3了

4、一元运算符++，–

**
**

++和–起始就是在原来的数值基础上增加1或者减少1；

例如

var i=0;
i++;//---->i=i+1
var j=5;
j--;//---->j=j-1

这里其实很多人不理解i=i+1这个概念，注意在这里我们不能用数学去看待这个问题，这里应该考虑先运算等式右边的值，然后把结果重新存储到等式左边的变量里。因此，i原本是0，给它的值+1后就变成1，然后在把这个值重新赋给i。让i当前的存储值是1。

当然++，–还有一个用法，就是赋值，注意，这很重要。

var i=0;
var j=i++;//j:0,i:1    --->j=i;i++;
var n=0;
var m=++n;//m:1,n:1    ---->n++;m=n;
var s=0;
var w=0;
s++;//s=1
++w;//w=1;

注意在上面的代码中，如果使用i++赋值给j时，先把i的值传递给j，然后才给i+1。

但是如果使用下面的m=++n，那么先做n+1，然后才把+1以后的n值传递给m；

也就是当使用赋值运算时，i++是先赋值后运算，而++i就是先运算后赋值。

但是如果不是赋值运算，注意就是没有其他值参与，单纯的当前i++或者++i，i的值因为不管先后都+1了，所以结果是一样的。

还要注意++或者–是优先计算，并且高于乘法

var i=1
console.log(++i+i+++i++);//7
console.log(i);//4

5、**赋值运算符+=，-=，*=，/=，%=，<<=，>>=**

**
**

赋值运算符起始就是在原基础上做相对应的运算。

例如

var num1=0;
num1+=5;//代表num1=num1+5
var num2=0;
num2-=5;//代表num2=num2-5
var num3=0;
num3*=5;//代表num3=num3*5
var num4=0;
num4/=5;//代表num4=num4/5
var num5=0;
num5%=5;//代表num5=num5%5
var num6=0;
num6<<=2;//代表num6=num6<<2
var num7=0;
num7>>=2;//代表num7=num7>>2

6、关系运算符<，>，<=，<=，>=，>=，，=，!=，!==

关系运算符实际上是一个运算布尔值的运算符，就是说最后的结果是一个布尔值，true或者false。所以关系运算符起始也是比较运算符。

console.log(3>5);//false
console.log(3>=5);//false
console.log(3<5);//true
console.log(3<=5);//true
console.log(3==5);//false
console.log(3===5);//false
console.log(3!=5);//true
console.log(3!==5);//true

这种关系比较其实对于我们来说是非常简单的。但是注意一下，和=，！=和！==是有区别的。是比较两边的值是否相同，注意在比较时，会自动先做隐式转换，让两边的值是同类型的才做比较，这样的，转换后的值比较如果相等，就认为是相同的，如果是=那么不需要做隐式转换，直接先比较他们的类型是否相同，如果类型不同直接判断为不等，如果类型相同，则再判断他们的值是否相同，例如

console.log(true==1);//true
console.log(false==0);//true
console.log(false=="");//true
console.log(null==false);//false
console.log(0==null);//false
console.log(0==undefined);//false
console.log(""==null);//false
console.log(""==0);//true

结论
0==false==""
null==undefined
NaN不和任何东西相等

(1) 如果两个值类型相同，进行值的比较。

(2) 如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：

a、如果一个是null、一个是undefined，那么[相等]，其他如”（空字符串），false，0都不等。

b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。

c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。

d、如果一个是对象，另一个基本类型，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。

===的关系比较需要遵循的原则是：

1、如果类型不同，就不相等

2、如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。

3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则不相等。

4、如果两个值都是true，或者都是false，那么相等。

5、如果两个值都是null，或者都是undefined，那么相等。

6、引用类型比较，进行“指针地址”比较，如果两个值都引用同一个对象或函数，那么相等；否则不相等。

！=和！==相类似实际上是判断不等的情况。在这里不详细说明了。

7、逻辑运算符 && || !

**
**

&& 与运算符，就是并且运算符，其实用来得到两个值都满足的情况。

|| 或运算符，就是或者运算符，其实用来得到两个值满足一种的情况。

！非运算符，就是取反运算符

例如：

var a=6;
console.log(a>5 && a<10);//判断 5<a<10;
 console.log(a<5 || a>10);//判断a的值是否在5到10区间之外；

有的时候&& 和||并不是用来连接关系运算符的，这时候就变得有意思了，并且可以快速帮助我们解决一些问题。例如：

var a1=1;
console.log(a1-1 && 10);//0；
var a2=2;
console.log(a2-1 && 10);//10；
可以理解为比较最大值

var a3=1;
console.log(a3-1 || 10);//10；
var a4=2;
console.log(a4-1 || 10);//1；
可以理解为获取最近的非假值

上面与运算中，如果a-1是0的时候得到的结果就是0，如果结果是0以外的值时，结果就是与后面的那个值也就是10.其实就相当于判断a-1的值是否是0，如果是0，那么转换为布尔值后就是false，所以我们输出0，如果不是0，转换布尔值后是true，我们输出后面的值。

对应的或者语句也是相类似，如果a-1输出的值是0，转换后是false，输出或者后面的值，否则输出这个a-1后的值。大家可以充分考虑我们可以把它用在那里？

最后一个是！。这个很强大。

我们举例看一下：

var a1;
console.log(!a1);//true
var a2=null;
console.log(!a2);//true
var a3=NaN;
console.log(!a3);//true
var a4=0;
console.log(!a4);//true
var a5="";
console.log(!a5);//true
var a6=false;
console.log(!a6);//true

以上的六种情况下，！值都是true，也就是以上这几个再取反前都是false。因为这是使用布尔隐式转换的结果，那么除此之外其他的使用！后都是false；

6、三元运算符（条件运算符）

**
**

三元运算符又叫条件运算符或者三目运算符。实际上就是一个条件比较的方法：

条件？条件满足结果：条件不满足结果

表达式 ? 表达式的值不是0的结果：表达式的值是0的结果

var a=5;
console.log(a>=5 ? 10 : 20);//10
console.log(a-5 ? 10 : 20);//20

onsole.log(!a2);//true
var a3=NaN;
console.log(!a3);//true
var a4=0;
console.log(!a4);//true
var a5="";
console.log(!a5);//true
var a6=false;
console.log(!a6);//true


以上的六种情况下，！值都是true，也就是以上这几个再取反前都是false。因为这是使用布尔隐式转换的结果，那么除此之外其他的使用！后都是false；



### **6、****三元运算符（条件运算符）**

**
**

三元运算符又叫条件运算符或者三目运算符。实际上就是一个条件比较的方法：



条件 ？ 条件满足结果 ：条件不满足结果



表达式 ?  表达式的值不是0的结果 ：表达式的值是0的结果

```js
var a=5;
console.log(a>=5 ? 10 : 20);//10
console.log(a-5 ? 10 : 20);//20