typeof和类型转换
-
编程形式
① 面向过程
② 面向对象
③ Js既面向过程又面向对象 -
typeof(数据)
1)typeof(数据)返回该数据是什么类型的
2)写法:① typeof(数据) ② typeof 数据3)typeof(数据)可以返回6个值(number,string,boolean,object,undefined,function),这六个值都是字符串类型的
4)null返回也是一个object
5)把一个没有定义的值,如a,放到typeof()中,输出,不会报错,它会输出字符串类型的undefined -
类型转换
1) 显示类型转换(1) Number(数据)
1)转化为数字
2)转不成数字的,转化为NaN
3)true:1,false:0,null:0,undefined:NaN
4)数据转化后不管能不能转成数字,其类型都会变成Number
(2) parseInt(数据,目标进制)
5) 将第一个参数转化为整型数字
6) 第二个参数的取值范围为(2—36)(0)
7) 转不成整型数字的,转化为NaN
8) 以数字位开始到非数字位结束
9) true,false,null,undefined:NaN
10) 目标进制:以目标进制为基底将数据转化为十进制
11) parseInt(数据,0) == parseInt(数据) 或者输出NaN
12) 二进制只有0和1 这种写法parseInt(3,2) 输出NaN
(3)parseFloat(数据)
13)以数字位开始到除了点以外的非数字位结束(如:parseFloat(123.2.3) == 123.2)
14)转化为浮点型数字
(4)String(数据)
15)把一切数据转化为字符串
(5)Boolean(数据)
16)把数据转化为布尔值
17)除undefined,null,NaN,””,false,0转化为布尔值是false,其余值都为true
(6)数据.toString(目标进制)
18)将数据转化为字符串
19)undefined和null没有toString方法,因此他们不能用这个方法
20)目标进制:以10进制为基底转化为目标进制
(7)实例解析
21)题目:把二进制转化为16进制
22)解析:二进制转化为十进制,然后再把十进制转化为十六进制
23)方法:先用parseInt()把二进制转化为十进制,然后再用toString()把十进制转化为十六进制
24)代码:
//向用户获取这个二进制数
var num1 = parseInt(window.prompt('请输入一个二进制数'));
//把获取二进制数转化为十进制数
var num2 = parseInt(num1,2);
//把转化后的十进制数转化为十六进制数
var num3 = num2.toString(16);
//把转化为十六进制数输出
document.write(num3);
2)隐式类型转换
(1)isNaN(数据)
1)确定数据是否是NaN,是:true;不是:false
2)内部机制:Number(数据) ==> 看输出是否是NaN
(2)数据 ++/-- ++/-- 数据
1)内部机制:Number(数据) ==> 转化后进行++/--计算
2)转化后就算不是数字,是NaN,但是其类型依然是Number
(3)+/- 数据(一元正负)
1)内部机制:Number(数据) ==> 对转化后的数据添加+-号
(4)+ (加号)
1)内部机制:String()
2)只要加号两边有一个是字符串,则就会在运算时调用String()方法
(5)-*/%
1)内部机制:Number()
(6)&& || !
1)内部机制:Boolean()
(7)> < >= <=
1)任何数据类型与数字比较,会把该数据类型转化为数字(Number()),再进行比较
2)字符串数字与字符串数字比较,会比较他的ascll码
3)具体情况具体判定
4)比较后以Boolean输出
(8)== !=
1)任何数据类型与数字比较,会把该数据类型转化为数字(Number()),再进行比较
2)具体情况具体判定
3)比较后以Boolean输出
(9)其他说明:
1)null/undefined 既不大于0,也不小于0,也不等于0
2)null == undefined null !== undefined
(10)不进行隐式类型转换
1)=== !==
2)NaN !== NaN
-
作业
(1)typeof和类型转换课后作业
console.log(typeof(a)); //'undefined'
console.log(typeof(undefined)); //'undefined'
console.log(typeof(NaN)); //'number'
console.log(typeof(null)); //'object'
console.log(typeof(NaN)); //'number'
var a = "123abc";
console.log(typeof(+a)); //'number'
console.log(typeof(!!a)); //'boolean'
console.log(typeof(a + "")); //'string'
console.log(1 == "1"); //true
console.log(NaN == NaN); //false
console.log(NaN == undefined); //false
console.log("11" + 11); //'1111'
console.log(1 === '1'); //false
console.log(parseInt('123abc')); //123
var num = 123123.345789;
console.log(num.toFixed(3)); //123123.346
console.log(typeof(typeof(a))); //'string'
(2)使用html+css写一个三角形
Html代码
<div class="box"></div>
Css代码
div.box{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;
border-bottom-color:#456;
}
(3)父元素为一个div,宽高不固定,子元素是一个块元素,宽高已知,如何让子元素在父元素内水平,垂直都居中
Html代码
<div class="father">
<div class="son"></div>
</div>
Css代码
div.father{
width:500px;
height:300px;
border:1px solid #489;
position:relative;
}
div.son{
width:100px;
height:100px;
background-color:#123;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
浙公网安备 33010602011771号