web前端学习笔记08-js基本数据类型及数据类型转换、js运算

一、js基本数据类型

通过typeof函数获取一个变量的类型

输出值释义boolean变量是布尔类型的number变量是数值类型的（整数、浮点数）string变量是字符串类型的（采用 " "、’ ’ ）object变量是引用或Null类型的（ new Array() / new String() ）function函数类型的undefined变量是undefined类型的

&& 【字符串中的引号】字符串中单双引号都无法解析变量，但都可以解析转义字符，它们可以相互嵌套使用 && 【常见转义字符】\n（换行，即换到下一行）、\r（回车，即回到当前行的开头）、\t（缩进）、\（一个\）、’（一个单引号）、"（一个双引号） && 【关于回车按键】根据操作系统不同，得到完全不同的字符。windows——\n\r，linux——\n，macos——\r或\n(10.9版本以后) && 【关于NaN】自己不要定义NaN，运算错误时会产生NaN，如 var num=3*‘小明’; 此时，num的值为NaN，类型为number。NaN的特点是，它不等于任何数值，包括NaN自己，任何与NaN运算的结果都是NaN，唯一检测NaN的办法是使用isNaN(); && 【关于undefined和null】他们的值相等，undefined其类型是未知的，而null是确定的对象类型

// 基本数据类型———————————————————————————— // 布尔类型 var a=true; //注意：布尔值小写 // alert(typeof(a)); // 将结果打印到控制台 console.log(typeof(a)); console.log(8>30); // 数值类型 包含整数、小数、二进制数、八进制数、十六进制数、NaN、科学计数法 var num=3; var num=3.6; var num=0b11; //二进制0b开头 var num=013; //八进制0开头 var num=0xf; //十六进制0x开头 var num=314e-2; //科学计数法，属于浮点型的一种，表示314*10的-2次方 console.log(num,typeof(num)); //关于NaN var num=NaN; //NaN表示not a number //自己不要定义NaN，运算错误时会产生NaN，如 var num=3*'小明'; 此时，num的值为NaN，类型为number var num=3*'小明'; console.log(num,typeof(num)); //num的值为NaN，类型为number console.log(NaN==NaN); //结果为false，NaN不等于任何数值，包括NaN自己 console.log(NaN-1); //结果为NaN，任何与NaN运算的结果都是NaN //字符串类型：双引号或单引号引起的字符 var str='123'; var str="hello"; var str='I love "MM"'; //单双引号可以相互嵌套使用 console.log(str,typeof(str)); //对象类型：对象、数组、null var obj =new Object(); //创建一个对象 var obj={name:'Zhang',age:18}; //对象 var list=[1,2,3,4]; //数组 var obj=null; console.log(obj,typeof(obj)); console.log(list,typeof(list)); console.log(typeof(null)); console.log(null); //undefined与null： console.log(null==undefined); //结果为true console.log(null===undefined); //结果为false //函数类型 //匿名函数/表达式函数 var Func=function(){ console.log('函数类型'); } console.log(Func,typeof(Func)); //使用语法定义函数 function sortnum(){ console.log('这是一个排序函数'); } console.log(sortnum,typeof(sortnum)); //undefined 未定义：当定义一个变量不给值时，它的类型就是undefined var un=undefined; console.log(un,typeof(un));

二、js数据类型转换

数据类型转换分为显式数据类型转换（强制）和隐式数据类型转换（自动）。隐式数据类型转换在程序执行过程中根据需要发生转换，不经过人工干预，多发生在运算或者判断过程中，自动向着更加精确的方向转换。显式数据类型转换则根据程序员的意愿进行数据类型转换，需要进行操作。

2.1 隐式数据类型转换

// 隐式转换 var no1=5; var no2='18'; var result=no1+no2; //no1隐式转为string console.log(result,typeof(result)); //结果为518 string // 判断（分支）中的隐式转换 if(23){ //括号中为true执行内容，false不执行，括号中的数据自动转为布尔类型 console.log('判断条件的隐式转换'); }

【三种强制转换】

关键字释义Number();强转为数值（整数或浮点数）Boolean();强转为布尔型string();强转为字符串（任意值均可转换为字符串）

2.2 数值强制类型转换

使用 Number(); 、parseInt(); 和 parseFloat(); 做类型转换

关键字释义Number();强转为一个数值（包括整数和浮点数）parseInt();强转为整数parseFloat();强转为浮点数

【注意】当字符串中包含非数值表示的字符时，Number();转换结果为NaN，而parseInt(); 和 parseFloat(); 返回从第一个字符开始的数值字符直至碰到非数值字符，若第一个字符是非数值字符则也返回NaN。 【注意】对象类型、函数类型、 undefined和 NaN转换结果均为NaN，布尔类型的parseInt(); 和 parseFloat();转换结果为NaN，但Number();转换结果为0或1。 【特别地】对象类型值为 null 时，Number();转换结果为0

//数据类型转换—————————————————————————————————————————————————————————— var str2='123'; // var str2='123abc'; //NaN-123-123 // var str2='1a2b'; //NaN-1-1 // var str2='a12bc'; //NaN-NaN-NaN // var str2='1.23abc'; //NaN-1-1.23 var res=Number(str2); console.log(res,typeof(res)); var res2=parseInt(str2); console.log(res2,typeof(res2)); var res3=parseFloat(str2); console.log(res3,typeof(res3));

2.3 检测数据是否为非数值：isNaN();

是数值返回false，非数值返回true

// 检测数据是否为非数值 var test='1'; console.log(test,isNaN(test));

2.4 布尔强制类型转换

//布尔数据类型转换—————————————————————————————————————————————————————————— //undefined转布尔 var aa=undefined; //结果为false console.log(Boolean(aa)); //字符串转布尔 var str3='1'; //非空字符串转换结果为true var str3=''; //空字符串转换结果为false（只有引号没有内容） console.log(Boolean(str3)); //数值转布尔 var num2=1; //非零、非NaN数值转换结果均为true var num2=0.3; var num2=0; //数值0、0.0、NaN转换结果为false var num2=0.0; var num2=NaN; console.log(Boolean(num2)); //对象转布尔 var obj1={name:yy,age:18}; var obj1={}; //不论对象值是否为空，转换结果均为true var obj1=null; //对象值为null时转换结果为false console.log(Boolean(obj1)); // 函数类型转换结果均为true

2.5 字符串强制类型转换

其他类型转换为字符串时，内容不变，类型变为字符串。（对象类型输出其字符串内容）

三、js运算符

3.1 算术运算符：+ - * / %(取余/求模) ++ --

自增运算中：变量++表示先使用变量再加一，++变量表示先加一再使用变量。自减运算类似。

// 算术运算 var no1=11; var no2=8; var result1=no1+no2; //加法 console.log(result1); var result2=no1-no2; //减法 console.log(result2); var result3=no1*no2; //乘法 console.log(result3); var result4=no1/no2; //除法 console.log(result4); var result5=no1%no2; //取余 console.log(result5); // 自增：变量++表示先使用变量再加一，++变量表示先加一再使用变量 var no3=4; console.log(no3); //4 console.log(no3++); //4 console.log(no3); //5 var no4=7; console.log(no4); //7 console.log(++no4); //8 console.log(no4); //8

3.2 字符串连接：+

当两边的值都是数值型时，字符串连接做算术运算。当两边有一个值为字符串时做字符串连接（数值型会做自动类型转换）

// 字符串连接 console.log(3+2); // 5 console.log('he'+'llo'); //hello console.log('he'+56); //he56 var str4='1'+1+2; // 112 var str4=1+1+'2'; // 22 console.log(str4);

3.3 赋值运算：= += -= *= /= %=

// 赋值运算 // = var no5=12; console.log(no5); //12 // += var no5=12; no5+=3; //no5=no5+3; console.log(no5); //15 // -= var no5=12; no5-=3; //no5=no5-3; console.log(no5); //9 // *= var no5=12; no5*=3; //no5=no5*3; console.log(no5); //36 // /= var no5=12; no5/=3; //no5=no5/3; console.log(no5); //4 // %= var no5=12; no5%=7; //no5=no5%7; console.log(no5); //5

3.4 比较运算：< > <= >= == === != !==

// 比较运算 // > console.log(5>3); //true console.log(5>30); //false // >= console.log(5>=3); //true console.log(5>=5); //true console.log(5>=13); //false // < console.log(5<3); //false console.log(5<30); //true // <= console.log(5<=3); //false console.log(5<=5); //true console.log(5<=13); //true // == 值相等 console.log(5==6); //false console.log(5==5); //true console.log(5==5.0); //true console.log(5=='5'); //true // === 全等：值和类型都相等 console.log(5===6); //false console.log(5===5); //true console.log(5===5.0); //true console.log(5==='5'); //false // != 值不等 console.log(5!=6); //true console.log(5!=5); //false console.log(5!=5.0); //false console.log(5!='5'); //false // !== 不全等：全等于取反，即值不等或类型不等或都不等 console.log(5!==6); //true console.log(5!==5); //false console.log(5!==5.0); //false console.log(5!=='5'); //true

3.5 逻辑运算：布尔值间的运算 && || ！

// 逻辑运算 var br1=true; var br2=true; var br3=false; var br4=false; // 逻辑与运算&&：有假则假 console.log(br1 && br2); //1 && 1 --> 1 console.log(br1 && br3); //1 && 0 --> 0 console.log(br4 && br2); //0 && 1 --> 0 console.log(br3 && br4); //0 && 0 --> 0 // 逻辑或运算||：有真则真 console.log(br1 || br2); //1 || 1 --> 1 console.log(br1 || br3); //1 || 0 --> 1 console.log(br4 || br2); //0 || 1 --> 1 console.log(br3 || br4); //0 || 0 --> 0 // 逻辑非运算!：真变假，假变真 console.log(!br1); // !1 --> 0 console.log(!br3); // !0 --> 1

【js中没有逻辑异或运算(xor) 】 了解异或运算原理：相同为假，不同为真

1 xor 1 --> 0 1 xor 0 --> 1 0 xor 1 --> 1 0 xor 0 --> 0

3.6 按位运算：在二进制基础上进行的逻辑运算 ^ & | ~ << >>

// 按位运算：将数据转化为二进制，然后在二进制每个位上进行运算 // 1 表示true 0 表示false // 按位与运算& var aw1=55; //110111 var aw2=34; //100010 100010 即34 console.log(aw1 & aw2); //34 // 按位或运算| var aw1=55; //110111 var aw2=34; //100010 110111 即55 console.log(aw1 | aw2); //55 // 按位非运算~ var aw3=12; //1100 0011 二进制数前可以无限补0，涉及计算机存储的反码与补码 console.log(~aw3); //-13，规律为加1取相反数 // 按位异或运算^ var aw1=55; //110111 var aw2=34; //100010 010101 即21 console.log(aw1 ^ aw2); //21 // 左移运算<< 乘2的幂次方运算，远快于算术运算 var aw1=55; //110111 console.log(aw1<<3); //左移三位 55*(2^3) // 右移运算>> 除以2的幂次方取整 var aw1=48; var aw2=50; console.log(aw1>>3); //右移三位 48/(2^3)取整6 console.log(aw2>>3); //右移三位 50/(2^3)=6.25 取整6

3.7 其他运算符

// 其他运算 // 逗号分隔符：用于同时声明多个变量 var a=2,b=5,c=7; console.log(a,b,c); // 类型检测运算符typeof console.log(typeof 5); // 实例化对象运算符new var obj =new Array(); console.log(obj); // 类型检测运算符instanceof var arr=new Array(); console.log(arr instanceof Array); // 三元运算符：var 变量= 判断条件 ? 真值 : 假值 // 当判断条件为true时，真值赋给变量；当判断条件为false时，假值赋给变量 var res=5>30?'没错':'瞎说'; console.log(res); // delete删除对象的成员或删除数组的值 var arr=['苹果','橘子','芒果','桌子']; console.log(arr); delete arr[3]; console.log(arr);

js运算优先级

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

本节示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js数据类型及其转换、js运算符</title> </head> <body> <script type="text/javascript"> // 基本数据类型—————————————————————————————————————————————————————————— // 布尔类型 var a=true; //注意：布尔值小写 // alert(typeof(a)); // 将结果打印到控制台 console.log(typeof(a)); // 数值类型 包含整数、小数、二进制数、八进制数、十六进制数、NaN var num=3; var num=3.6; var num=0b11; //二进制0b开头 var num=013; //八进制0开头 var num=0xf; //十六进制0x开头 var num=NaN; //NaN表示not a number console.log(num,typeof(num)); //字符串类型：双引号或单引号引起的字符 var str='123'; var str="hello"; var str='I love "MM"'; //单双引号可以相互嵌套使用 console.log(str,typeof(str)); //对象类型：对象、数组、null var obj={name:'Zhang',age:18}; //对象 var list=[1,2,3,4]; //数组 var obj=null; console.log(obj,typeof(obj)); console.log(list,typeof(list)); //函数类型 var Func=function(){ console.log('函数类型'); } console.log(Func,typeof(Func)); //undefined 未定义：当定义一个变量不给值时，它的类型就是undefined var un=undefined; console.log(un,typeof(un)); //数据类型转换—————————————————————————————————————————————————————————————————— //数值数据类型转换—————————————————————————————————————————————————————————— var str2='123'; var str2='123abc'; //NaN-123-123 var str2='1a2b'; //NaN-1-1 var str2='a12bc'; //NaN-NaN-NaN var str2='1.23abc'; //NaN-1-1.23 var res=Number(str2); console.log(res,typeof(res)); var res2=parseInt(str2); console.log(res2,typeof(res2)); var res3=parseFloat(str2); console.log(res3,typeof(res3)); // 检测数据是否为数值 var test='a'; console.log(test,isNaN(test)); //布尔数据类型转换————————————————————————————————————————————————————— //字符串转布尔 var str3='1'; //非空字符串转换结果为true var str3=''; //空字符串转换结果为false console.log(Boolean(str3)); //数值转布尔 var num2=1; //非零、非NaN数值转换结果均为true var num2=0.3; var num2=0; //数值0、0.0、NaN转换结果为false var num2=0.0; var num2=NaN; console.log(Boolean(num2)); //对象转布尔 var obj1={name:'yy',age:18}; var obj1={}; //不论对象值是否为空，转换结果均为true var obj1=null; //对象值为null时转换结果为false console.log(Boolean(obj1)); //字符串数据类型转换：任意值均可转换为字符串———————————————————————————————— // js运算符——————————————————————————————————————————————————————————————————— // 算术运算：+ - * / ++ -- // ++自增1 var s=1; s++; //每次加1，结果赋值给自己，相当于s+=1; console.log(s); s--; console.log(s); // 字符串连接 console.log(3+2); console.log('he'+'llo'); console.log('he'+56); var str4='1'+1+2; // 112 var str4=1+1+'2'; // 22 console.log(str4); // 比较运算 // == 值相等即可 ===全等：值相等且类型相同 !==全不等 var bb=1==1; //true var bb=1=='1'; //true，自动做隐式处理：数据类型转换 var bb=1===1; //true var bb=1==='1'; //false console.log(bb); </script> </body> </html>