一、运算符概述

1、定义

JavaScript中运算符主要用于连接简单表达式,组成一个复杂的表达式

2、运算符类别

  • 算数运算符
  • 赋值表达式
  • 比较表达式
  • 布尔运算符
  • 位运算符

二、算数运算符

1、加法运算符(Addition):x + y

加法运算符是在运行时决定,到底是执行相加,还是执行连接。也就是说,运算子的不同,导致了不同的语法行为,这种现象称为“重载”(overload)

(1)、在两个操作数都是数字的时候,会做加法运算

console.log(2+4);//6

(2)、两个参数都是字符串或在有一个参数是字符串的情况下,会把另外一个参数转换为字符串做字符串拼接

console.log("2"+"4");//"24"
'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"

(3)、在参数有对象的情况

  • 3.1首先自动调用对象的valueOf方法

一般来说,对象的valueOf方法总是返回对象自身,,也可自定义

  • 3.2再自动调用对象的toString方法,将其转为字符串(如果valueOf方法直接返回一个原始类型的值,就不会调用tostring

对象的toString方法默认返回[object Object],也可自定义

var obj = { p: 1 };
obj + 2 // "[object Object]2"
  • 3.3自定义valueOf方法或toString方法,得到想要的结果
var obj = {
  valueOf: function () {
    return 1;
  }
};

obj + 2 // 3
var obj = {
  toString: function () {
    return 'hello';
  }
};

obj + 2 // "hello2"
  • 3.4 Date对象特例

如果运算子是一个Date对象的实例,那么会优先执行toString方法。

var obj = new Date();
obj.valueOf = function () { return 1 };
obj.toString = function () { return 'hello' };

obj + 2 // "hello2"

(4)、在只有一个字符串参数和+号的时候会尝试将其转换为数字,转换失败输出NaN

console.log(+"4");//4 
+'dddddd'
NaN

2、其他算术运算符

对于其他运算符,在运算前都强制转换数字,再运算。对象就调用valueOf或者toString,如果不能转换的,输出NaN
减法运算符(Subtraction): x - y
乘法运算符(Multiplication): x * y
除法运算符(Division):x / y
余数运算符(Remainder):x % y
自增运算符(Increment):++x(先加后赋值) 或者 x++(先赋值后加)
自减运算符(Decrement):--x 或者 x--
求负运算符(Negate):-x
数值运算符(Convert to number): +x

三、赋值运算符

赋值运算符用于给变量赋值,最常见的赋值运算符,当然就是等号,表达式x=y表示将y赋值给x。除此之外,JavaScript还提供其他11个赋值运算符。

运算时从右到左,如var z=y=x;

x += y // 等同于 x = x + y
x -= y // 等同于 x = x - y
x *= y // 等同于 x = x * y
x /= y // 等同于 x = x / y
x %= y // 等同于 x = x % y
x >>= y // 等同于 x = x >> y
x <<= y // 等同于 x = x << y
x >>>= y // 等同于 x = x >>> y
x &= y // 等同于 x = x & y
x |= y // 等同于 x = x | y
x ^= y // 等同于 x = x ^ y

四、比较运算符

比较运算符比较两个值,然后返回一个布尔值,表示是否满足比较条件。
JavaScript提供了8个比较运算符。

1、 == 比较两个值是否相等

  • 相等运算符(==)会将它们转换成同一个类型,再用严格相等运算符进行比较。

2、=== 严格相等,比较它们是否为同一个值(数据类型也要相同)
内容较多,单独写了一篇文章去说相等和严格相等

3、!=不相等

4、!== 严格不相等
它的算法就是先求严格相等运算符的结果,然后返回相反值。

5、其他比较运算符(< 小于 <= 小于或等于 > 大于 >= 大于或等于)

5.1同为字符串按照Unicode 顺序进行比较
首先比较首字符的 Unicode 码点,如果相等,再比较第二个字符的 Unicode 码点,以此类推
5.2不全为字符串的比较,分成以下两种情况
1)原始类型值(数值、字符串、布尔值)

如果两个运算子都是原始类型的值,则是先转成数值再比较

5 > '4' // true
// 等同于 5 > Number('4')
// 即 5 > 4

true > false // true
// 等同于 Number(true) > Number(false)
// 即 1 > 0

2 > true // true
// 等同于 2 > Number(true)
// 即 2 > 1

2)有一方或者双方为对象的比较
调用valueOf方法和toString方法,转为原始类型的值,再进行比较

var x = [2];
x > '11' // true
// 等同于 [2].valueOf().toString() > '11'
// 即 '2' > '11'
{ x: 2 } >= { x: 1 } // true
// 等同于 { x: 2 }.valueOf().toString() >= { x: 1 }.valueOf().toString()
// 即 '[object Object]' >= '[object Object]'

五、布尔运算符

1、! 取反运算符

对数据取反,得到的都是布尔值!

2、&& 且运算符

1)用途:且运算符(&&)往往用于多个表达式的求值。

2) 运算规则是:如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值为false,则直接返回第一个运算子的值,且不再对第二个运算子求值。

var x = 1;
(1 - 1) && ( x += 1) // 0
x // 1

3)跳过第二个运算子的机制,被称为“短路”,有些程序员喜欢用它取代if结构

if (i) {
  doSomething();
}

// 等价于

i && doSomething();

4)运算符可以多个连用
返回第一个布尔值为false的表达式的值。如果所有表达式的布尔值都为true,则返回最后一个表达式的值。

true && 'foo' && '' && 4 && 'foo' && true
// ''

1 && 2 && 3
// 3

3、|| 或运算符

1)运算规则:
如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值;如果第一个运算子的布尔值为false,则返回第二个运算子的值

't' || 'f' // "t"
'' || 'f' // "f"

2)或运算符可以多个连用
这时返回第一个布尔值为true的表达式的值。如果所有表达式都为false,则返回最后一个表达式的值。

false || 0 || '' || 4 || 'foo' || true
// 4

false || 0 || ''
// ''

4、condition? true case : false case 三元条件运算符

1)简介:三元条件运算符由问号(?)和冒号(:)组成,分隔三个表达式。
2)规则:如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值。

console.log(true ? 'T' : 'F');

六、位运算符

就是把两个做位运算的值,都按照二进制一位一位的按照符号规则进行运算
位运算符只对整数起作用,如果一个运算子不是整数,会自动转为整数后再执行

1、或运算(or):
符号为|,表示两个二进制位中有一个为1,则结果为1,否则为0。
0000 0010 | 0000 0001 就等0000 0011(3)

2、与运算(and):
符号为&,表示两个二进制位都为1,则结果为1,否则为0。
0000 0010 & 0000 0001 就等0000 0000(0)

3、否运算(not):
符号为~,表示将一个二进制位变成相反值。
~ 0000 0010 就等于1111 1101
4、异或运算(xor):
符号为ˆ,表示两个二进制位中有且仅有一个为1时,结果为1,否则为0。

5、左移运算(left shift):符号为<<

1(数值)<<1(左移的位数) //2
1<<2 //4
1<<3 //8

6、右移运算(right shift):符号为>>

8>>1 //4

7、带符号位的右移运算(zero filled right shift):符号为>>>

七、其他运算符

1、()小括号

圆括号是一种运算符,它有两种用法:
1)如果把表达式放在圆括号之中,作用是求值
2)如果跟在函数的后面,作用是调用函数。

2、逗号运算符

逗号运算符用于对两个表达式求值,并返回后一个表达式的值。

var x = 0;
var y = (x++, 10);
x // 1
y // 10

八、运算符的优先级

运算符的优先级,建议还是查看mdn。全部记住很难,简单理一下顺序,加深直觉(不准确哟)
自增 > 逻辑非>typeof > 加减乘除 > 判断大小(><=) >逻辑运算(与或)>三元条件运算符 >赋值 >,
clipboard.png

clipboard.png

1、typeof的优先级相当的高,比加减乘除神马的都高,所以虽然是操作符,在在复杂表达式的时候我们还是习惯加括号,看个例子

 typeof 2*3;//NaN
 typeof (2*3);//"number"
 typeof 2+3;// "number3"

2、 ++、--是右结合的操作符(优先级最高的几个都是右结合),而且比加减乘除优先级高。同时自增、自减运算符的运算数得是左值(可以放在赋值符号左边的值),而不能是常数

 var a=0,b=0;
 a+++b;//0
 a;//1,a++优先级比++b高,所以相当于(a++)+b
 b;//0

3、赋值运算符的优先级相当的低

 a = b == c; //等同于a = (b==c)

4、逻辑非!也在优先级队列的前端,比加减乘除高,但逻辑与、逻辑或优先级很低,不如加减乘除

 !2*0; //0, 等价于(!2)*0

bamboo
75 声望9 粉丝

bamboo前端学习笔记