Table of Contents

JS运算符

2020-10-16
3 min read

目录

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

其它 1.!n //表示n不存在 2.简写

let f= (x) =>{
  return x+1
  }
简写let f= x => x+1

一.算术运算符

1.number运算

加减乘除`+-*/` 

余数x%7

指数x**3

自增自减x++/++x/x--/--x

求值运算符+x

负数运算符-x

2.string运算

连接运算 '123'+'456'

解析：

1.除法不能除以0 例：-5/0 输出结果：-infinity //负无穷大

2.10%7=3、-7%7=-0、-12%7=-5

3.7**2=49 7的平方，n的n次方

4.自增自减

let a=10
let b=a++  //b=10
let b=++a  //b=11

a在前，表达式的值取之前的状态。a在后，表达式的值取之后的状态。

a在前，值为前。a在后，值为后。

let a=10
let b=a--  //b=10
let b=--a  //b=9

a在前值为前。a在后值为后。

忠告：尽量少用自增自减，a++可以写成a +=1

for循环可以写，因为大家都知道for（let i=0;i<10;i++）{}

5.求值运算符+

let a=8
+a
输出结果:8

只是表示求一下这个数的值

6.负数运算符-

就是求相反数

let a=-8
-a
输出结果:8

7.连接运算'123’+‘456’

字符串只支持加号运算符，别的都不支持!

变态

1+'2' 
输出结果：'12'
'2'-1
输出结果：1

注意：

1.如果数字与字符串相加，那么js就会把数字变成字符串再相加。

如果字符串减数字，那么js就会把字符串变成数字再相减。

2.不同类型不要胡乱加起来!

如果写代码时发现数字+字符串=字符串，肯定是代码写错了！

面试题

1.负数取余

-1%7=-1、-2%7=-2、…-6%7=-6

剩下的都是正常的。

记得举一反三

2.自增自减(同上,略)

3.string连接运算(同上同上,略)

二.比较运算符

1.>  2.<  3.>=  4.<=  5.== 模糊相等
6.!= 不模糊相等  7.=== 全等  8.!== 不全等

解析

1.==

忠告：永远不要使用==，用===代替

==的问题在于，它总是自作聪明(自动类型转换)。

x==y真值表令人难以理解，图略。x===y真值表好理解多了。

2.x===y真值表

两个规则

1.基本类型看值是否相等

2.对象看地址是否相等

控制台输入：0===[]
     结果：false//类型不相等直接不相等

          0===1
     结果：false//类型相等但值不相等

          true===true
     结果：true

唯一要记忆的是[]!==[]、{}!=={}和 NaN!==NaN (强行记忆!)

空数组不等于空数组因为地址不同。空对象不等于空对象。

三.布尔运算符

或且非

||
&&
!

短路逻辑

1’ console && console.log && console.log(‘hi’)

以防console不存在报错

2’ a=a||100 //有bug不要用

a的保底值

解析：

1’ IE不支持console,如果在IE运行的话,程序就会奔溃。

我们可以用if检测下，这就叫做防御性编程。

简写：console && console.log && console.log(‘hi’)

可选链语法 console?.log?.(‘hi’);

2’保底值

function add(n){
  return n+1
}
add() //用户没有传参数
结果：NaN

function add(n){
  //if(!n){ n=0 } 等同于
  n=n||0
  return n+1
}

n=n||0 这种写法存在漏洞，5个falsy值(undefined null ’’ 0 NaN)都会使它为假

最新语法推荐

function add(n=0){ //直接写到参数列表里
  return n+1
}

add(null)
结果:1
add(undefined)
结果:1

add('')
结果:"1"

如果n是null或者undefined就让n=0保底

只有null和undefined才是空！

四.二进制位运算符

干嘛用的？只对二进制数有效。

或、与、否

| 两个位都为0，则结果为0，否则为1。
&
～

异或

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

左移右移

<< 和 >>

头部补零的右移运算符

`>>>`

解析

1.或、与、否

(1)或| //只针对二进制数

ob二进制前缀

0b11110011
结果:243  //结果只会以十进制的形式展示

例子: 0b1111|0b1010
结果:15 //结果是十进制，要转换为二进制

(0b1111|0b1010).toString(2)
结果:'1111' //两个位都为0，则结果为0，否则为1

1111 //每一位垂直运算

1010

(2)与& 两个都为1，则结果为1

(0b1111 & 0b1010).toString(2)

结果:‘1010’

(3)否～ 取反

(~0b1111).toString(2)

结果:’-10000’ //变了之后会以补码的形式翻译成负数

2.异或^

两个相同结果为0，否则为1

(0b1111 ^ 0b1010).toString(2)

结果:‘101’ //前面的0被削掉了

3.左移右移 « 和 »

(0b0010 >> 1).toString(2) //0001 toString后就是"1"

(0b0010 << 1).toString(2) //0100 toString后就是"100"

(0b0011 >> 1).toString(2) //0001 toString后就是"1",1会被吃掉

(0b0011 << 1).toString(2) //110 toString后就是"110"

面试题

第1题.位运算 与判断奇偶

偶数 &1=0

奇数 &1=1

例子：

23 & 1
结果:1
26 & 1
结果:0

还有种方法:7%2===1 true就是单数否则就是偶数

第2题.位运算取整

console.log(~~ 3.14) //3 这5种方法都可以

console.log(3.14 >> 0) //3

console.log(3.14 << 0) //3

console.log(3.14 | 0) //3

console.log(3.14 >>> 0) //3

例子

3.14 >>> 0
输出:3

还有种方法:window.parseInt(3.14) //工作中都是用这个

第3题.位运算 异或交换a b的值

第1种.新版语法[a,b]=[b,a]

let a=1;
let b=2;
[a,b]=[b,a]
a
结果:2
b
结果:1

第2种.^

let a=2
let b=3
a ^= b
b ^= a
a ^= b
console.log(a) //3
console.log(b) //2

五.其它运算符

1.点运算符

语法

对象.属性名=属性值

注意:.只能用在对象上。如果不是对象就会被转化为对象。

例子

let a=1
a.toString()
结果:"1" 
a1=new Number(a)
a1 
结果: Number{1} //本身没属性，只有共有属性
     ▶️[[Prototype]]: Number //共有属性
     [[PrimitiveValue]]: 1

补充:a1变成对象后，本身没变化，只是变成了拥有方法的一个对象.

每次在调用API时都会创建个封装的对象，用完后再删掉。一次性的。

作用

读取对象的属性值

疑问

不是对象,为什么也有属性？‘a-b-c’.split(’-’)

js有特殊逻辑，点前面不是对象就把它封装成对象

number会变成 Number对象

string会变成 String对象

bool会变成 Boolean对象

程序员从来不用这三种对象，只用简单类型。

永远不要用

(1)==

(2)++

(3)这3个构造函数Number、String、Boolean

new Number()、new String()、new Boolean()

2.void运算符

语法

void表达式或语句

作用

求表达式的值，或执行语句

然后void的值总是为undefined

void console.log(‘hi’)

结果:undefined

void (1+1)

结果:undefined

需求

点击a标签,不跳转

<a href="http://baidu.com" onclick="f(); return false;">点击</a>
<a href="javascript:void(f());">文字</a>
正规写法<a href="javascript:;">baidu</a>

return 假值可以阻止默认动作

改用void可以炫技

补充:不加return 永远只会返回undefined;

3.逗号运算符

语法

表达式1,表达式2,…,表达式n

作用

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

使用

let a=(1,2,3,4,5)

那么a的值就是5,奇葩

let f= x =>{console.log('hi'),return x+1}
不想写return，又能写两个语句。
let f=(x)=>(console.log('平方值为'),x*x) //括号不能省
逗号默认会把最后一个值作为返回值

4.运算符优先级

不同运算符

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

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

相同运算符

从左到右 a+b+c

从右到左 a=b=c=d //a=(b=(c=(d=2)))

一共有21个运算符。

记住圆括号优先级最高。写代码时用()代替，清楚表明优先级，同事更能理解。

Previous JS语法