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

2019-05-12 分类:JavaScript, 前端开发 阅读(22) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者QQ:133411023、253097001
-笔者交流群:198571640
-笔者微信:z133411023


-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。
-擅长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运算

加减乘除

1+1
2

9-4
5

2*3
6

9/3
3

9/0
Infinity

-9/0
-Infinity

余数

10 % 7
3

10 % 5
0

-1 % 7
-1

-2 % 7
-2

-10 % 7
-3

指数

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

自增自减

let a = 1

a++
1

a
2

//a在前,值为前,a在后,值为后

++a
3

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

--a
1

求值运算符

//+求值
let b = -8
+b
-8

let c = 8
+c
8

负数运算符

let d = -8
-d
8

let e = 8
-e
-8

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


string运算符

连接运算

//字符串只支持,+
'1' + '2'
"12"

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

比较运算符

>
<
>=
<=
==
!=
===
!==

JS三位一体

0 == []
0 == '0'
0 == '\t'

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

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

JS真值表:

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

//只需要记住
[] !== []
{} !== {}
NaN !== NaN

布尔运算符

主要是三个运算符

||  //或
&&  //且
!   //非

短路逻辑

//以防console函数不存在 报错
console && console.log && console.log('hi')

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

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


二进制运算符

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

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

| // 或
& // 与
~ // 否
// 或 | 只要有一个是1 就是1
0b11
3

0b01
1

0b10
2

0b1111
15

0b1111 | 0b1010
15

(0b1111 | 0b1010)
15

(0b1111 | 0b1010).toString(2)
"1111"
//垂直运算:

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

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

(0b0010 << 1).toString(2)
"100"
// >>> 头部 补0的右移运算符
(0b0010 >>> 1).toString(2)
"1"


使用与运算符判断一个数的奇偶
//偶数
& 1 = 0

//奇数
& 1 = 1


(7).toString(2) & 1 
1

(8).toString(2) & 1 
0

7 % 2 === 1
true

7 & 1
1

8 & 1
0


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

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

~~ 6.11
6

6.83 >> 0
6

6.83 << 0
6

6.83 | 0
6

6.83 >>> 0
6

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

window.parseInt(6.83)
6

使用^来交换a b的值
//新语法
let a = 1

let b = 2

a
1

b
2

[a,b] = [b,a]

a
2

b
1
let a = 1

let b = 2

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

b ^= a
1
a ^= b
2

a
2

b
1

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

奇葩其他运算符

一个比一个奇葩


点运算符
//语法
对象.属性名 = 属性值
let a = {name: 'zls'}

a.name
"zls"

a.name = 'fuck'
"fuck"

a.name
"fuck"

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

void运算符
//语法
void 表达式或语句

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


void console.log('hi')
hi
undefined

void 1
undefined

void (1+2)
undefined

需求:

<a href="http://www.driverzeng.com" onclick="f();return false">点击</a>

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

例如:

<a href="http://www.driverzeng.com" onclick="console.log('hi');return false">点击</a>

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


逗号运算符
//语法
表达式1,表达式2,表达式3,...,

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

let f = (x) => {

  return x + 1
}


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

f1(1)
hi
2

运算符的优先级


相同运算符
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 逗号 从左到右 … , …

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

关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册