typeof和类型转换
前端爱好者080 人气:0- 编程形式
① 面向过程
② 面向对象
③ 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; } |
加载全部内容