02 js运算符

js运算符

算数运算符

算数运算符, 并不会影响变量的值, 只有通过赋值后才会对变量进行修改

1. Number运算: 与数学上的运算一样

   加减乘除: + , - , * , /

   次幂: **

   取余数: %

   let a
   a = 10 / 0 //Infinity
   a = 2 ** 10 //次幂
   a = 2 ** .5 //开放
   a = 8 % 3 //两个数相除, 取余数
   console.log(a)
   

2. Number与其他基本类型进行运算:

   js是一门弱类型语言, 当进行运算时, 会通过自动的类型转换, 来完成运算

   01, 算数运算时, 除了字符串的加法, 其他运算符的操作数是非数值时, 都会转换为数值在运算

   let b
   b = 10 - "5" // 10 - 5
   b = 10 + true //10 + 1
   b = 5 + null //5 + 0
   b = 5 - undefined //5 - NaN
   console.log(b)
   

   02, 字符串加法: 当任意一个值, 与字符串做加法运算时, 都会把非字符串的值, 转换为字符串在运算

   let b
   b = 10 - "5" // 10 - 5
   b = 5 + "12" //512 -- 字符串拼串
   b = 5 + "null" //5null -- 字符串拼串
   console.log(b)
   

   因此我们可以利用这一特点,来完成, 向字符串的类型转换, 即String的隐式转换

赋值运算符

赋值运算符(=): 用来将一个值 赋值给 一个变量(对变量进行修改)

let a = 10
//a /= 10 // --> a = a / 10
//a += 2  //12
//a *= 2  //20
a %= 8	  //2
console.log(a)

空赋值: ?? =

let a
a ??= 100  //只有当变量为undefined 或者 null 时才会对变量进行赋值
console.log(a)

一元运算符

一元(±): 即只需要一个操作数, +(不会改变数值的符号) 或 -(对数值进行符号位的 取反)

let c = 10
c = +c //number 10
c = -c //number -10
console.log(typeof c, c)

当我们对非数值类型进行正负运算时, 会将其转换为数值, 然后在进行运算

我们可以利用这一特点, 来完成, 向数值Number基本类型的, 隐式转换

自增与自减运算

1. 自增运算符(++): 会立即使变量加一

let d = 10
let result =  d++
console.log(d); // 11
console.log(result) // 10
let e = 10
let result2 = ++e
console.log(e) // 11
console.log(result2) // 11
let n = 5
let result3 = n++ + ++n + n //5+7+7 = 19

++d(前自增): 返回值为自增前的值(旧值)

e++(后自增): 返回值为自增后的值(新值)

1. 自减运算符(–): 与自增性质一样, 会立即使变量减一

逻辑运算符

! 逻辑非:

• 可以对一个数值进行非运算,

• 可以对一个布尔值进行取反操作:

true --> false, false–>true

• 如果对一个非布尔值进行取反, 它会先把非布尔值转换为布尔值, 然后再取反, 我们可以利用这一特性, 将 其他非布尔值类型转换为布尔值类型 – 即向布尔值类型的转换的隐式转换

let a = NaN
a = !a // Boolean true
a = !!123 //Boolean true
console.log(typeof a, a); 

&& 逻辑与:

• 可以对两个值进行与运算
• 当 && 左右都为true时, 返回true, 否则返回false
• 与运算都是短路的与, 如果第一个值为false, 则第二个值不会在执行
• 对于非布尔值进行与运算, 则会先转换成布尔值然后运算, 但是最终会返回原值

let result = true && alert(123); //第一个值为true, 执行第二个
let result2 = false && alert(123); // 第一个值为false, 不会执行第二个
let result3 = 1 || 0 // 1 为true执行, 0 为false 中断执行,反回原值

与运算如果找到了false, 就会直接返回, 没有false才会返回true

|| 逻辑或:

• 可以对两个值进行与运算
• 当 || 左右其中一边有true时, 则返回true, 否则返回false
• 或运算也是短路或运算, 如果第一个为true, 则不会执行第二个值
• 对于非布尔值进行与运算, 则会先转换成布尔值然后运算, 但是最终会返回原值

let result = true && alert(123); //第一个值为true, 执行第一个并返回
let result2 = false && alert(123); // 第一个值为false, 则执行第二个
let result3 = 1 || 0 // 1 为true执行,反回原值

或运算如果找到了true, 就会直接返回, 没有true才会返回false

关系运算符

• 关系运算符用来检查两个值之间的关系是否成立

  成立返回true, 不成立返回false

• > : 用来检查左值是否大于右值

• >= : 用来检查左值是否大于或者等于右值

• < : 用来检查左值是否小于右值

• <= : 用来检查左值是否小于或者等于右值

• 对于非数值进行关系运算时, 则会先转换成数值然后在运算

let a 
a = "bbc" > "b" // false --> "c">"b"
a = "1" > false // true --> 1 > 0
console.log(a);

但是关系运算符的两边都为字符串时, 则不会转换成数值, 而是逐位的比较字符的Unicode编码

利用这个特点可以对字符,按照字母顺序进行排序

let a 
a = "bbc" > "b"
a = "1" > false
a = "12" > "2" //false --> 1 > 2
a = +"12" > "2" //true --> 12 > 2 
//利用一元运算,隐式转换"12"为12, 因此比较两个字符串格式的数字时要得到正确的返回值, 一定要进行类型转换
console.log(a);

一个问题: 检查num=6是否在5到10之间?

let num = 6
let result = 5 < num <10 //true
//按照数学上的逻辑这样写是没问题的, 但是在js中下面的表达式result的值恒为true, 因为运算符在优先级一样的情况下按照从左向右的顺序执行,当5true<10
num = 60
result = 5 < num <10 //true
//可以拆分成两个关系运算,然后使用与运算 && 来链接, 成立返回true,不成立返回false, 并返回最终的结果
result = 5 < num && num < 10 //false
console.log(result);

相等运算符

• == : 相等运算符, 用来比较两个值是否相等
• 对两个不同类型进行关系运算时, 则会先转换相同的基本数据类型在运算

let d 
d = 1 == "1" //true
d = true == "1" //true
d = null == undefined //true
d = NaN == NaN //false
console.log(d);

null与undefined进行相等运算时会返回true

NaN不与任何值相等, 包括他自己本身, 可以用isNaN来检查一个数是否为NaN

• === : 全等运算符, 用来比较两个值是否全等
• 它不会进行自动的类型转换, 如果两个值不同则返回false, 相等则返回true

let d 
d = 1 === "1" //false
d = true === 1 //false
d = null === undefined //false
d = NaN === NaN //false
console.log(d);

• != : 不等,比较两个值得是否不相等, 对相等运算符进行取反(会自动进行基本数据类型的转换)
• !== : 不全等, 比较两个值得是否不全等, 对全等运算符进行取反(不会自动进行基本数据类型的转换))

条件运算符

• 结构: 条件表达式 ? 表达式1 : 表达式2

  程序在执行时, 会对条件表达式进行求值判断,

  ​ 如果为true, 则返回表达式1

  ​ 如果为false, 则返回表达式2

true ? alert(1) : alert(2) //false
let e = 10
let g = 20
e > g ? alert("e大") : alert("g大") //g大
let max = e > g ? e : g
console.log(max); //20

运算符优先级

优先级表汇总:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence