typeof和类型转换

1. 编程形式

① 面向过程

② 面向对象

③ Js既面向过程又面向对象

1. typeof(数据)

1）typeof(数据)返回该数据是什么类型的

2）写法：

① typeof(数据)

② typeof 数据

3）typeof(数据)可以返回6个值(number,string,boolean,object,undefined,function)，这六个值都是字符串类型的

4）null返回也是一个object

5）把一个没有定义的值，如a，放到typeof()中，输出，不会报错，它会输出字符串类型的undefined

1. 类型转换

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. 作业

（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;

}