内容提要

  • 算术远算符
  • 比较运算符
  • 布尔运算符
  • 二进制位运算符
  • 其他运算符

算术远算符

数学运算

number运算

  • Addition+、Subtraction-、Multiplication*、Division/
  • Remainder 余数x%7，取余、取模
  • 指数x**3
  • Increment自增、Decrement自减x++、++x、x--、--x
  • Convert to number 求值运算符+x
  • Negate 负数运算符-x

强制类型转换，不报错

1
2
3
4
5

+undefined // NaN
+null // 0
+'' // 0
+{} //NaN
+{valueOf:{return 3}} // 3

string运算

  • 连接运算123+abc

尽量少用自增自减，容易记错

不同类型不要加起来

比较运算符

  • >
  • <
  • >=
  • <=
  • == 不记
  • != 不记
  • ===
  • !==

永远不要使用==，用===代替

==的问题在于，它总是自作聪明（非预期自动类型转换）

1
2
3

0 == [] // true
0 == '0' // true
0 == '\t' // true

但是右边三个互不相等

x == y真值表

对于==的判断，JS是怎么处理的不需要记，只是为了说明==有多少不靠谱

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

[] == false //true 但不是falsy值
![] == false //true
({}) == false //false
[[]] == false //true

// 其他1
"" == 0  //
" " == 0  //
"" == true  //
"" == false  //
" " == true  //

// 其他2
!" " == true  //
!" " == false  //
"hello" == true  //
"hello" == false //
"0" == true  //
"0" == false  //
"00" == false  //
"0.00" == false  //

// 其他3
undefined == null  //
{} == true  //
[] == true  //
var obj = {
  a: 0,
  valueOf: function(){return 1}
}
obj == "[object Object]"  //
obj == 1  //
obj == true  //

速记

x y 结果（隐式转换）
null undefined true
Number String x == toNumber(y)
Boolean (any other type) toNumber(x) == y
Object String or Number toPrimitive(x) == y
any others any others false

toNumber()

type Result
Undefined NaN
Null 0
Boolean true -> 1, false -> 0
String “abc” -> NaN, “123” -> 123

toPrimitive()

  • 对于 Object 类型，先尝试调用 .valueOf 方法获取结果。
  • 如果没定义，再尝试调用 .toString方法获取结果

令人难以理解

x == y真值表

x === y真值表

x === y真值表

没有任何费解

  • 基本类型看值是否相等
  • 对象看地址是否相等
1
2
3

([]) !== ([]);
({}) !== ({});
(function(){}) !== (function(){})

唯一特例

1

NaN !== NaN //true

布尔运算符

或且非

  • || 假短路 或
  • && 真短路 且
  • ! 取反
  • A?B:C三目

短路逻辑

  • console && console.log && console.log('hi')，防止console不存在报错
  • a = a || 100， a的保底值

二进制位运算符

或、与、否

  • |，左右两个都为0，则结果为0，否则为1
  • &
  • ~

异或

  • ^
  • 左右两个位相同，则结果为0，否则为1

左移、右移

  • <<和>>

头部补零的右移运算符

  • >>>

工作很少用，面试问

位运算符在JS中的妙用

使用与运算符判断奇偶

代码

  • 偶数 & 1 = 0
  • 奇数 & 1 = 1

使用~~、>>、<<、>>>、|来取整

代码

1
2
3
4
5

console.log(~~ 6.18) // 6
console.log(6.75 >> 0) // 6
console.log(6.83 << 0) // 6
console.log(6.12 | 0) // 6
console.log(6.65 >>> 0) // 6

使用^=来交换a、b的值

代码

1
2
3
4
5
6
7

var a = 5
var b = 8
a ^= b
b ^= a
a ^= b
console.log(a) // 8
console.log(b) // 5

位运算用的甚少，容易忘

面试前重新看看即可

其他运算符

记录JS各种奇葩bug的JavaScript 秘密花园

点运算符

点运算语法
  • 对象.属性名 = 属性值
点运算作用
  • 读取对象的属性值
1
2
3
4
5

let i = 0
const j = 1
(function(i,j) {
        console.log(i,j)
    }.bind(null,i,j))(i,j) //ReferenceError: can't access lexical declaration `i' before initialization

1
2
3
4

let i,j
(function(i,j) {
        console.log(i,j)
    }.bind(null,i,j))(i,j)
点运算疑问
  • 不是对象，为什么也可以有属性：'a-b-c.split('-')
  • JS有特殊逻辑，点前面不是对象，就把它封装成对象
  • number会变成Number对象
  • string会变成String对象
  • bool会变成Boolean对象
  • 程序员从来不用这三种对象，抽佣简单类型

void运算符

void运算语法
  • void表达式或语句
void运算作用
  • 求表达式的值，或执行语句
  • 然后void的值总是为undefined
void需求
1
2

<a href="http://example.com" onclick="f();return false;">点击</a>
<a href="javascript: void(f())">文字</a>
  • return假值可以阻止默认动作
  • 改用void可以炫技，但没啥卵用

逗号,运算符

,运算语法
  • 表达式1,表达式2,...,表达式n
,运算作用
  • 将表达式n的值作为整体的值
,使用
1
2
3
4
5
6
7
8
9

let  a = (1,2,3,4,5)
console.log(a) // 5
let f = (x)=>(console.log('平方值为'), x*x)
/* 注意上面括号不可省 */

/* 除非 */
let  a = (1,2,3,4,5)
console.log(a) // 5
let f = (x)=> console.log('平方值为') && x*x

typeof

运算符优先级

先算什么，后算什么

不同运算符：优先级

  • 1 + 2 * 3
  • !a === 1是(!a) === 1
  • new Person().sayHi()

相同运算符：结合性

  • 从左到右a + b + c
  • 从右到左a = b = c = d，赋值

优先级列表

MDN 优先级列表

20个运算符

  • 圆括号优先级最高
  • 其他一律不记

面试技巧

不推荐学的

  • ==不学
  • 优先级不学

面试遇到怎么办

  • 向面试官说明为什么不学，以及态度
  • 非正常范例，工作避免写，分不清的用()
  • 如果非要答，直接跳过

答

类型转换

隐性（强制）类型转换

不要在工作中出现下面类似的误导性的写法

if的判断

1
2

if(xxx){
}

js 是如何处理的？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 题目1：如下代码输出什么?
if ("hello") {
    console.log("hello")
}

// 题目2：如下代码输出什么?
if ("") {
    console.log('empty')
}

// 题目3：如下代码输出什么?
if (" ") {
    console.log('blank')
}

// 题目4：如下代码输出什么?
if ([0]) {
    console.log('array')
}

if('0.00'){
  console.log('float')
}
  • 对于括号里的表达式，会被强制转换为布尔类型
类型 结果
Undefined false
Null false
Boolean 直接判断
Number +0, −0, 或者 NaN 为 false，其他为 true
String 空字符串为 false,其他都为 true
Object true

JS 运算符.pdf