js的数据类型转换
1. 转换为数字类型
1. Number(数据)
可以用于任何数据类型, 将其转换为 数字类型
字符串转数字
如果转换的字符串是纯数字组成的, 那么直接转换为 数字
<script>
console.log(typeof(Number('100')), Number('100'))
//number 100 会将 '100' 转换为 数字, 然后打印到控制台
</script>
如果转换的字符串是 空字符串或者空白字符串, 那么直接转换为 数字0
<script>
console.log(typeof(Number('')), Number('')) // number 0
console.log(typeof(Number(' ')), Number(' ')) // number 0
</script>
其他类型的字符串(不是 空---空白---纯数字字符串) 会转换为 NaN
<script>
console.log(typeof(Number('abc')), Number('abc')) // number NaN
</script>
NaN: 表示的是一个 number 的数字, 但是没有办法通过常规的数字表明它, 所以只能使用 NaN 来代替(坏掉的数字)
布尔值转数字
true 转换为 1
<script>
console.log(typeof(Number(true)), Number(true)) // number 1
</script>
false 转换为 0
<script>
console.log(typeof(Number(false)), Number(false)) // number 0
</script>
undefined 转数字
会直接转换为 NaN
<script>
console.log(typeof(Number(undefined)), Number(undefined)) // number NaN
</script>
null 转数字
会直接转换为 0
<script>
console.log(typeof(Number(null)), Number(null)) // number 0
</script>
2. parseInt(数据) 转换为整数
会将数据转换为 number类型, 并且值是整数(直接忽略掉小数点以后的值, 并不是四舍五入)
<script>
console.log(typeof(parseInt('100.123456789')), parseInt('100.123456789')) // number 100
</script>
在转换的时候, 如果数据是纯数字字符串或者是数字开头的字符串, 那么会转换为数字, 否则就是转换为 NaN
<script>
console.log(typeof(parseInt('100abc')), parseInt('100abc')) // number 100
console.log(typeof(parseInt('abc666')), parseInt('abc666')) // number NaN
console.log(typeof(parseInt('abc')), parseInt('abc')) // number NaN
</script>
3. parseFloat(数据) 转换为小数
转换结果于 parseInt 类似, 但是在转换小数的时候会保留小数点后的数字
<script>
console.log(typeof(parseFloat('100.123456789')), parseFloat('100.123456789')) // number 100.123456789
<!-- !转数字类型的快捷方法 属性值 - 0 -->
如:var a = '100' - 0
</script>
2.转字符串类型
1. 变量.toString() 方法
注意: S 是大写的
<script>
//数字转
var str1 = 100
console.log(typeof(str1.toString()), str1.toString()) // string 100
// 布尔值转
var str2 = true
console.log(typeof(str2.toString()), str2.toString()) // string true
var str3 = false
console.log(typeof(str3.toString()), str3.toString()) // string false
<!-- !注意: undefined 类型 和 null 不能使用 toString 方法(因为 JS 没有给我们提供, 或者说 JS 不允许) -->
var str4 = undefined
console.log(typeof(str4.toString()), str4.toString()) // 这里会报错, 因为 undefined 不能使用 toString
var str5 = null
console.log(typeof(str5.toString()), str5.toString()) // 这里会报错, 因为 null 不能使用 toString
</script>
2. String(变量)
<script>
//数字转
var str1 = 100
console.log(typeof(String(str1)), String(str1)) // string 100
// 布尔值转
var str2 = true
console.log(typeof(String(str2)), String(str2)) // string true
var str3 = false
console.log(typeof(String(str3)), String(str3)) // string false
// undefined转
var str4 = undefined
console.log(typeof(String(str4)), String(str4)) // string undefined
// null转
var str5 = null
console.log(typeof(String(str5)), String(str5)) // string null
<!--!转字符串的简便方法属性值 + '' -->
如: var a = 100 + ''
</script>
3.转换为布尔类型
1. Boolean(变量)
将其他数据类型, 转换为 布尔值(也就是转换为 true 或者 false)
- 数字转换布尔值, 只有0会转换为 false 其他的数字都会转换为 true(非0即为真)
<script>
var num1 = 100
var num2 = 0
console.log(num1, '-->', Boolean(num1)) // 100 ---> true
console.log(num2, '-->', Boolean(num2)) // 0 ---> false
</script>
2. 字符串转换布尔值
只有 空字符串 会转换为 false ,其他的字符串都会转换为 true
<script>
var str1 = ''
var str2 = ' '
var str3 = 'abc'
var str4 = '0'
console.log(str1, '-->', Boolean(str1)) // '' ---> false
console.log(str2, '-->', Boolean(str2)) // ' ' ---> true
console.log(str3, '-->', Boolean(str3)) // 'abc' ---> true
console.log(str4, '-->', Boolean(str4)) // '0' ---> true
</script>
3.undefined 和 null 转换为 布尔值的时候 就是 false (重点, 以后会常用!!!)
<script>
var und = undefined
var nul = null
console.log(und, '-->', Boolean(und)) // undefined ---> false
console.log(nul, '-->', Boolean(nul)) // null ---> false
</script>
算术运算符
加 + 、减 -、 乘 *、 除 / 、取余(求余数)%
注意: + 运算符, 相加时如果两边都是数字, 那么会运算数字的相加操作
<script>
console.log(1 + 1) // 2
</script>
相加时如果两边有一个不是数字的, 比如出现一个字符串, 那么运行的不是在相加, 而是拼接操作
<script>
console.log(5 + '0') // 数字5 + 字符串0 --> 因为加号两边出现了一个非数字类型的字符串, 所以会运行两个值的拼接 ---> '50'
</script>
拼接操作只有 + 运算时会出现, 其他符号不出现
其他运算符在遇到两边有非数字类型时, 会将其转换为 数字(这一步就叫做隐式转换), 然后在运算
<script>
console.log(5 - '0')
/**
* - 两边出现了一个 字符串类型的 0, JS 会帮助我们将他的类型先转换为 数字 然后在运算减法
* 也就是会计算 数字5 - 数字0 ---> 5
// * / %同理
</script>
赋值运算符
= 赋值号
+= 相当于是 "我自身" 加上一个新值, 就可以用这个 += 来优化
例子: a = a + 10
优化后: a += 10
<script>
var a = 1 // a === 1
a = a + 10 与 a += 10 两者意思相同 // 将 变量 a 重新赋值为 变量a + 10 a = a + 10 ---> a = 1 + 10 ---> a = 11
console.log(a) // 11
</script>
-= 、 *= 、 /= 、 %= 运算逻辑与 += 是完全相同的
比较运算符
比较运算符两边的值之后, 返回一个 布尔值, 也就是返回一个true或者false 判断 大于 > 、 小于<、 大于等于 >= 、 小于等于 <=
等于: ==(只比较数据),===(数据类型与数据都会比较)
注意:== 在JS中判断时会做隐式转换, 也就是说 只会对比值是否相等, 不会对比数据类型
<script>
console.log(1 == '1') // 判断符号两边的值是否相等(不会对比数据类型) true
</script>
=== 在 JS 中也叫做全等, 在判断的时候不会做隐式转换, 也就是说, 在对比时除了会对比值是否相等, 还会判断数据类型
<script>
console.log(1 === '1') // 判断符号两边的值是否相等(这里会对比数据类型) false 因为数据类型不同!
</script>
不等于:
!=(只比较数据)
!==(数据类型与数据都会比较)
共同点:
判断符号两边的值是否不相等, 不相等时返回 true 相等时返回 false
不同点
!= 不会对比数据类型!== 会对比数据类型
!=的情况
<script>
console.log(3 != '3') // 判断符号两边是否不相等 且不会对比数据类型, 所以他认为 3和'3' 是相等的 所以会返回 false
</script>
!==的情况
<script>
console.log(3 !== '3') // 判断符号两边是否不相等 且会对比数据类型!!!, 所以他认为 3 和 '3' 是不相等的 所以会返回 true
</script>
逻辑运算符
&& 逻辑与(相当于并且的意思)
逻辑与运算符的特性!!! 符号左边的值 如果为真(也就是转为布尔值后为true), 那么会返回 符号右边的值 如果为 假(也就是转为布尔值后为 false), 那么会将自身返回出去
<script>
console.log(1 && 100) // 根据 逻辑与运算符的特性, 返回的是 100
console.log(0 && 99) // 根据 逻辑与运算符的特性, 返回的是 0
console.log(true && 'qwer') // qwer
console.log(false && 'qwer') // false
</script>
|| 逻辑或(相当于或者的意思)
逻辑或运算符的特性!!! 符号左边的值 如果为真(也就是转为布尔值后为true), 那么会将自身返回出去 如果为假, 那么会将符号右侧的值返回出去
<script>
console.log(1 || 100) // 根据 逻辑或的特性, 返回的是 1
console.log(0 || 99) // 根据 逻辑或的特性, 返回的是 99
</script>
! 逻辑非(取反, 反义词)
逻辑非运算符的特性!!!
语法: !值
返回值: 将值转换为布尔值之后, 做一个取反的操作, 也就是 true 改变false, false改变为 true
<script>
console.log(!99) // !99 ---> !true ---> false
console.log(!0) // !0 ---> !false ---> true
</script>
自增自减运算符
++ 、 --
语法:(自增自减都是相同的语法, 这里就拿 自增为例)
- ++值
- 值++
自增运算符的能力就是将自身的值 +1
自减运算符的能力就是将自身的值 -1
自增自减运算符 写法不同, 运行结果也不同
- ++值(++在前) 如果 ++ 在前, 那么会先将自身的值 +1 然后参与其他的
<script>
console.log(++a) // 如果 ++ 在前, 那么会先将自身的值 +1 然后打印到控制台, 所以打印的值为 2
<!--! --时同理 -->
</script>
- 值++(++在后) 如果 ++ 在后, 那么会先参与周围的运算, 然后将自身的值 +1 自减运算符在前与在后的作用与 自增运算符完全相同, 只不过是 -1
<script>
console.log(b++)
/**
* 如果 ++ 在后, 那么会先将目前的值打印到控制台(也就是 1), 然后将自身的值 +1
* 也就是说这行运行完毕后, 变量b的值变为 2了
*/
<!--! --时同理 -->
</script>
if 分支语句
语法:
if (条件) {满足条件的时候执行的代码, 如果不满足, 这里边的代码永远不执行} 条件最终会返回一个布尔值, 如果为真, 那么会执行对应的代码 如果为假, 那么不会执行
<script>
// if 分支语句的基本写法
if (条件) {要执行的代码}
// if...else... 的嵌套写法
var a = 2
if (a === 1) {
console.log(1)
} else if (a === 2) {
console.log(2)
} else {
console.log('a 不等于 1或者2')
}
</script>
运行流程:
首先判断 a 是否等于 1, 如果满足条件, 直接打印1 ,并结束个分支
如果不满足, 会进入下一个分支的判断, 判断a 是否等于 2, 果满足条件, 直接打印 2, 并结束这个分支
最后结尾的 else 分支 只会在 前边所有的条件都不满足的候 才会执行, 前边如果有一个条件成立, 那么 else 就不会执行
