前端JS学习（数据类型与运算符）
数据类型
数值
/*
数值（Number）
- 在JS中所有的整数和浮点数都是Number类型
- JS中的数值并不是无限大的，当数值超过一定范围后会显示近似值
- Infinity 是一个特殊的数值表示无穷
- 所以在JS中进行一些精度比较高的运算时要十分注意
- NaN 也是一个特殊的数值，表示非法的数值
*/
let a = 10
a = 10.5
a = 3.14
a = 9999999999999991111111111111111111
a = 99999 ** 99999
a = Infinity
a = 1.11111111111111111111111111111111111111111111
a = 0.0000000000000000000000000000000000001
a = 0.1 + 0.2
a = 1 - "a" // NaN (Not a Number)
a = NaN
/*
大整数（BigInt）
- 大整数用来表示一些比较大的整数
- 大整数使用n结尾，它可以表示的数字范围是无限大
*/
a = 99999999999999999999999999999999999999999999999999n
/*
其他进制的数字：
二进制 0b
八进制 0o
十六进制 0x
*/
a = 0b1010
a = 0o10
a = 0xff
console.log(a)
</script>
类型检查
<script>
let a = 10
let b = 10n
// console.log(a)
// console.log(b)
/*
typeof 运算符
- typeof用来检查不同的值的类型
- 它会根据不同的值返回不同的结果
*/
console.log(typeof a) // "number"
console.log(typeof b) // "bigint"
</script>
字符串
<script>
/*
字符串（String）
- 在JS中使用单引号或双引号来表示字符串
- 转义字符 \
\" --> "
\' --> '
\\ --> \\
\t --> 制表符
\n --> 换行
- 模板字符串
- 使用反单引号` 来表示模板字符串
- 模板字符串中可以嵌入变量
- 使用typeof检查一个字符串时会返回 "string"
*/
let a = "Hello"
a = "你好"
a = '这是一个"字\\\\符串'
a = "呵呵\t哈哈哈"
a = "呵呵\n哈哈哈"
a = "今天天气真不错！"
a = `今天天气挺好的！`
let name = "猪八戒"
let str = `你好，${name}`
let b = 10
// console.log(`b = ${b}`)
let c = "5"
c = "hhh"
c = `aaa`
console.log(typeof c)
</script>
其他数据类型
<script>
/*
布尔值（Boolean）
- 布尔值主要用来进行逻辑判断
- 布尔值只有两个true 和 false
- 使用typeof检查一个布尔值时会返回 "boolean"
空值 （Null）
- 空值用来表示空对象
- 空值只有一个 null
- 使用typeof检查一个空值时会返回"object"
- 使用typeof无法检查空值
未定义（Undefined）
- 当声明一个变量而没有赋值时，它的值就是Undefined
- Undefined类型的值只有一个就是 undefined
- 使用typeof检查一个Undefined类型的值时，会返回 "undefined"
符号（Symbol）
- 用来创建一个唯一的标识
- 使用typeof检查符号时会返回 "symbol"
JS中原始值一共有七种
1.Number
2.BigInt
3.String
4.Boolean
5.Null
6.Undefined
7.Symbol
七种原始值是构成各种数据的基石
原始值在JS中是不可变类型，一旦创建就不能修改
*/
let bool = true // 真
bool = false // 假
let num = 1
let a = null
// console.log(typeof bool)
// console.log(typeof a)
// let b
console.log(typeof b)
let c = Symbol() // 调用Symbol()创建了一个符号
console.log(typeof c)
</script>
类型转换-字符串
<script>
/*
类型转换指将一种数据类型转换为其他类型
将其他类型转换为（字符串、数值和布尔值）
转换为字符串
1.调用toString()方法将其他类型转换为字符串
- 调用xxx的yyy方法
--> xxx.yyy()
- 由于null和undefined中没有toString()
所以对这两个东西调用toString()时会报错
2.调用String()函数将其他类型转换为字符串
- 调用xxx函数
--> xxx()
- 原理：
对于拥有toString()方法的值调用String()函数时，
实际上就是在调用toString()方法
对于null，则直接转换为"null"
对于undefined，直接转换为"undefined"
*/
let a = 10 // "10"
a = true // "true"
a = 11n // "11"
a = undefined
// console.log(typeof a, a)
// a = a.toString() // "10"
// console.log(typeof a, a)
let b = 33 // "33"
b = null // "null"
b = undefined // "undefined"
b = true
console.log(typeof b, b)
b = String(b)
console.log(typeof b, b)
</script>
类型转换-数值
<script>
/*
将其他的数据类型转换为数值
1.使用Number()函数来将其他类型转换为数值
转换的情况：
- 字符串：
- 如果字符串是一个合法的数字，则会自动转换为对应的数字
- 如果字符串不是合法数字，则转换为NaN
- 如果字符串是空串或纯空格的字符串，则转换为0
- 布尔值：
- true转换为1，false转换为0
- null 转换为 0
- undefined 转换为 NaN
专门用来将字符串转换为数值的两个方法
parseInt() —— 将一个字符串转换为一个整数
- 解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的整数
- 也可以使用parseInt()来对一个数字进行取整
parseFloat() —— 将一个字符串转换为浮点数
- 解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的小数
*/
let a = '123' // 123
a = 'abc' // NaN
a = '3.1415926' // 3.1415926
a = '11px' // NaN
a = '' // 0
a = ' ' // 0
a = true // 1
a = false // 0
a = null // 0
a = undefined // NaN
// console.log(typeof a, a)
a = Number(a)
// console.log(typeof a, a)
let b = '123px'
b = 'a123'
b = '123.45'
// b = 456.123
console.log(typeof b, b)
b = parseInt(b)
console.log(typeof b, b)
</script>
类型转换-布尔值
<script>
/*
1.使用Boolean()函数来将其他类型转换为布尔值
- 转换的情况：
数字：
- 0 和 NaN 转换为false
- 其余是true
字符串：
- 空串 转换为 false
- 其余是true
null和undefined 都转换为 false
对象：对象会转换为true
- 所有表示空性的没有的错误的值都会转换为false：
0、NaN、空串、null、undefined、false
*/
let a = 1 // true
a = -1 // true
a = 0 // false
a = NaN // false
a = Infinity // true
a = 'abc' // true
a = 'true' // true
a = 'false' // true
a = '' // false
a = " " // true
a = null
a = undefined
console.log(typeof a, a)
a = Boolean(a)
console.log(typeof a, a)
</script>
运算符
算数运算符
<script>
/*
运算符（操作符）
- 运算符可以用来对一个或多个操作数（值）进行运算
- 算术运算符：
+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
** 幂运算
% 模运算，两个数相除取余数
- 注意：
- 算术运算时，除了字符串的加法，
其他运算的操作数是非数值时，都会转换为数值然后再运算
*/
let a = 1 + 1
a = 10 - 5
a = 2 * 4
a = 10 / 5
a = 10 / 3
a = 10 / 0 // Infinity
a = 10 ** 4
a = 9 ** .5 // 开方
a = 10 % 2
a = 10 % 3
a = 10 % 4
/*
JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算
*/
a = 10 - '5' // 10 - 5
a = 10 + true // 10 + 1
a = 5 + null // 5 + 0
a = 6 - undefined // 6 - NaN
/*
当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，
然后再做拼串的操作
可以利用这一特点来完成类型转换
可以通过为任意类型 + 一个空串的形式来将其转换为字符串
其原理和String()函数相同，但使用起来更加简洁
*/
a = 'hello' + 'world'
a = '1' + 2 // "1" + "2"
a = true
a = a + ''
console.log(typeof a, a)
</script>
赋值运算符
<script>
/*
赋值运算符用来将一个值赋值给一个变量
=
- 将符号右侧的值赋值给左侧的变量
??=
- 空赋值
- 只有当变量的值为null或undefined时才会对变量进行赋值
+=
- a += n 等价于 a = a + n
-=
- a -= n 等价于 a = a - n
*=
- a *= n 等价于 a = a * n
/=
- a /= n 等价于 a = a / n
%=
- a %= n 等价于 a = a % n
**=
- a **= n 等价于 a = a ** n
*/
let a = 10
a = 5 // 将右边的值 赋值 给左边的变量
let b = a // 一个变量只有在=左边时才是变量，在=右边时它是值
a = 66
a = a + 11 // 大部分的运算符都不会改变变量的值，赋值运算符除外
a = 5
// a = a + 5 // 10
a += 5 // 在a原来值的基础上增加5
a = null
a ??= 101
console.log(a)
</script>
一元±
<script>
/*
一元的±
+ 正号
- 不会改变数值的符号
- 负号
- 可以对数值进行符号位取反
当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算
*/
let a = -10
a = -a
let b = '123'
b = +b // b = Number(b)
console.log(typeof b, b)
</script>
自增和自减
<script>
/*
++ 自增运算符
- ++ 使用后会使得原来的变量立刻增加1
- 自增分为前自增(++a)和后自增(a++)
- 无论是++a还是a++都会使原变量立刻增加1
- 不同的是++a和a++所返回的值不同
a++ 是自增前的值 旧值
++a 是自增后的值 新值
*/
let a = 10
// let b = a++
// console.log("a++ =", b)
let b = ++a
// console.log("++a =", b)
// console.log(a)
let n = 5
// 5 + 7 + 7
let result = n++ + ++n + n
// console.log(result)
/*
-- 自减运算符
- 使用后会使得原来的变量立刻减小1
- 自减分为前自减(--a)和后自减(a--)
- 无论是--a还是a--都会使原变量立刻减少1
- 不同的是--a和a--的值不同
--a 是新值
a-- 是旧值
*/
a = 5
// console.log('--a', --a)
console.log('a--', a--)
console.log(a)
</script>
逻辑运算符
<script>
/*
&& 逻辑与
- 可以对两个值进行与运算
- 当&&左右都为true时，则返回true，否则返回false
- 与运算是短路的与，如果第一个值为false，则不看第二个值
- 与运算是找false的，如果找到false则直接返回，没有false才会返回true
- 对于非布尔值进行与运算，它会转换为布尔值然后运算
但是最终会返回原值
- 如果第一个值为false，则直接返回第一个值
如果第一个值为true，则返回第二个值
|| 逻辑或
- 可以对两个值进行或运算
- 当||左右有true时，则返回true，否则返回false
- 或运算也是短路的或，如果第一个值为true，则不看第二个值
- 或运算是找true，如果找到true则直接返回，没有true才会返回false
- 对于非布尔值或运算，它会转换为布尔值然后运算
但是最终会返回原值
- 如果第一个值为true，则返回第一个
如果第一个值为false，则返回第二个
*/
let result = true && true // true
result = true && false // false
result = false && true // false
result = false && false // false
// true && alert(123) // 第一个值为true，alert会执行
false && alert(123) // 第一个值为false，alert不会执行
// true && true -> true
result = 1 && 2 // 2
// true && false -> false
result = 1 && 0 // 0
// false && false -> false
result = 0 && NaN // 0
result = true || false // true
result = false || true // true
result = true || true // true
result = false || false // false
// false || alert(123) // 第一个值为false，alert会执行
true || alert(123) // 第一个值为true，alert不会执行
result = 1 || 2 // 1
result = "hello" || NaN // "hello"
result = NaN || 1 // 1
result = NaN || null // null
console.log(result)
</script>
<script>
/*
! 逻辑非
- ! 可以用来对一个值进行非运算
- 它可以对一个布尔值进行取反操作
true --> false
false --> true
- 如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反
可以利用这个特点将其他类型转换为布尔值
- 类型转换
转换为字符串
显式转换
String()
隐式转换
+ ""
转换为数值
显式转换
Number()
隐式转换
+
转换为布尔值
显式转换
Boolean()
隐式转换
!!
&& 逻辑与
|| 逻辑或
*/
let a = true
a = !a
// console.log(a)
a = 123
a = !!a
console.log(typeof a, a)
</script>
关系运算符
<script>
/*
关系运算符
- 关系运算符用来检查两个值之间的关系是否成立
成立返回true，不成立返回false
>
- 用来检查左值是否大于右值
>=
- 用来检查左值是否大于或等于右值
<
- 用来检查左值是否小于右值
<=
- 用来检查左值是否小于或等于右值
注意：
当对非数值进行关系运算时，它会先将前转换为数值然后再比较
当关系运算符的两端是两个字符串，它不会将字符串转换为数值，
而是逐位的比较字符的Unicode编码
利用这个特点可以对字符串按照字母排序
注意比较两个字符串格式的数字时一定要进行类型转换
*/
let result = 10 > 5 // true
result = 5 > 5 // false
result = 5 >= 5 // true
result = 5 < "10" // true
result = "1" > false // true
result = "a" < "b" // true
result = "z" < "f" // false
result = "abc" < "b" // true
result = "12" < "2" // true
result = +"12" < "2" // false
// 检查num是否在5和10之间
let num = 4
// result = 5 < num < 10 // 错误的写法
result = num > 5 && num < 10
console.log(result)
</script>
相等运算符
<script>
/*
==
- 相等运算符，用来比较两个值是否相等
- 使用相等运算符比较两个不同类型的值时，
它会将其转换为相同的类型（通常转换为数值）然后再比较
类型转换后值相同也会返回true
- null和undefined进行相等比较时会返回true
- NaN不和任何值相等，包括它自身
===
- 全等运算符，用来比较两个值是否全等
- 它不会进行自动的类型转换，如果两个值的类型不同直接返回false
- null和undefined进行全等比较时会返回false
!=
- 不等，用来检查两个值是否不相等
- 会自动的进行类型转换
!==
- 不全等，比较两个值是否不全等
- 不和自动的类型转换
*/
let result = 1 == 1 // true
result = 1 == 2 // false
result = 1 == '1' // true
result = true == "1" // true
result = null == undefined // true
result = NaN == NaN // false
result = 1 === "1" // false
result = null === undefined // false
result = 1 != 1 // false
result = 1 != "1" // false
result = 1 !== "1" // true
console.log(result)
</script>
条件运算符
<script>
/*
条件运算符
条件表达式 ? 表达式1 : 表达式2
- 执行顺序：
条件运算符在执行时，会先对条件表达式进行求值判断，
如果结果为true，则执行表达式1
如果结果为false，则执行表达式2
*/
// false ? alert(1) : alert(2)
let a = 100
let b = 200
// a > b ? alert('a大！') : alert("b大！")
let max = a > b ? a : b
// alert(max)
</script>
运算符的优先级
<script>
/*
和数学一样，JS中的运算符也有优先级，比如先乘除和加减。
可以通过优先级的表格来查询运算符的优先级
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
- 在表格中位置越靠上的优先级越高，优先级越高越先执行，优先级一样自左向右执行
优先级我们不需要记忆，甚至表格都不需要看
因为()拥有最高的优先级，使用运算符时，如果遇到拿不准的，可以直接通过()来改变优先级即可
*/
let a = 1 + 2 * 3 // 7
a = (1 && 2) || 3
console.log(a)
</script>
85
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
