1.数据类型转换
-
数据类型转换分为两种
-
显式转换(强制转换):通过js的方法,转换成自己想要的数据类型
-
隐式转换:在js进行某些运算的时候 自动完成转换数据类型
-
1.1 强制转换
1.1.1 强制转换为number
-
Number(要转换的数据)
-
作用:将数据转换成number类型,如果转换不了则是返回NaN
-
<script> // Number类型转换 // 1.number类型 var n1 = 10; console.log( Number(n1) );//10 // 2.string类型转换 var n2 = "10"; console.log( Number(n2));//10 var n3 = "10px"; console.log(Number(n3));//NaN var n4 = "px10abc"; console.log(Number(n4));//NaN var n5 = ""; console.log(Number(n5));//0 // 3.boolean类型 var n6 = true; console.log(Number(n6));//true----1 var n7 = false; console.log(Number(n7));//false----0 // 4.undefined var n8 = undefined; console.log(Number(n8));//NaN // 5.null var n9 = null; console.log(Number(n9));//0 // 总结:Number可以转换的有:string类型(纯数字,""-0 " "-0) boolean(true-1 false-0) null(0) </script>
-
parseInt(要转换的数据)
-
==主要是针对字符串数据操作==
-
作用:将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 并且取整(舍弃小数)
-
var n1 = "10.5"; console.log(parseInt(n1));//10 var n2 = "10.5px"; console.log(parseInt(n2));//10 var n3 = "px10.5"; console.log(parseInt(n3));//NaN var n4 = "11px123"; console.log(parseInt(n4));//11 var n5 = undefined; console.log(parseInt(n5));
-
parseFloat(要转换的数据)
-
==主要针对字符串数据操作==
-
作用:将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 保留小数
-
<script> // parseFloat: 将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 保留小数 var n1 = "10.8"; console.log(parseFloat(n1));//10.8 var n2 = "10.8px"; console.log(parseFloat(n2));//10.8 var n3 = "px10.8"; console.log(parseFloat(n3));//NaN var n4 = "11.8px1234"; console.log(parseFloat(n4));//11.8 var n5 = undefined; console.log(parseFloat(n5));//NaN </script>
1.1.2 强制转换为string
-
String(要转换的数据)
-
作用:将数据强制转换为string类型 直接在数据外面加""
-
<script> // String():将数据强制转换为string类型 直接在数据外面加"" var s1 = 10; console.log(String(s1));// "10" var s2 = null; console.log(String(s2));// "null" var s3 = undefined; console.log(String(s3)); //"undefined" var s4 = true; console.log(String(s4));// "true" </script>
-
要转换的数据.toString(num)
-
num表示转换num进制的字符串 不写默认是10进制
-
<script> // toString var n1 = 10; console.log(n1.toString());//"10" var n2 = true; console.log(n2.toString());// "true" // undefined没有tostring方法 var n3 = undefined // console.log(n3.toString());//报错 var n4 = null // null 没有tostring方法 console.log(n4.toString());// </script>
1.1.3 强制转换为Boolean
-
Boolean() : 强制转换为Boolean类型 结果为true,false
<script> // Boolean(要转换的数据) 将数据转换boolean类型 转换结果只有两种true和false // 1.number类型转换 非0即真(只要不是0 都是true) var b1 = 1; console.log(Boolean(b1));//true var b2 = 0; console.log(Boolean(b2));//false // 2.string类型转换 有值即为真 var b3 = "中文wertyuewrty"; console.log(Boolean(b3));//true var b4 = ""; console.log(Boolean(b4));//false //3.undefined var b5 = undefined; console.log(Boolean(b5));//false // 4.null var b6 = null; console.log(Boolean(b6));//false // 5.NaN var n7 = NaN; console.log(Boolean(n7)); //总结:Boolean结果为false的有:0 null undefined "" NaN </script>
1.2 小方法
1.2.1 toFixed
-
要保留的数据.toFixed(n) 保留n位小数
<script> // toFixed(n) 保留n位小数 给number类型用的 var n1 = 3.1415926; console.log(n1.toFixed(3)); var n2 = "3.1415926"; console.log(n2.toFixed(2));//报错 </script>
1.2.1 isNaN
-
isNaN(检测的数据): 检测数据是不是 不是一个数
-
==判断之前会先用Number方法强制转换 再进行判断==
// isNaN 检测数据是不是 不是一个数 // 判断之前会先用Number方法强制转换 再进行判断 var n3 = 10; console.log(isNaN(n3));//n1不是一个数 false var n4 = "123"; // 先用Number方法转成 123 console.log(isNaN(n4));//123不是一个数 false var n5 = "123你好";//Number类型转换是NaN console.log(isNaN(n5));//true
2.运算符与表达式
2.1 运算符和表达式的概念
10 + 20 表达式 10 20 称为操作数 + 运算符
-
运算符: 连接一个以上的操作数中间的符号叫做运算符
算术运算符 + - * / % ++ -- 赋值运算符 = += -= /= %= 逻辑运算符 && || ! 三目运算符 条件 ? true执行的结果 : false执行的结果 比较运算符 > < >= <= == != ===
-
表达式:由操作数和运算符组成的式子就叫表达式
算术表达式 操作数和算术运算符组成 赋值表达式 操作数和赋值运算符组成 逻辑表达式 操作数和逻辑表达式组成 三目表达式 操作数和三目表达式组成 比较表达式 操作数和比较运算符组成
2.2 算术运算符
算术运算符: + - * /取余 % ++ --
<script> // 算术运算符 var a = 10 + 4 console.log(a);//14 var b = 10-4; console.log(b);//6 console.log(10*4);//40 console.log(10/4);//2.5 console.log(11%4);//3 取余 console.log(12%4);//0 // 1.求n的倍数 var n = 9; console.log(100%n == 0);//true 是9的倍数 false 不是9的倍数 // 2.判断当前这个数是不是偶数 都是2的倍数 console.log(11%2==0)//true 偶数 false 奇数 // 3.精度缺失 在运算过程中 是先转换成二进制进行计算 在转换过程中会造成精度缺失 console.log(0.1+0.2);//0.30000000000000004 console.log(0.7+0.1);//0.7999999999999999 console.log(0.1*0.7);//0.06999999999999999 // 4.隐式转换 在运算过程中 数据自动进行数据类型的转换 // 隐式转换的规律:都会转换number类型进行运算 console.log(100 * false);//0 console.log(100 * "123");//12300 console.log(100 * "123px");//NaN console.log(100 / true);//100 console.log(100+null); //100 console.log("100"- 10);//90 // 特殊:+ 字符串遇到+会拼接 除了字符串数据,其他的还是会隐式转换 console.log(100 + "123");// "100123" console.log(100+true);// 101 </script>
-
自加/自减 ++ --
<script> // 自加++ i++ 自加1 i = i+1 // 1.基础用法 var a = 10; a++;//a = a+1 console.log(a);//11 var b = 10; ++b;//b = b+1; console.log(b);//11 // 2.++和-- 参与运算 /* ++在前 先自加1 然后再运算(打印) ++在后 先运算(打印) 再自加1 */ var x = 10; var y = x++;// y=10 x=11 console.log(x, y);//11 10 var n1 = 10; var n2 = ++n1;// n2=11 n1=11 console.log(n1, n2);// 11 11 //练习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 /* --在前 先自减1 然后再运算(打印) --在后 先运算(打印) 再自减1 */ 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 x=6 y=23 console.log(x, y, z);// 6 23 55 </script>
2.3 赋值运算符
= += -= *= /= %=
<script> //赋值运算符 = += -= *= /= %= var a = 10; console.log(a);//10 var b = 10; b+=10;// b = b+10 console.log(b);//20 var c = 10; c-=5; console.log(c);//5 var d = 20; d*=10; console.log(d);//200 var e = 20; e/=5; console.log(e);//4 var f = 101; f%=10; console.log(f);//1 </script>
2.4 比较运算符
> >= < <= != == ===
<script> /* 比较运算符 > >= < <= != == === */ // 1.基础判断 console.log(10 > 20);//false console.log(10 > 10);//false console.log(10 >= 10);//true console.log(10 < 20);//true console.log(10 <= 10);//true console.log(10 != 20);//true console.log(10 !=10) ;//false console.log(10==10);//true // 两个字符比较 一位一位的比较 而且比较的ASCII字符编码 // "1" 49 > "2" 50 false console.log("1000000" > "2");//false // "a" 97 > "A" 65 // "a"-"z" 97-122 "A"-"Z" 65-90 console.log("a" > "A"); //2 ==和===的区别是什么 面试题 console.log(10=="10");//true ==在进行比较的时候 会进行隐式转换 尽量都会转成number类型 console.log(10==="10")//false ===在进行比较的时候 不会隐式转换 必须一模一样才可以 console.log("10"==="10");//true console.log(null==null);//true console.log(undefined==undefined);//true //3.特殊: null在判断相等的时候 不会进行隐式转换 console.log(null==0);//false console.log(undefined==0)//NaN==0 false console.log(null==undefined);///true console.log(NaN==NaN);//false 任何两个NaN都不相等 console.log(null>=0);//true console.log(null<=0);//true </script>
2.5三目运算符
-
作用:用于判断
-
语法 条件 ? 条件为true的时候执行的代码(==只能写一行代码==) : 条件为false执行的代码
<script> 1==1?console.log("你好"):console.log("不好") "a"==="A"?console.log("1"):console.log("2") </script>