1. 运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>运算符</title>
</head>
<body>
<script>
/*
运算符（操作符）：可以对一个或多个操作数进行运算
- 算术运算符：
+ 加
- 减
* 乘
/ 除
** 幂运算
% 取模（两个数相除取余数）
注：算数运算时，除了字符串的加法，其他运算的操作数是非数值时，都会先进行类型转换再运算
*/
let a = 1 + 1
a = 10 -5
a = 10 * 5
a = 10 / 5
a = 10 / 0 //Infinity
a = 10 ** 4
a = 16 ** .5 //开平方
a = 10 % 2
/*
js是一门弱类型语言，当进行运算时会通过自动转换类型来完成运算
*/
a = 10 - '5' // 10 -5
a = 10 + true // 10 + 1
a = 5 + null //5 + 0
a = 6 - undefined // 6 - Nan = Nan
/*
当任意一个值和字符串做加法运算时，会先将其他值转换为字符串，再进行字符串的拼接操作
*/
a = 'false' + true //'falsetrue'
a = 1 + '2' //'12'
console.log(a)
//可以通过任意类型+空串的方法来将其转换为字符串，原理同String()函数
let b = 1
b = b + ''
console.log(typeof b, b)
</script>
</body>
</html>
2. 赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>赋值运算符</title>
</head>
<body>
<script>
/*
赋值运算符用来将一个值赋值给一个变量
*/
let a = 10
a += 10 //等价于 a = a + 10
/*
??= 空赋值，即：只有变量的值为null或undefined时才会进行赋值操作
*/
let b = null
b ??= 100
console.log(b) //100
let c = 100
c ??= 123
console.log(c) //100
</script>
</body>
</html>
3. 一元±
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>一元±</title>
</head>
<body>
<script>
/*
一元的±
+ 正号
- 负号（对数值进行符号位取反）
*/
let a = 1
a = +a //1
a = -a //-1
console.log(a)
//当我们对非数值类型进行正负运算时，会先将其转换为数值再进行运算
let b = '123'
//b = Number(b)
b = +b
console.log(typeof b, b)
</script>
</body>
</html>
4. 自增自减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自增和自减</title>
</head>
<body>
<script>
/*
自增：
- 前自增 ++a
- 后自增 a++
*/
let a = 1
//先用后加
//let b = a++
//console.log('a++ = ', b) //1
//console.log(a) //2
//先加后用
let b = ++a
console.log('a++ = ', b) //2
console.log(a) //2
let c = 2
let result = c++ + ++c + c //2 + 4 + 4
console.log(result)
/*
自减：（同理自增）
- 前自减
- 后自减
*/
</script>
</body>
</html>
5. 逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>逻辑运算符</title>
</head>
<body>
<script>
/*
! 逻辑非：
- 可以对一个布尔值进行取反操作
- 如果对一个非布尔值进行取反，js会先将其转换为布尔值再取反
- 类型转换：
转换为字符串：
显示：String()
隐示：+ ''
转换为数值：
显示：Number()
隐示：+
转换为布尔值：
显示：Boolean()
隐示：!!（取反再取反）
*/
let a = true
console.log(!a)
let b = 123
console.log(!!b)
/*
&& 逻辑与：
- 可以对两个值进行与运算
- 当&&左右都为true时，返回true，否则返回false
- 与运算是短路运算，即：第一个值为false时，则直接返回false，不会再看第二个值
- 与运算是找false的运算，只要找到了第一个false，就直接返回false
*/
let c = true && true
console.log(c) //true
let d = false && true
console.log(d) //false
//true && alert('逻辑与运算') //alert会执行
//false && alert('逻辑与运算')
/*
对于非布尔值进行与运算，js会先将其转为布尔值，再进行与运算：
- 最终返回结果是原值
- 如果第一个值为false，则返回第一个值
- 如果第一个值为true，则返回第二个值
*/
console.log(1 && 2) //2
console.log(1 && 0) //0
console.log(0 && Nan) //0
/*
|| 逻辑或：
- 可以对两个值进行或运算
- 当||左右只要有一个true时，则返回true，否则返回false
- 或运算也是短路运算，如果第一个值为true，则不看第二个值
- 或运算是找true的运算，只要找到了第一个true，就直接返回true
*/
console.log(true || false) //true
console.log(false || true) //true
console.log(true || true) //true
console.log(false || false) //false
//false || alert('逻辑或运算') //alert会执行
//true || alert('逻辑或运算') //第一个值为true，alert不会执行
//此处与逻辑与运算同理
console.log(1 || 2) // 1
console.log('abc' || null) // 'abc'
console.log(Nan || 1) // 1
</script>
</body>
</html>
6. 关系运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>关系运算符</title>
</head>
<body>
<script>
/*
用来检查两个值之间的关系是否成立，成立 true，不成立 false
> 大于
< 小于
>= 大于等于
<= 小于等于
注：
- 当对非数值进行关系运算时，会先将其转换（隐式转换）为数值，再进行比较
- 当两端都是字符串时，js不会进行数值转换，而是逐位比较二者的Unicode编码
两个字符串长度不相同时，只需比较第一位（即比较一位就能出结果），利用该特性，可以对字符串进行按字母顺序排序
*/
console.log('2 > 1', 2 > 1)
console.log('2 > 2', 2 > 2)
console.log('2 >= 2', 2 >= 2)
console.log('5 >= \'10\'', 5 >= '10')
console.log('1 >= true', 1 <= true)
console.log('\'a\' > \'b\'', 'a' > 'b') //false
console.log('\'12\' > \'2\'', '12' > '2') //false
</script>
</body>
</html>
7. 相等运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>相等运算符</title>
</head>
<body>
<script>
/*
==：
- 相等运算符
- 当比较两个不同类型的值时，会先将其转换为相同的类型（通常转换为数值）再进行比较
- null和undefined进行比较时，会返回true
- Nan不和任何值相等，包括它自身
===：
- 全等运算符
- 两个不同类型的值比较时，不会自动进行类型转换
!=：
- 会自动进行类型转换
!===：
- 不会自动进行类型转换
*/
console.log('1 == 2', 1 == 2) //false
console.log('1 == \'1\'', 1 == '1') //true
console.log('true == 1', true == '1') //true
console.log('nul == undefined', null == undefined) //true
console.log('NaN == NaN', NaN == NaN) //false
console.log('1 === \'1\'', 1 === '1') //false
console.log('null === undefined', null === undefined) //false
console.log('1 != \'1\'', 1 != '1') //false
console.log('1 !== \'1\'', 1 !== '1') //false
</script>
</body>
</html>
8. 条件运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>条件运算符</title>
</head>
<body>
<script>
/*
条件运算符（三目运算）：
条件表达式 ? 表达式1 : 表达式2
执行顺序：当条件表达式成立（为true）时，执行表达式1，结束；反之执行表达式2，结束
*/
let a = 1
let b = 20
let result = a > b ? a : b
console.log(result)
</script>
</body>
</html>
9. 运算符的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>运算符的优先级</title>
</head>
<body>
<script>
/*
js中的运算优先级与数学运算类似，加减乘除
mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence#%E6%B1%87%E6%80%BB%E8%A1%A8
该文档的表格中，越靠前的，优先级越高
*/
</script>
</body>
</html>
评论 (0)