25·灵魂前端工程师养成-JavaScript运算符

2022-09-26 17:14:25 浏览数 (1)
  • JS运算符
  • 算数运算符
  • 比较运算符
  • 奇葩其他运算符
  • 运算符的优先级

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

JS运算符

运算符介绍

在JS中，有五种运算符

1.算数运算符 2.比较运算符 3.布尔运算符 4.二进制位运算符 5.其他运算符

算数运算符

number运算

加减乘除

代码语言：javascript复制
1 1
2

9-4
5

2*3
6

9/3
3

9/0
Infinity

-9/0
-Infinity



余数

代码语言：javascript复制
10 % 7
3

10 % 5
0

-1 % 7
-1

-2 % 7
-2

-10 % 7
-3



指数

代码语言：javascript复制
7 ** 2
49

2 ** 10
1024

-1 ** 3
VM254:1 Uncaught SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence

1 ** -3
1

2 ** -3
0.125



自增自减

代码语言：javascript复制
let a = 1

a  
1

a
2

//a在前，值为前，a在后，值为后

  a
3

//a在前，值为前，a在后，值为后
a--
3

--a
1

求值运算符

代码语言：javascript复制
// 求值
let b = -8
 b
-8

let c = 8
 c
8

负数运算符

代码语言：javascript复制
let d = -8
-d
8

let e = 8
-e
-8

尽量少用自增或者自减，所以我们一般写成a =1或者a-=1

string运算符

连接运算

代码语言：javascript复制
//字符串只支持， 
'1'   '2'
"12"

不同类型的东西不要加起来

比较运算符

代码语言：javascript复制
>
<
>=
<=
==
!=
===
!==

JS三位一体



代码语言：javascript复制
0 == []
0 == '0'
0 == 't'

//但是右边三个互不相等



忠告，永远不要使用 == 用 === 代替， == 的问题在于，它总自作聪明（自动类型转换）

JS真值表：



所以我们以后判断只需要使用===

代码语言：javascript复制
//只需要记住
[] !== []
{} !== {}
NaN !== NaN

布尔运算符

主要是三个运算符

代码语言：javascript复制
||  //或
&&  //且
!   //非

短路逻辑

代码语言：javascript复制
//以防console函数不存在 报错
console && console.log && console.log('hi')

//a的保底值
a=a||100

if add(n=0){
 return n   1
}



二进制运算符

为什么刚才 或|| 且&& 真这么写？ 为啥不是单个 ，| 、 &？

因为单个的已经被占用了。

代码语言：javascript复制
| // 或
& // 与
~ // 否
代码语言：javascript复制
// 或 | 只要有一个是1 就是1
0b11
3

0b01
1

0b10
2

0b1111
15

0b1111 | 0b1010
15

(0b1111 | 0b1010)
15

(0b1111 | 0b1010).toString(2)
"1111"
代码语言：javascript复制
//垂直运算：

0b 1 1 1 1
0b 1 0 1 0
-----------
// 1 1 1 1
代码语言：javascript复制
// 与 & 两个都为1 才是1
(0b1111 & 0b1010).toString(2)
"1010"
代码语言：javascript复制
// 否 ~ 如果是1就变成0 如果是0就变成1
(~0b1111).toString(2)
"-10000"
代码语言：javascript复制
// ^ 异或，如果两个位相同，则结果为0 否则为1
(0b1111 ^ 0b1010).toString(2)
"101"
代码语言：javascript复制
//左移 << 右移 >>
0b0010 >> 1
1

(0b0010 >> 1).toString(2)
"1"

(0b0010 << 1).toString(2)
"100"
代码语言：javascript复制
// >>> 头部 补0的右移运算符
(0b0010 >>> 1).toString(2)
"1"



使用与运算符判断一个数的奇偶

代码语言：javascript复制
//偶数
& 1 = 0

//奇数
& 1 = 1


(7).toString(2) & 1 
1

(8).toString(2) & 1 
0

7 % 2 === 1
true

7 & 1
1

8 & 1
0



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

以下代码，可能用不到，但是，面试的时候 面试官或许会问到...

代码语言：javascript复制
~~ 6.11
6

6.83 >> 0
6

6.83 << 0
6

6.83 | 0
6

6.83 >>> 0
6

取整，有函数，为啥还要用上面的方法？mmp 都说了面试会问。

代码语言：javascript复制
window.parseInt(6.83)
6

使用^来交换a b的值

代码语言：javascript复制
//新语法
let a = 1

let b = 2

a
1

b
2

[a,b] = [b,a]

a
2

b
1
代码语言：javascript复制
let a = 1

let b = 2

a = a ^ b // a ^= b
3

b ^= a
1
a ^= b
2

a
2

b
1



蛋疼么？ 有第一个新语法，为啥还要用下面的这种，异或的方式... mmp 还是因为面试会问。

奇葩其他运算符

一个比一个奇葩

点运算符

代码语言：javascript复制
//语法
对象.属性名 = 属性值
let a = {name: 'zls'}

a.name
"zls"

a.name = 'fuck'
"fuck"

a.name
"fuck"

//作用
读取对象的属性值

void运算符

代码语言：javascript复制
//语法
void 表达式或语句

//作用
求表达式的值，或执行语句
然后void的值总是为undefined


void console.log('hi')
hi
undefined

void 1
undefined

void (1 2)
undefined

需求：

代码语言：javascript复制
<a href="https://blog.driverzeng.com" onclick="f();return false">点击</a>

return 假值可以阻止默认动作
<a href="javascript:void(f())">文字</a>
改用void可以炫技

例如：

代码语言：javascript复制
<a href="https://blog.driverzeng.com" onclick="console.log('hi');return false">点击</a>

希望 有一个a标签，但是不希望跳转...



逗号运算符

代码语言：javascript复制
//语法
表达式1,表达式2,表达式3,...,

//作用
将表达式n的值作为整体的值

let f = (x) => {

  return x   1
}


let f1 = (x) => (console.log('hi'),x 1)

f1(1)
hi
2



运算符的优先级

相同运算符

代码语言：javascript复制
1 2*3 是 （1 2）*3  还是 1 （2*3）

!a === 1 是 (!a) === 1 还是 !(a===1)

new Person().sayHi()是什么意思？

MDN运算符优先级：传送门





在MDN上，总共汇总了20个运算符，怎么记忆呢？

不记，忘掉他...

谁 tm 的记得住？

优先级

运算类型

关联性

运算符

20

圆括号

n/a（不相关）

( … )

19

成员访问

从左到右

… . …

需计算的成员访问

从左到右

… [ … ]

new (带参数列表)

n/a

new … ( … )

函数调用

从左到右

… ( … )

可选链（Optional chaining）

从左到右

?.

18

new (无参数列表)

从右到左

new …

17

后置递增(运算符在后)

n/a

…

后置递减(运算符在后)

… --

16

逻辑非

从右到左

! …

按位非

~ …

一元加法

…

一元减法

- …

前置递增

…

前置递减

-- …

typeof

typeof …

void

void …

delete

delete …

await

await …

15

幂

从右到左

… ** …

14

乘法

从左到右

… * …

除法

… / …

取模

… % …

13

加法

从左到右

… …

减法

… - …

12

按位左移

从左到右

… << …

按位右移

… >> …

无符号右移

… >>> …

11

小于

从左到右

… < …

小于等于

… <= …

大于

… > …

大于等于

… >= …

in

… in …

instanceof

… instanceof …

10

等号

从左到右

… == …

非等号

… != …

全等号

… === …

非全等号

… !== …

9

按位与

从左到右

… & …

8

按位异或

从左到右

… ^ …

7

按位或

从左到右

… | …

6

逻辑与

从左到右

… && …

5

逻辑或

从左到右

… || …

4

条件运算符

从右到左

… ? … : …

3

赋值

从右到左

… = …

… = …

… -= …

… *= …

… /= …

… %= …

… <<= …

… >>= …

… >>>= …

… &= …

… ^= …

… |= …

2

yield

从右到左

yield …

yield*

yield* …

1

展开运算符

n/a

... …

0

逗号

从左到右

… , …

技巧： 圆括号优先级最高 会用圆括号就行 其他的一律不记

运维 python 自动化

0 人点赞