day03 数据类型和运算符
js的数据类型有6大数据类型
5种基本数据类型
number 数值类型
string 字符串类型
boolean 布尔类型 true和false
undefined 未定义
null 空对象
1种特殊数据类型(复杂数据类型 引用数据类型 对象数据类型)
array 数组 []
object 对象 {}
function 函数 funtion(){}
1.number类型
-
number数值类型：整数、小数、负数、16进制、8进制、NaN
<script> //number数值类型：整数、小数、负数、16进制、8进制、NaN // 1.整数 var a = 10; console.log(typeof (a));//number // 2.小数 var b = 3.1415926; console.log(typeof (b));//number var d = .5; console.log(d, typeof (d));//0.5 number var e = 5.0; console.log(e);//5 // 3.负数 var c = -10; console.log(typeof (c));//number // 4.NaN not a number 不是一个数 当运算没有结果的时候就是NaN var x = NaN; console.log(typeof (x));//number var y = 10 / "你好"; console.log(y);//NaN // 注意：任何两个NaN都不相等 == 判断左右两侧是否相等 console.log(NaN == NaN);//false //------------------------了解------------------- // 浏览器是显示10进制的数据 如果定义的8进制或者16进制 计算机会自动转成10进制 //5.8进制数：以0开头 范围在0-7之间 var x1 = 077; console.log(x1);//63 var x2 = 0566; console.log(x2); // 6.16进制数据：以0x开头 范围在0-9 a-10 b-11 c-12 d-13 e-14 f-15 var x3 = 0xff; console.log(x3);//255 // 7.精度缺失 0.1+0.2 == 0.3 // 计算机在运算的时候，会把数转换二进制数据然后再进行计算 计算结果再转成10进制 转换过程中会造成精度缺少 console.log(0.1 + 0.2 == 0.3);//false 只要不把小数点计算当成判断条件 是不会影响代码执行的 </script>
-
==NaN not a number 不是一个数 当运算没有结果的时候就是NaN==
// 4.NaN not a number 不是一个数 当运算没有结果的时候就是NaN var x = NaN; console.log(typeof (x));//number var y = 10 / "你好"; console.log(y);//NaN // 注意：任何两个NaN都不相等 == 判断左右两侧是否相等 console.log(NaN == NaN);//false
2.string类型
-
string字符串类型：引号( " " ' ')引起来的都是字符串 所有从页面获取的内容都是字符串数据类型
-
字符串.length：获取字符串的长度
-
字符串[下标]：.获取字符串中某个字符
-
字符串.charAt(下标)：获取字符串某个字符
-
<script>
// string类型 引号( " " ' ')引起来的都是字符串 所有从页面获取的内容都是字符串数据类型
var str1 = '文字';
var str2 = "文字1234";
console.log(typeof str1);//string
console.log(typeof str2);//string
// 1.获取字符串的长度 字符串.length
console.log(str1.length);//2
console.log(str2.length);//6
// 2.获取字符串中某个字符 字符串[下标] 从左往右开始下标从0开始 取对应下标位置的字符
console.log(str1[1]);//字
console.log(str2[4]);//3
// 3.获取字符串某个字符 字符串.charAt(下标) 获取对应下标位置的字符
console.log(str1.charAt(0));//文
console.log(str2.charAt(5));//4
// 4.字符串遇到+ 拼接
console.log(1 + 1);//2
console.log("1" + 1);//"11"
console.log(1 + 2 + "1");//"31"
</script>
3.boolean类型
-
boolean布尔类型 true和false
<script>
var b1 = true;
var b2 = false;
console.log(typeof b1, typeof b2);//boolean boolean
//作用：用作判断条件
if (false) {//如果判断条件为true 执行{}中的代码
console.log("真")；
}
</script>
4.undefined和null类型
-
undefined 未定义 null 空对象
<script>
/*
undefined
未定义 你去快递站拿快递 但快递站没有你的包裹
null
空对象 你去快递站拿快递 快递员给了一个包裹 但是这个包裹是空的
*/
var odiv = document.getElementsByTagName("div")[0];
console.log(odiv);//undefined
/*
undefined 和null的区别？
undefined 未定义 声明变量没有赋值 没有存储空间
null 空对象 有存储空间
*/
</script>
-
面试题 undefined和null的区别
undefined 未定义 声明变量没有赋值 没有存储空间 null 空对象 有存储空间
5.数据类型的转换
-
将一种数据类型转成另一种数据类型
-
强制转换(程序员通过某些方法实现转换)
-
隐式转换(计算机自动转换为其他数据类型)
-
5.1强制转换成number类型
-
Number() parseInt() parseFloat()
5.1.1Number强制转换
-
Number(要转换的数据):将数据转换为Number类型 如果转换不了则是返回NaN
<script> /* Number(要转换的数据):将数据转换为Number类型 如果转换不了则是返回NaN */ var n1 = 10; var n2 = false; var n3 = "10"; var x = "10px"; var y = ""; var n4 = undefined; var n5 = null; console.log(Number(n1));//10 console.log(Number(n2));//true-1 false-0 console.log(Number(n3));//10 console.log(Number(x));//NaN console.log(Number(y));//" "-0 ""-0 console.log(Number(n4));//NaN console.log(Number(n5));//0
==总结：Number方法可以转换的：string类型(纯数字、""-0 " "-0)、boolean类型(true-1,false-0)、null(0) 其他都是NaN==
5.1.2parseInt转换
-
parseInt(要转换的数据):将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换则是NaN，结果取整(舍弃小数)
<script>
/*
parseInt(要转换的数据):针对string类型转换
将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换则是NaN，结果取整(舍弃小数)
*/
console.log(parseInt("10"));//10
console.log(parseInt("10px"));//10
console.log(parseInt("10.5px"));//10
console.log(parseInt("10.9px"));//10
console.log(parseInt("px10.9px"));//NaN
</script>
5.1.3parseFloat转换
-
parseFloat(要转换的数据)：将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始不能转换则是NaN，结果保留小数
<script>
/*
parseFloat(要转换的数据)：将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始不能转换则是NaN，结果保留小数
*/
console.log(parseFloat("10"));//10
console.log(parseFloat("10.5px"));//10.5
console.log(parseFloat("px10.5px"));//NaN
console.log(parseFloat("10.5"));//10.5
</script>
5.2强制转换为boolean类型
-
Boolean(要转换的数据)：将数据类型强制转换为boolean类型 结果为true或者是false
<script>
// number类型:非0即真 NaN也是false
console.log(Boolean(1));//true
console.log(Boolean(-10));//true
console.log(Boolean(3.14));//true
console.log(Boolean(0x7788));//true
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
// string类型:有值即为真
console.log(Boolean("10"));//true
console.log(Boolean("098766*****"));//true
console.log(Boolean(" "));//true
console.log(Boolean(""));//false
// null undefined
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
/*
总结:Boolean结果为false的有：0 NaN null undefined ""
*/
</script>
==总结:Boolean结果为false的有：0 NaN null undefined ""==
5.3强制转换为string类型
-
String() 要转换的数据.toString()
5.3.1 String强制转换
-
String(要转换的数据)：将数据转换string类型，直接是在数据外面加引号
<script>
console.log(String(1));//"1"
console.log(String(NaN));//"NaN"
console.log(String(null));//"null"
console.log(String(undefined));//"null"
console.log(String(true));//"true"
</script>
5.3.2 toString强制转换
-
要转换的数据.toString: 强制转换为string类型
<script>
/*
1.要转换的数据.toString
强制转换为string类型
*/
var n = 1;
console.log(n, n.toString());//"1"
var b = true;
console.log(b.toString());//"true"
// null和undefined没有toString这个方法的
var x = undefined;
console.log(x.toString());//报错
</script>
5.4其他小方法
-
toFixed(n):保留n位小数
<script>
// 1.toFixed(n):保留n位小数
var n = 3.1415926;
console.log(n.toFixed(4));//3.1416
var n1 = 0.1 * 0.7;
console.log(n1, n1.toFixed(2));
</script>
-
isNaN：is not a number 是不是 不是一个数字 false是数字 true不是一个数字
// 2.isNaN is not a number 是不是 不是一个数字 false是数字 true不是一个数字
console.log(isNaN(3));//false
console.log(isNaN("文字"));//true
// isNaN 判断之前会先调用Number方法进行强制转换 再来进行判断 Number(true)
console.log(isNaN(true));//false
console.log(isNaN(""));//false
6.运算符和表达式
-
运算符：连接一个以上的操作符中间的符号
-
表达式：由操作数和运算符组成的式子
10 + 20 var a = 10 +运算符 10 20操作数 表达式 10 + 20
-
运算符的分类
-
算术运算符 + - * / %(取余 取模) ++ --
-
赋值运算符 = += -= *= /= %=
-
逻辑运算符
-
比较运算符
-
三目运算符
-
-
表达式的分类：算术表达式 赋值表达式 逻辑表达式 比较表达式 三目表达式
6.1算术运算符
-
算术运算符 + - * / %(取余 取模) ++ --
<script>
// 算术运算符 + - * / %(取余 取模) ++ --
console.log(10 + 2);//12
console.log(10 - 2);//8
console.log(10 * 2);//20
console.log(10 / 2);//5
console.log(10 % 2);//0
console.log(11 % 2);//1
// 特殊情况
//1.精度缺少
console.log(0.1 + 0.2);
console.log(0.1 * 0.7);
// 2.隐式转换：在运算过程中 数据自动进行转换
// 隐式转换的规律 都会转成number类型再进行计算
console.log(100 * false);//0
console.log("100" - 10);//90
console.log(10 + null);// 10
//字符串拼接+ 会拼接
console.log("10" + 10); "1010"
</script>
-
自增++和自减--
-
基础用法
// ++ 自增 自加1 i++ ++i 都是自加1 // 1.基础用法 var a = 10; a++;//a = a+1 console.log(a);//11 ++a;//a = a+1 console.log(a);//12-
参与运算
// 2.参与运算 // ++在前：先自加1，后运算(打印) // ++在后 先运算(打印)，后自加1 var n = 10; var m = ++n;// m = 11 n = 11 console.log(m, n);// 11 11 var x = 10; var y = x++;// y = 10 x = 11 console.log(x, y);// 11 10 //练习1： var s = 10; var t = 10; console.log(s++, ++t);//10 11 s=11 t=11 console.log(s, t);//11 11 //练习2： var a = 10; var b = ++a + a++ + a++;// b = 11 + 11 + 12 = 34 a = 13 var c = a++ + ++b + b++;// c = 13 + 35 + 35 = 83 b = 36 a = 14 console.log(a, b, c);// 14 36 83 //练习3： var x = 10; var y = --x + x-- + --x; //y =9 + 9 + 7 = 25 x = 7 var z = y-- + --y + x--; //z = 25+23+7 =55 y = 23 x=6 console.log(x, y, z); // 6 23 55 -
6.2赋值运算符
-
赋值运算符 = += -= *= /= %=
<script>
// 赋值运算符 = += -= *= /= %=
var a = 10;
a += 2;//a = a+2
console.log(a);//12
a -= 10;
console.log(a);//2
a *= 100;//a = a*100
console.log(a);//200
a /= 2;
console.log(a);//100
a %= 3;//a = a%3
console.log(a);//1
</script>
7.面试题
null和undefined的区别 Number()的作用？ NaN什么意思？什么时候会出现NaN?
1800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
