WEB Basic基础-08

1、数据类型


1、什么是数据类型


数据的类型，约束了数据在内存中所占的空间大小


2、JS的数据类型分类


1、基本数据类型(原始类型)


1、number类型


数字类型，可以表示32位(4字节)的正数或64位(8字节)的浮点数


整数：


允许表示十进制，八进制 和 十六进制


十进制：var num = 321;


八进制：var num = 010;


十六进制：var num = 0x35;


小数：


小数点计数法：var num = 123.456;


指数计数法：var num = 1.5e3;


2、string类型


字符串类型


由Unicode的字符，数字和标点组成


注意：字符串在使用时必须用' ' 或 " "引起来






每个字符都有自己的Unicode码


1、查看字符的Unicode码


var str = "张";






//得到十进制Unicode


var r = str.charCodeAt() ;


//将 r 转换为 十六进制 的字符串


r = r.toString(16);


2、如何将Unicode码转换为对应的字符


已知Unicode码：5f20


var str = "\u5f20"; //正确写法


var s1 = "\u"+5f20; //错误写法


3、中文范围


"\u4e00" ~ "\u9fa5"


4、转义字符


\n:换行


\t:制表符


\":"


\':'


\\:\


3、boolean类型


布尔类型，只用于表示真(true)或假(false)


注意：


boolean类型是可以参与到数字运算中的


true当成1运算


false当成0运算






var r = 1 + true; // 2


var r = 3685 * false; // 0


var r = true + false; // 1


4、undefined类型


产生undefined场合：


1、声明变量未赋值


2、访问对象不存在的属性时


5、查看数据类型


使用typeof()或typeof查看变量的数据类型


var num = 35;


var t1 = typeof(num);


var t2 = typeof num;


2、引用数据类型


2、数据类型转换


不同的数据类型之间的数据在进行运算时是如何转换的。


1、隐式转换


1、数字 + 字符串


将数字先转换为字符串，再进行拼接


var num = 15;


var str = "18";


var r = num + str; //1518






var r = "15"+18+15; //151815


var r = 15+18+"15"; //3315


var r = "15"+(18+15); //1533


2、数字 + 布尔


将布尔类型转换为数字


3、布尔 + 字符串


将布尔转换为字符串，再拼接


var b = true;


var s = "你好";


var r = b + s;


r:"true你好"


注意：


1、任意类型与字符串做加法运算时，都是将其他类型先转换为字符串再拼接


2、字符串与数字进行运算时


加法：拼接


其余操作(-,*,/,%)：先将字符串转换成数字，再做运算


2、显示转换(转换函数、强制转换)


1、toString()


将任意类型的数据转换为字符串，并返回转换后的结果


语法：


var r = 变量.toString();


ex:


var num = 18;


var r = num.toString();






var num = 18;


var r = num+"";


2、parseInt()


作用：将任意类型的数据转换成整数，如果实在无法转换的话，则返回NaN(Not a Number)


语法：


var r = parseInt(数据);


ex:


1、


var r = parseInt("13");


r : 13


2、


var r = parseInt("13.5");


r : 13


3、


var r = parseInt("13你好");


r : 13


4、


var r = parseInt("你好13");


r : NaN


3、parseFloat()


作用等同于parseInt()，允许转换为小数


1、


var r = parseFloat("35.5");


结果为:35.5


2、


var r = parseFloat("35.5abc");


结果为:35.5


3、


var r = parseFloat("abc35.5");


结果为:NaN


4、Number()


作用：将任意类型数据转换为数字，只要包含非法字符的话，结果就为NaN


1、


var r = Number("35.5");


结果为: 35.5


2、


var r = Number("35");


结果为: 35


3、


var r = Number("35你好");


结果为: NaN


练习：


1、创建网页04-dataType-exer.html


2、网页中弹出一个输入提示框，允许输入数据


var input = window.prompt("提示文字：");


input中保存的就是用户输入的数据


3、在输入提示框中输入一个数字


4、将输入的数据 + 10 ，并打印计算后的结果


5、使用typeof查看输入的数据的数据类型


6、将输入的数据转换为数字后，再+10


3、运算符


1、算术运算符


+，-，*，/，%，++，--


% ：模






++：自增运算符，在自身数据的基础上只做+1运算


--：自减运算符，在自身数据的基础上只做-1运算





ex:


var a = 15;


a++;


++a;






++做前缀：


对变量先自增，再使用


++做后缀：


先使用，在对变量自增


ex:


var num = 5;


console.log(num++);//先输出5，再变为6


console.log(num);//输出 6






var num = 5;


console.log(++num);//先变为6，在输出6


console.log(num);//输出 6






var num = 5;


++num;


console.log(num); // 输出6






var num = 5;


console.log(num--);//输出5，再变为4


console.log(num);//输出4






var num = 5;


console.log(num++);//5,先输出5，再变为6


console.log(++num);//7,先变为7，再输出7


console.log(++num);//8,先变为8，再输出8


console.log(num++);//8,先输出8，再变为9


console.log(num);//9






var num = 5;


        5(6)    (7)7    7(8)    (9)9    9


var r = num++ + ++num + num++ + ++num + num;


r : 37  (5+7+7+9+9)


2、关系运算符(比较运算符)


>,<,>=,<=,==,!=,===,!==


1、10 > 5 : true


2、"10" > 5 : true


如果运算符的两端有一个操作数是数字的话，那么另外一个会自动通过Number()进行转换，然后再进行比较


3、"3" > 5 : false


先将"3"通过Number()转换成数字，再与5比较


4、"10a" > 5 : false


5、"10a" < 5 : false


先将"10a"通过Number()转换为数字，再与5比


"10a"通过Number()转换为数字，结果 NaN


NaN 只有做!=结果才是true，其余比较都是false


6、"张三丰" > "张无忌"


比较每位字符的Unicode码


最终比较"三"和"无"的Unicode码


"三":19977


"无":26080


最终结果为 false


7、"10" > "5" : false


8、"50" > "5" : true






=== 和 !==


1、


"5" == 5 : true


5 == 5 : true


"5" == "5" : true






=== : 


比较数据的数值和数据类型都相等的情况下，结果才为真






"5" === 5 : false


!== :


比较数据的数值和数据类型只要有一个不等，结果就是真


"5" !== 5 : true


3、逻辑运算符


!:非，对现有条件取反，等同于python not


&&:逻辑与，等同于python and


||:逻辑或，等同于python or






条件1 && 条件2 ：


条件1为真，条件2为假，整体结果为假


条件1为假，条件2为真，整体结果为假


条件1为假，条件2为假，整体结果为假


条件1为真，条件2为真，整体结果为真





条件1 || 条件2 ：


只要有一个条件为真，整体结果为真






!条件:


非真即假，非假即真






练习1：


1、创建网页 05-logic.html


2、从弹框中输入一个四位整数表示年份


3、判断该年是否为闰年并输出 true 或 false


闰年：


能被4整除但不能被100整除或能被400整除


练习2:


从弹框中录入一个字符，判断是什么类型字符






从弹框中录入：K


是数字吗?false


是英文吗?true


是汉字吗?false






0 : \u0030


9 : \u0039


4、位运算符


1、按位与：&


3 & 5 : 1






3:011


5:101


==========


  001


场合：判断一个数字的奇偶性


任意数字与1做按位与操作，结果为1是奇数，结果为0是偶数






ex: 5 & 1


5:101


1:001


===========


  001


2、按位或：|


任意小数与0做按位或操作，快速取整(抛弃小数位，保留整数位)


3、按位异或：^


两个数字的二进制位进行比较，不同则为1，相同则为0


3 ^ 5 : 6


3:011


5:101


================


  110   : 6










^的作用：在不借助第三方变量的前提下，交换两个数字的位置


var a = 5;


var b = 3;






Step1 : a = a ^ b;


3:011


5:101


=====


  110 : 6 ; 结果：a = 6;


Step2 : b = b ^ a;


3:011


6:110


=====


  101 : 5 ; 结果：b = 5;


Step3 : a = a ^ b;


6:110


5:101


=====


  011 : 3 ; 结果：a = 3;


5、条件运算符


单目运算符/一元运算符:有一个操作数的运算符


++,--,!,typeof,


双目运算符/二元运算符:有两个操作数的运算符


+，-，*，/，%，...，&&，||，&，|


三目运算符/三元运算符:有三个操作数的运算符


? :






条件运算符：


条件表达式 ? 表达式1 : 表达式2;


先判断条件表达式的值，如果为true，则执行表达式1的操作，否则则执行表达式2的操作






表达式1 和 表达式2 的位置处，还可以是一个条件表达式


6、赋值运算符


a op= b;






var num = 5;


num += 6; // num = num + 6






var a = 3;


var b = 5;






a = a ^ b; // a ^= b;


b = b ^ a; // b ^= a;


a = a ^ b; // a ^= b;






作业：


BMI指数计算


要求从弹框中录入身高(m)


要求从弹框中录入体重(kg)


bmi = 体重 / (身高 * 身高);


如果bmi小于18.5 属于偏瘦


如果bmi大于23.9 属于偏胖


否则：正常










































0:0


1:1


2:10


3:11


4:100


5:101