目录
在 JS 中有以下两大类：
基本数据类型
数值类型（Number）
整数 (int)
浮点数（float）
布尔类型（Boolean），有两个值：true 和 false
字符串（String），它可以是单引号包裹的数据，也可以是双引号包裹的数据。在 JS 推荐使用单号
空（null），表示不存在
未定义（undefined），表示变量定义了，但是没有给它赋值就使用这个变量。
不是数字（NaN - Not a Number），判断是否为数字，如果不是返回 true， 如果是返回 false
引用数据类型
数组（Array），它是用于存储一组相同类型的数据
对象（Object），在 JS 万物皆对象
判断数据类型我们在 JS 中是通过typeof 运行符来实现的。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>数据类型</title> </head> <body> <script> ? ?// 1. 定义一个整数类型的变量 ? ?let num = 10 ? ?console.log(num, typeof num); // 在控制台中输出变量的值以及变量的类型 ? ? ?// 2. 定义一个浮点类型的变量 ? ?let money = 10000.5 ? ?console.log(money, typeof money); ? ? ?// 3. 定义一个布尔类型的变量 ? ?let bool = false ? ?console.log(bool, typeof bool); ? ? ?// 4. 定义一个字符串类型的变量 ? ?let str1 = "hello" ? ?console.log(str1, typeof str1); ? ?let str2 = 'world' ? ?console.log(str2, typeof str2); ? ? ?// 5. 空值类型，它只有一个值 null ? ?let nullVal = null ? ?console.log(nullVal, typeof nullVal); ? ? ?// 6. 未定义 ? ?let age ? ?console.log(age, typeof age) ? ? ?// 7. 判断是否为数字 ? ?let n = 'a' ? ?console.log(isNaN(n), typeof isNaN(n)) </script> </body> </html>
在 JS 算术运算符包含 加、减、乘、除、取模等。
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>算术运算数</title>
</head>
<body>
<script>
? ?// 数值类型的算术运算
? ?let a = 10
? ?let b = 2
? ?// 加法运算
? ?let r = a + b
? ?console.log(r);
? ?// 减法运算
? ?r = a - b
? ?console.log(r);
? ?// 乘法
? ?r = a * b
? ?console.log(r);
? ?// 除法
? ?r = a / b
? ?console.log(r);
? ?// 取模，得到除法的余数
? ?r = a % b
? ?console.log(r);
? ?// 幂运算
? ?r = a ** b
? ?console.log(r)
?
? ?console.log('-----------------------------')
?
? ?// 布尔类型的算术运算
? ?let b1 = true
? ?let b2 = true
? ?r = b1 + b2
? ?console.log(r) ?// 当两个布尔值进行加法运算时，会把 true 变为 1，false 变为 0 后再作运算
? ?r = b1 - b2
? ?console.log(r)
? ?r = b1 / b2
? ?console.log(r)
? ?r = b1 * b2
? ?console.log(r)
?
? ?// 字符串的算术运算
? ?let s1 = '30'
? ?let s2 = '20'
? ?r = s1 + s2
? ?console.log(r) ? // 字符串作加法操作其实就是进行字符串拼接操作
? ?r = s1 - s2
? ?console.log(r, typeof r) ?// 当字符串作减法操作时，它会看这个字符串能不能转换为数字，如果能则转换后再计算，如果不能则输出 NaN
? ?r = s1 * s2
? ?console.log(r, typeof r) // 当字符串作乘法时，也会先看这个字符串能不能转换为数字，如果能则按数值进行计算，否则输出 NaN
?
? ?console.log('-----------------------------')
?
? ?// 空值
? ?let n1 = null
? ?let n2 = null
? ?r = n1 + n2
? ?console.log(r, typeof r)
?
? ?let n3 = 5
? ?r = n1 + n3
? ?console.log(r, typeof r) ?// 当空值进行算术运算时，它会转换为数值 0，然后再作计算
?
? ?// 未定义
? ?let un1 = undefined
? ?let un2 = undefined
? ?r = un1 + un2
? ?console.log(r) ? // 未定义类型不能进行算术运算
</script>
</body>
</html>
比较运算也中关系运算。它是用于比较两个数之间的大小，结果为一个布尔类型的值。比较运算符包含：大于（>）、小于（<）、等于（==）、大于等于（>=）、小于等于（<=）、不等于（!=）、全等于（===）。
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>比较运算符</title>
</head>
<body>
<script>
? ?let n1 = 10
? ?let n2 = 20
? ?r = n1 > n2
? ?console.log(r, typeof r)
? ?r = n1 < n2
? ?console.log(r, typeof r)
? ?r = n1 >= n2
? ?console.log(r, typeof r)
? ?r = n1 <= n2
? ?console.log(r, typeof r)
? ?r = n1 == n2
? ?console.log(r, typeof r)
? ?r = n1 != n2
? ?console.log(r, typeof r)
? ?console.log('-------------------------------')
? ?let n3 = 5
? ?let n4 = 5
? ?let n5 = '5'
? ?r = n3 == n4
? ?console.log(r)
? ?r = n3 === n4
? ?console.log(r)
?
? ?r = n3 == n5 ?// 使用 == 等号的方式来进行比较时，是比较的两个变量转换为数值类型后的值的大小。
? ?console.log(r)
? ?r = n3 === n5 // 使用 === 等号的方式进行比较时，比较的是值的大小以及它的类型是否相同。只两者都相同才为 true，否则为 false
? ?console.log(r)
?
? ?console.log('-----------------------------')
?
? ?//----------布尔类型的比较运算---------------------
? ?let b1 = true
? ?let b2 = false
? ?r = b1 === b2
? ?console.log(r) ? ?// 使用布尔值来做比较运算是没有意义的，因为比较运算的结果本身就是布尔类型的值。
?
? ?console.log('-----------------------------')
?
? ?let s1 = 'hello'
? ?let s2 = 'hallo'
? ?s1 = '100'
? ?s2 = '10'
? ?s1 = 'World'
? ?s2 = 'world'
? ?r = s1 === s2
? ?r = s1 > s2
? ?console.log(r)
</script>
</body>
</html>
逻辑运算符主要是指多个条件之间的关联关系，逻辑运算符有：与（&&）、或（||）以及非（!）这三种
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>逻辑运算符</title> </head> <body> <script> ? ?let n1 = 5 ? ?let n2 = 6 ? ?let b1 = true ? ?let b2 = false ? ? ?let r = n1 && n2 && b1 ? ?console.log(r, typeof r) // 使用与运算时，只有全部都是 true ，结果才是 true，否则结果为 false ? ? ?r = n1 > n2 || b1 || b2 ? ?console.log(r) ? // 使用或运算时，只有全部为 false，结果才是 false，否则结果为 true ? ? ?r = !b1 ? ?console.log(r) ? ?r = !b2 ? ?console.log(r) ?// 使用非运算时，如果本身为 true 则结果为 false，如果本身为 false 则结果为 true，即取反 ? ? ?r = n1 < n2 & b2 ? ?console.log(r) ? ?r = b1 & b2 ? ?console.log(r) ? ?r = b1 | b2 ? ?console.log(r) </script> </body> </html>
在逻辑运算符中，也可以使用 & 号来表示与运算，使用 | 符号来表示或运算。它们与 && 以及 || 是有区别的。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>逻辑运算符的区别</title> </head> <body> <script> ? ?let a = 5 ? ?let b = 0 ? ?let bool = false ? ?//r = bool && a / b ? ?r = bool || a / b ? ?console.log(r) ? // && 是具有短路效果的。|| 也是具有短路效果的 </script> </body> </html>
在 JS 中赋值运算符有以下几种：
=：将它这符号右边的值赋给这个符号左边的变量
+=：把符号右边的值与这个变量之前的值相加后再赋给这个变量
-=：把符号右边的值与这个变量之前的值相减后再赋给这个变量
*=：把符号右边的值与这个变量之前的值相乘后再赋给这个变量
/=：把符号右边的值与这个变量之前的值相除后再赋给这个变量
%=：把符号右边的值与这个变量之前的值取模后再赋给这个变量
**=：把符号右边的值与这个变量之前的值幂运算后再赋给这个变量
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>赋值运算符</title> </head> <body> <pre> =：将它这符号右边的值赋给这个符号左边的变量 +=：把符号右边的值与这个变量之前的值相加后再赋给这个变量 -=：把符号右边的值与这个变量之前的值相减后再赋给这个变量 *=：把符号右边的值与这个变量之前的值相乘后再赋给这个变量 /=：把符号右边的值与这个变量之前的值相除后再赋给这个变量 %=：把符号右边的值与这个变量之前的值取模后再赋给这个变量 **=：把符号右边的值与这个变量之前的值幂运算后再赋给这个变量 ?</pre> ? <script> ? ?let a = 10 ? // 使用 = 进行赋值运算，它是将等号右边的值赋给等号左边的变量 ? ?console.log(a) ? ? ?a += 10 ?// 它等价于 a = a + 10 ? ?console.log(a) ? ? ?a -= 10 ? // 它等价于 a = a - 10 ? ?console.log(a) ? ? ?a *= 10 ? // 它等价于 a = a * 10 ? ?console.log(a) ? ? ?a /= 10 ? // 它等价于 a = a / 10 ? ?console.log(a) ? ? ?a %= 10 ?// 它等价于 a = a % 10 ? ?console.log(a) ? ? ?a **= 10 ?// 它等价于 a = a ** 10 即 0 的 10 次方 ? ?console.log(a) </script> </body> </html>
严格来说，它是属于算术运算符中，我们在这里把单独拿出来进行讲。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>自增自减运算符</title> </head> <body> <script> ? ?let a = 20 ? ?console.log(a) ? ?//a = a + 1 ? ?//a += 1 ? ?//a++ ? ? ? ? ? ? // 这就是自增，它是在原来值的基础上加 1 ? ?++a ? ?console.log(a) ? ? ?//a -= 1 ? ?//a-- ? ? ? ? // 这就是自减，它是在原来值的基础上减 1 ? ?--a ? ?console.log(a) </script> </body> </html>
问题：a++ 和 ++a 有什么区别？
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>自增两种写法的区别</title> </head> <body> <script> ? ?let a = 10 ? ?let b = a++ + ++a + a++ + ++a ? ?console.log(b, a) ? // 50 48 </script> </body> </html>
根据上面的代码运行的结果以及分析的过程，我们发现：++ 后是先使用它的值，然后自己再加 1，而 ++ 在前是先自己加 1 后，再把结果进行相加。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>自增两种写法的区别</title> </head> <body> <script> ? ?let a = 10 ? ?//let b = a++ + ++a + a++ + ++a ? ?//console.log(b, a) ? // 48 14 ? ? ?let b = ++a - a-- + --a + a++ - a-- ? ?// b = 11 - 11 + 9 ? + 9 - 10 ? ?// ? ? a=11 a=10 ? a=9 a=10 a=9 ? ?console.log(b, a) ? // 8 9 </script> </body> </html>
总结：++在前是先自增再运算，++在后是先运算再自增。
三目运算符出现的目的是为了简化 if 语句。它的语法格式为：变量 = 表达式 ? 值1 : 值2。当表达为 true 时，取值1，否则取值2。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>三目运算符</title> </head> <body> <script> ?let a = 100 ?let b = 15 ?let c ?= a > b ? 'a大于b' : 'a小于b' ?console.log(c) </script> </body> </html>
位运算符会涉及到二进制的计算，会有补码、原码、反码。位运算符有 & 、| 、^ 、<< 、>> 以及 >>>
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>位运算符</title> </head> <body> <script> ? ?let a = 5 ? ?let b = 6 ? ? ?//let c = a & b // 4 ? ?//let c = a | b // 7 ? ?//let c = a ^ b ? // 3 ? ?//let c = a << 2 ? // 20 ? ?let c = a >> 2 ? // 1 ? ?console.log(c) </script> </body> </html>