算术运算符

y=5

运算符

描述

例子

x 运算结果

y 运算结果

在线实例

+

加法

x=y+2

7

5

实例 »

-

减法

x=y-2

3

5

实例 »

*

乘法

x=y*2

10

5

实例 »

/

除法

x=y/2

2.5

5

实例 »

%

取模（余数）

x=y%2

1

5

实例 »

++

自增

x=++y

6

6

实例 »

x=y++

5

6

实例 »

–

自减

x=–y

4

4

实例 »

x=y–

5

4

实例 »

  • 任何值和NaN做运算的结果都是NaN。
  • 任何的值和字符串做加法运算，都会先转换为字符串，然后进行字符串拼接。
  • 任何值做-、*、/运算时都会自动转换为Number。
result1 = true + 1;  // 2 = 1+ 1

result2 = true + false; // 1 = 1+ 0

result3 = 1 + null; // 1 = 1+ 0

result4 = 100 - '1' // 99

a是变量，而a++和++a是表达式

  • a++的值等于原变量的值（a自增前的值）
  • ++a的值等于新值 （a自增后的值）


实战范例： 假设用户输入345，怎么分别得到3、4、5这三个数呢？

  • 得到3的方法：345 除以100，得到3.45然后取整，得到3。即：parseInt(345/100) 或 345/100%10
  • 得到4的方法：345 除以100，余数是45，除以10，得到4.5，取整。即：parseInt(345 % 100 / 10)或345/10% 10
  • 得到5的方法：345 除以10，余数就是5。即：345 % 10（即345/1 % 10）

赋值运算符

给定 x=10 和 y=5

运算符

例子

等同于

运算结果

在线实例

=

x=y

无同等写法

x=5

实例 »

+=

x+=y

x=x+y

x=15

实例 »

-=

x-=y

x=x-y

x=5

实例 »

*=

x*=y

x=x*y

x=50

实例 »

/=

x/=y

x=x/y

x=2

实例 »

%=

x%=y

x=x%y

x=0

实例 »

比较运算符

给定 x=5

运算符

描述

比较

返回值

实例

==

等于，比较前两边的操作数会被自动转换为相同的数据类型

x==8

false

实例 »

x==5

true

实例 »

===

绝对等于（值和数据类型均相等），比较前两边的操作数不会发生数据类型转换

x===“5”

false

实例 »

x===5

true

实例 »

!=

不等于，比较前两边的操作数会被自动转换为相同的数据类型

x!=8

true

实例 »

!==

不绝对等于（值或数据类型有一个不相等，或两个都不相等），比较前两边的操作数不会发生数据类型转换

x!==“5”

true

实例 »

x!==5

false

实例 »

>

大于

x>8

false

实例 »

<

小于

x<8

true

实例 »

>=

大于或等于

x>=8

false

实例 »

<=

小于或等于

x<=8

true

实例 »

  • 任何值和NaN做任何比较都是false。
  • NaN不和任何值相等，包括他本身。

== 会将不同类型的东西，转为相同类型进行比较（大部分情况下，都是转换为数字）。例如：

console.log("6" == 6);     // 打印结果：true。这里的字符串"6"会先转换为数字6，然后再进行比较
console.log(true == "1");   // 打印结果：true
console.log(0 == -0);       // 打印结果：true
console.log(null == 0);   // 打印结果：false

===全等不会做类型转换

严格相等运算符不适用的场景：

console.log(NaN===NaN) //false
console.log(-0===+0) //true

此时可以使用ES6的 Object.is 实现

console.log(Object.is(NaN,NaN)) //true
console.log(Object.is(-0,+0)) //false

比较规则


逻辑运算符

给定 x=6 y=3

运算符

描述

例子

&&

and

(x < 10 && y > 1) 为 true

||

or

(x == 5 || y == 5) 为 false

!

not

!(x==y) 为 true

  • &&为短路的与，如果第一个值为false，则不会执行第二个值
//第一个值为true，会检查第二个值
    true && alert("看我出不出来！！");  // 可以弹出 alert 框

    //第一个值为false，不会检查第二个值
    false && alert("看我出不出来！！"); // 不会弹出 alert 框
  • 两个非布尔值的 && 运算
  • 如果第一个值为true，则必然返回第二个值
'2'&&'3'  得到 '3'
  • 如果第一个值为false，则直接返回第一个值
''&&'3'  得到 ''
'0'&&'3'  得到 '3' ，特别说明，此处'0'转换为布尔值后是true，不是false
  • ||为短路的或，如果第一个值为true，则不会执行第二个值
  • 两个非布尔值的 || 运算
  • 如果第一个值为true，则直接返回第一个值
'1'||'3'  得到'1'
  • 如果第一个值为false，则返回第二个值
''||'3'  得到'3'

此现象常用于给变量指定默认值，如：当a有值时，将a赋值给b，否则b为10

let a;
let b = a || 10; // 此时 b 会被赋值为 10

此种技巧简单而优雅，但以下情况除外：当a为虚值时，b无法得到a的值

let a = 0;
let b = a || 10; // 此时 b 还是 10
  • 对非布尔值进行逻辑运算，则会先将其转换为布尔值，然后再操作。
var a = 10;
a = !a;  //此时a的数据类型为布尔类型，值为false

【实战】容错处理【重要】

当成功调用一个接口后，返回的数据为 result 对象。这个时候，我们用变量 a 来接收 result 里的图片资源。通常的写法是这样的：

if (result.resultCode == 0) {
    var a = result && result.data && result.data.imgUrl || 'http://img.smyhvae.com/20160401_01.jpg';
}

上方代码的意思是，获取返回结果中的result.data.imgUrl这个图片资源；如果返回结果中没有 result.data.imgUrl 这个字段，就用 http://img.smyhvae.com/20160401_01.jpg 作为兜底图片。

条件运算符(三元运算符)

条件表达式 ? 条件表达式结果为true时的值 ： 条件表达式结果为false时的值

voteable=(age<18)?"年龄太小":"年龄已达到";

如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后再运算。

运算符的优先级

优先级由高到低：

  • .、[]、new
  • ()
  • ++、–
  • !、~、+（单目）、-（单目）、typeof、void、delete
  • %、*、/
  • +（双目）、-（双目）
  • <<、>>、>>>
  • <、<=、>、>=
  • == 、!== 、===
  • &
  • ^
  • |
  • &&
  • ||
  • ?:
  • =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
  • ,

如果不清楚哪个优先级更高，记得使用括号 () 提升优先级。