数据类型比较
1.1-null与undefined比较
-
- undefined与null的区别,两个都表示什么都没有
null == undefined
:成立,他们的值都是空null === undefined
:不成立,他们的值相等但是数据类型不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>null与undefined比较</title>
</head>
<body></body>
<script>
/*JS总共有六种数据类型,其中五种基本数据类型,一种复杂数据类型
*(1)null与undefined有什么区别
* null == undefined 成立
* null === undefined 不成立
*/
//1.null与undefined的区别:需要记忆
console.log(null == undefined); //true 他们的值都是空
console.log(null === undefined); //false 他们的值相等 但是数据类型不同
</script>
</html>
1.2-NaN与isNaN
-
1.NaN:Not a Number 不是一个数字
- (1)NaN是number数据类型中一个特殊的数值,是数学计算错误得到的一个结果
- 例如:
'张三' - 100
,在数学上这是一种错误的计算,它的结果就是NaN
- 例如:
- (2)NaN与任何数字都不等,包含它本身
- (3)NaN与任何数字计算得到的都是NaN
- (1)NaN是number数据类型中一个特殊的数值,是数学计算错误得到的一个结果
-
2.isNaN(数据):检测一个数据是不是NaN 得到的结果是布尔类型
- 例如:
isNaN(NaN)
,结果为true - 例如:
isNaN(123)
,结果为false,表示123不是NaN
- 例如:
-
3.了解:number类型浮点数(小数)精度丢失问题
- (1)小数在进行数学计算时,会有一定的误差,这是计算机本身的bug,不仅是js语言,其他语言也有这个问题
- (2)解决方案:不要让两个小数比较大小,这种情况一般不会影响正常开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
/*NaN: not a number 不是一个数字
* 1.NaN是number数据类型中一个特殊的数值,是数学计算错误得到的一个结果
* 2.NaN与任何数字都不相等,包括它的本身
* 3.NaN与任何数字计算得到的都是NaN
isNaN(数据):判断一个数据是不是NaN,结果为布尔类型 true:是 false:不是
*/
//1.NaN:not a number 不是一个数字
//NaN是number数据类型中一个特殊的数值,是数学计算错误得到的一个结果
let num = "张三" - 100; //当某个表达式无法计算(计算错误时),会得到NaN
console.log(num); //NaN
console.log(typeof NaN); //number
//2.NaN与任何数字都不等,包含它本身
console.log(NaN == 0); //false
console.log(NaN == NaN); //false
//3.NaN与任何数字计算得到的都是NaN
console.log(NaN + 100); //NaN
//4.isNaN(数据):检测一个数据是不是NaN 得到的结果是布尔类型
console.log(isNaN(NaN)); //true
console.log(isNaN(123)); //false
//如果检测的数据不是number类型,js编译器会尝试着将这个数据转化为number类型,然后再判断
//这种数据类型转换称为隐式转换
console.log(isNaN("abc")); //true
//5.(了解即可)number浮点数(小数)精度丢失
//小数在进行数学计算时,会有一定的误差,这是计算机本身的bug,不仅是js语言,其他语言也有这个问题
//解决方案:不要让两个小数比较大小,这种情况一般不会影响正常开发
console.log(0.1 + 0.2); //0.300000000000004
console.log(0.1 + 0.2 == 0.3); //false
console.log(0.4 + 0.5); //0.9
console.log(1.1 - 0.2); //0.9000000000000001
</script>
</html>
1.3-字符串比较
- 1.字符串比较规则是按照字母的顺序挨个进行比较,与字符串长度无关
- 2.字符串比较区分大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字符串比较</title>
</head>
<body></body>
<script>
/*
1.字符串比较规则,按照字母的顺序,挨个比较
2.字符串的比较与长度无关
3.字符串的比较区分大小写
*/
// 字符串的比较是挨个比较对应顺序位置的字母,与长度无关
console.log("abc" > "b"); // false,a比d小,所以abc比d小
// 字符串的比较区分大小写,小写大于大写(与ASCII码表对应)
console.log("a" > "A"); // true,a对应ASCII码表为97,A为65
</script>
</html>
数据类型转换
1.1-显式数据类型转换
- 注意:数据类型的转变并不会改变原来变量的值,而是会产生一个新的值
- 例如:
(1) let num = '10';
parseInt(num)
:
- 例如:
- 为什么要有数据类型转换?
- 有时候想要进行某种计算的时候,由于数据类型不同往往会产生一些错误的结果,为了避免这种结果,我们需要将某种数据类型转化为其他数据类型
- 例如:prompt()输入框得到的数据的类型是string,如果想要进行数学计算则需要转成number类型,否则会计算出错
- 有时候想要进行某种计算的时候,由于数据类型不同往往会产生一些错误的结果,为了避免这种结果,我们需要将某种数据类型转化为其他数据类型
- 什么是显示类型转换:程序员主动转换(可以理解为使用关键字来转换)
- 这种方式代码易读性更高
1-其他类型转换成number类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>其他类型转换成number类型</title>
</head>
<body></body>
<script>
/**转换成number
* 第一种方式:`parseInt()`
* * 作用:转换整数
* * 从左往右解析,遇到非数字结束(停止解析),将解析好的整数返回
* * 如果第一个字符不是数字或者符号就返回NaN
* 第二种方式:`parseFloat()`
* * 作用:转换小数
* * 与parseInt()最大的区别就是可以解析字符串的第一个小数点
* 第三种方式: `Number()`
* 作用:布尔类型转换成数字
* * 可以把任意值转换成数值,如果要转换的字符串只要有一个不是数字,返回NaN
*/
console.log(Number("123")); //123
console.log(Number("123.1.1abc")); //NaN 只要有一个字符不是数字,得到就是NaN
console.log(parseInt("123.1.1abc")); //123 从左往右解析,遇到非数字结束
console.log(parseFloat("123.1.1abc")); //123.1 与parseInt唯一的区别就是可以识别第一个小数点
//一般数字字符串使用parseInt和parseFloat,其他数据类型转数字使用Number()
console.log(Number(true)); //1布尔类型转换number会得到数字0(false)和1(true)
console.log(Number("")); //0 空字符串转number会得到0
//js基础面试题可能会遇到
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0
</script>
</html>
2-其他类型转换成string类型
-
1.第一种方式:
变量名.toString()
- 如果变量的值为undefined或者null,则会报错
-
2.第二种方式:
String(变量名)
- 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错,会得到undefined或者null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>其他类型转换成string类型</title>
</head>
<body></body>
<script>
/**转换成字符串string
* 第一种方式:`变量名.toString()`
* * 如果变量的值为undefined或者null,则会报错
* 第二种方式:`String(变量名)`
* * 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错,会得到undefined或者null
*/
let a = null;
//1.常用: String ( )
//特点:可以识别undefined与null
console.log(String(null));
console.log(typeof String(a));
// //2. 变量名.toString ()
//特点:无法识别undefined与null,程序会报错
console.log(a.toString());
</script>
</html>
3-其他类型转换成boolean类型
- 只有一种方式:
Boolean(变量名)
- 官网文档中有八种情况得到的false:`0、-0、null、false、NaN、undefined、或者空字符串("")、 document.all
- 其他一切均为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>其他类型转换成boolean类型</title>
</head>
<body></body>
<script>
/**转换成boolean
* 只有一种方式: `Boolean(变量名)`
* * 以下八种情况会得到false,其余的一切数据得到都是true
* * 数字0、-0、null、false、undefined、空字符串”“、NaN
*/
console.log(Boolean(0)); //false
console.log(Boolean(-0)); //false
console.log(Boolean(null)); //false
console.log(Boolean(false)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean("")); //false
console.log(Boolean(NaN)); //false
</script>
</html>
1.2-隐式数据类型转换
显式转换:程序员主动调用语法去转换数据类型,语义更加明确
隐式转换:运算符两边数据类型不一致,编译器自动帮我们转换一致在计算,这是js的语法特点
- 隐式转换
- 1.转成string类型:+号两边如果有一边是字符串,则会把另一边转换成字符串,然后进行拼接
- 2.转成number类型:以下几种运算符会将任何数据转换成number类型再运算,如果无法转换则为NaN
- 数学正号 : +num
- 当
+/-
号写在一个变量名的前面,此时表示数学的正/负数
- 当
- 自增自减(++ --)
- 算术运算符(+ - * / %)
- 比较运算符(> < >= <= == != === !==)
- 说明:全等与不全等会先比较值(此时会隐式转换再比较),然后再比较数据类型
- 数学正号 : +num
- 3.转成boolean类型:逻辑非(!)会将任何数据转为boolean类型再运算
- 4.+号有三种含义:数学正负号(转成number)、算术运算符(转成number)、字符串连接符(转成string)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>隐式数据类型转换</title>
</head>
<body>
<script>
/*
1. 显式转换 : 程序员主动使用语法来转换(阅读性最高)
2. 隐式转换 : 如果运算符两边数据类型不一致,编译器偷偷的帮我们转成一致再计算。
(1)其他数据类型转number :
数学正号 : +num
自增自减: ++ --
算术运算符: + - * / %
关系运算符 : > < >= <=
(2)其他数据类型转string : +
(3)其他数据类型转boolean : !
*/
console.log("100" - 1); // Number('100') - 1 = 100 - 1 = 99
//1.其他数据类型转number :
// 数学正号 : +num
// 自增自减: ++ --
// 算术运算符: + - * / %
console.log(+"10"); // Number('10')
console.log("张三" - 100); // Number('张三') - 100 = NaN - 100 = NaN
console.log(10 - "1"); // 10 - Number('1') = 10 - 1 = 9
//2. 其他数据类型转string : +
console.log("1" + 1); //'1' + String(1) = '1' + '1' = '11'
/*
🔔容易混淆点 : 把算术运算符 + 转换规则 与 连接符 + 转换规则搞混淆
*/
console.log("1" + true); //1true 连接符 ‘1’ + String(true) = '1' + 'true' = '1true'
console.log(1 + true); //2 算术运算符 1 + Number(true) = 1 + 1 = 2
console.log(1 + undefined); //NaN 算术 1 + Number(undefined) = 1 + NaN = NaN
console.log(1 + null); //1 算术 1 + Number(null) = 1+ 0 = 1
console.log("1" + null); //1null 连接 '1' + String(null) = '1' + 'null' = '1null'
//其他数据类型转boolean : !
//取反 : true变false false变true
console.log(!1); //(1)!Boolean(1) = !true = false
console.log(!!""); //(1)!!Boolean('') (2)!!false (3)!true = false
</script>
</body>
</html>