JS 运算符 Note-FrontEnd-17

159 阅读3分钟

JS 运算符的知识,内容包括算术运算符、比较运算符、布尔运算符、二进制位运算符、其他运算符、运算符优先级。

一、算术运算符

1. number 运算

加减乘除
余数 x%7 
// JS 中负数的余数:-1 % 7 = -1,JS 里是先把符号提出来,然后 1 除以 7 的余数
//这和我们理解的不一样:-1 % 7 → 6 % 7 = 6
指数 x**3
自增自减 x++ / ++x / x-- / --x
求值运算符 +x
负数运算符 -x

2. string 运算

连接运算 '123' + '456'
 '1' + 2 => '12' // 数字和字符串相加,JS 默认会把数字变成字符串
 '2' - 1 => 1  // 数字和字符串相减,JS 默认会把字符串变成数字
 // 尽量少用自增自减,因为容易你和别人都记错
 // 不同类型不要相加,把 1 和 '2' 加起来是几个意思

二、比较运算符

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

忠告:永远不要使用 ==,用 === 代替

1. x == y

\\ === 的问题在于,它总是自动类型转换
0 == []
0 == '0'
0 == '\t'
\\ 但是右边三个互不相等

// 令人难以理解
[] == false // true
[[]] == false //true
({}) == false // false 

2. x === y

// 没有任何费解
// 基本类型看值是否相等,对象看地址是否相等
[] === [] // false
{} == {} //false
// 它是比较地址的的,不是比较内容的,所以也比较好理解
// 唯一特例
NaN === NaN // false

三、布尔运算符

// 或且非
||
&&
!

短路逻辑

// 以防 console 不存在而去报错
console && console.log && console.log('hi')
// a 的保底值
a = a || 100
// a = a || 100 这么写是存在漏洞的,是 falsy 值是假
// JS 为此发明了新的语法
function add(n=0){
    return n+1
}
// 这样就只有 null 和 undefined 为假了

四、二进制位运算符

|  // 或
&  // 与
~  // 非
^  //异或
<<  // 左移
>>  // 右移
>>>  // 头部补零的右移运算符
// 平时工作很少用,面试喜欢问

参考:位运算符在 JS 中妙用

1. 使用与运算符判断奇偶

// 位运算会消除小数部分
console.log(~~ 6.83)  // 6
console.log(6.83 >> 0) // 6
console.log(6.83 << 0) // 6
console.log(6.83 | 0) // 6
console.log(6.83 >>> 0) // 6

2. 使用 ^ 来交换 a 和 b 的值

var a = 5
var b = 8
a ^= b
b ^= a
a ^= b
console.log(a)  // 8
console.log(b)  // 5
// JS 的最新语法交换 a 和 b 的值
[a,b] = [b,a]

五、其他运算符

1. 点运算符

语法: 对象.属性名 = 属性值,并且只能用在对偶像上

// a 不是对象,为什么可用点语法
var a = 1
a.toString()
// 因为 JS 很鸡贼,帮我们做了三件事情把 a 变成一个对象
// 1.(创)创建一个封装对象
// 2.(用)调用这个封装对象的 toSring(),得到结果
// 3.(滚)干掉这个封装对象

作用: 读取或设置对象的属性值

疑问: 不是对象,为什么也可以有属性?

// JS 有特殊逻辑,点对象不是对象,就把它封装成对象
// number 会变成 Number 对象
// string 会变成 String 对象
// bool 会变成 Boolean 对象
// 程序员从来不用这三种对象,只用简单类型

2. void 运算符

语法: void 表达式或语法

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

需求:

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

3. 逗号运算符

语法: 表达式1,表达式2,...,表达式n

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

使用:

let f => (console.log('平方值为'),x*x)
// 注意上面的括号不能省

六、符运算符优先级

优先级汇总表: 优先级就是先算什么后算什么,优先级汇总表位于 MDN,一共有 20 个运算符,点击 这里 查看

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

「资料来源:©饥人谷」