[JS基础] 之类型判断
前言
首先需要特别说明的是，JavaScript 是面向对象的编程语言 (OOP)。
既然是面向对象的编程语言，自然就可以不同类型的对象。
那在JavaScript 中， 有哪些对象类型呢？
这些类型的对象之间如何区别呢？
常见对象类型
1. 字符串(String)对象
String 对象属性
FF: Firefox, IE: Internet Explorer
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| constructor | 对创建该对象的函数的引用 | 1 | 4 |
| length | 字符串的长度 | 1 | 3 |
| prototype | 允许您向对象添加属性和方法 | 1 | 4 |
String 对象方法
FF: Firefox, IE: Internet Explorer
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| anchor() | 创建 HTML 锚。 | 1 | 3 |
| big() | 用大号字体显示字符串。 | 1 | 3 |
| blink() | 显示闪动字符串。 | 1 | |
| bold() | 使用粗体显示字符串。 | 1 | 3 |
| charAt() | 返回在指定位置的字符。 | 1 | 3 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 | 1 | 4 |
| concat() | 连接字符串。 | 1 | 4 |
| fixed() | 以打字机文本显示字符串。 | 1 | 3 |
| fontcolor() | 使用指定的颜色来显示字符串。 | 1 | 3 |
| fontsize() | 使用指定的尺寸来显示字符串。 | 1 | 3 |
| fromCharCode() | 从字符编码创建一个字符串。 | 1 | 4 |
| indexOf() | 检索字符串。 | 1 | 3 |
| italics() | 使用斜体显示字符串。 | 1 | 3 |
| lastIndexOf() | 从后向前搜索字符串。 | 1 | 3 |
| link() | 将字符串显示为链接。 | 1 | 3 |
| localeCompare() | 用本地特定的顺序来比较两个字符串。 | 1 | 4 |
| match() | 找到一个或多个正在表达式的匹配。 | 1 | 4 |
| replace() | 替换与正则表达式匹配的子串。 | 1 | 4 |
| search() | 检索与正则表达式相匹配的值。 | 1 | 4 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 | 1 | 4 |
| small() | 使用小字号来显示字符串。 | 1 | 3 |
| split() | 把字符串分割为字符串数组。 | 1 | 4 |
| strike() | 使用删除线来显示字符串。 | 1 | 3 |
| sub() | 把字符串显示为下标。 | 1 | 3 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 | 1 | 4 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 | 1 | 3 |
| sup() | 把字符串显示为上标。 | 1 | 3 |
| toLocaleLowerCase() | 把字符串转换为小写。 | - | - |
| toLocaleUpperCase() | 把字符串转换为大写。 | - | - |
| toLowerCase() | 把字符串转换为小写。 | 1 | 3 |
| toUpperCase() | 把字符串转换为大写。 | 1 | 3 |
| toSource() | 代表对象的源代码。 | 1 | - |
| toString() | 返回字符串。 | - | - |
| valueOf() | 返回某个字符串对象的原始值。 | 1 | 4 |
2. Date（日期）对象
Date 对象属性
FF: Firefox, IE: Internet Explorer
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| constructor | 返回对创建此对象的 Date 函数的引用。 | 1 | 4 |
| prototype | 使您有能力向对象添加属性和方法。 | 1 | 4 |
Date 对象方法
FF: Firefox, IE: Internet Explorer
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| Date() | 返回当日的日期和时间。 | 1 | 3 |
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 | 1 | 3 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 | 1 | 3 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 | 1 | 3 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 | 1 | 4 |
| getYear() | 请使用 getFullYear() 方法代替。 | 1 | 3 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 | 1 | 3 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 | 1 | 3 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 | 1 | 3 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 | 1 | 4 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 | 1 | 3 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 | 1 | 3 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 | 1 | 4 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 | 1 | 4 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 | 1 | 4 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 | 1 | 4 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 | 1 | 4 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 | 1 | 4 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 | 1 | 4 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 | 1 | 4 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 | 1 | 3 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 | 1 | 3 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 | 1 | 3 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 | 1 | 4 |
| setYear() | 请使用 setFullYear() 方法代替。 | 1 | 3 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 | 1 | 3 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 | 1 | 3 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 | 1 | 3 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 | 1 | 4 |
| setTime() | 以毫秒设置 Date 对象。 | 1 | 3 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 | 1 | 4 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 | 1 | 4 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 | 1 | 4 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 | 1 | 4 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 | 1 | 4 |
| setUTCSeconds() | 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 | 1 | 4 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 | 1 | 4 |
| toSource() | 返回该对象的源代码。 | 1 | - |
| toString() | 把 Date 对象转换为字符串。 | 1 | 4 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 | 1 | 4 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 | 1 | 4 |
| toGMTString() | 请使用 toUTCString() 方法代替。 | 1 | 3 |
| toUTCString() | 根据世界时，把 Date 对象转换为字符串。 | 1 | 4 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 | 1 | 3 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 | 1 | 3 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 | 1 | 3 |
| UTC() | 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。 | 1 | 3 |
| valueOf() | 返回 Date 对象的原始值。 | 1 | 4 |
3. Array（数组）对象
Array 对象属性
FF: Firefox, IE: Internet Explorer
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| constructor | 返回对创建此对象的数组函数的引用。 | 1 | 4 |
| index | 1 | 4 | |
| input | 1 | 4 | |
| length | 设置或返回数组中元素的数目。 | 1 | 4 |
| prototype | 使您有能力向对象添加属性和方法。 | 1 | 4 |
Array 对象方法
FF: Firefox, IE: Internet Explorer
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 | 1 | 4 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 | 1 | 4 |
| pop() | 删除并返回数组的最后一个元素 | 1 | 5.5 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 | 1 | 5.5 |
| reverse() | 颠倒数组中元素的顺序。 | 1 | 4 |
| shift() | 删除并返回数组的第一个元素 | 1 | 5.5 |
| slice() | 从某个已有的数组返回选定的元素 | 1 | 4 |
| sort() | 对数组的元素进行排序 | 1 | 4 |
| splice() | 删除元素，并向数组添加新元素。 | 1 | 5.5 |
| toSource() | 返回该对象的源代码。 | 1 | - |
| toString() | 把数组转换为字符串，并返回结果。 | 1 | 4 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 | 1 | 4 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 | 1 | 6 |
| valueOf() | 返回数组对象的原始值 | 1 | 4 |
4. Boolean（逻辑）对象
Boolean 对象属性
FF: Firefox, IE: Internet Explorer
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| constructor | 返回对创建此对象的 Boolean 函数的引用 | 1 | 4 |
| prototype | 使您有能力向对象添加属性和方法。 | 1 | 4 |
Boolean 对象方法
FF: Firefox, IE: Internet Explorer
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| toSource() | 返回该对象的源代码。 | 1 | - |
| toString() | 把逻辑值转换为字符串，并返回结果。 | 1 | 4 |
| valueOf() | 返回 Boolean 对象的原始值。 | 1 | 4 |
5. Math（算数）对象
Math 对象属性
FF: Firefox, IE: Internet Explorer
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。 | 1 | 3 |
| LN2 | 返回 2 的自然对数（约等于0.693）。 | 1 | 3 |
| LN10 | 返回 10 的自然对数（约等于2.302）。 | 1 | 3 |
| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.414）。 | 1 | 3 |
| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。 | 1 | 3 |
| PI | 返回圆周率（约等于3.14159）。 | 1 | 3 |
| SQRT1_2 | 返回返回 2 的平方根的倒数（约等于 0.707）。 | 1 | 3 |
| SQRT2 | 返回 2 的平方根（约等于 1.414）。 | 1 | 3 |
Math 对象方法
FF: Firefox, IE: Internet Explorer
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| abs(x) | 返回数的绝对值。 | 1 | 3 |
| acos(x) | 返回数的反余弦值。 | 1 | 3 |
| asin(x) | 返回数的反正弦值。 | 1 | 3 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 | 1 | 3 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 | 1 | 3 |
| ceil(x) | 对数进行上舍入。 | 1 | 3 |
| cos(x) | 返回数的余弦。 | 1 | 3 |
| exp(x) | 返回 e 的指数。 | 1 | 3 |
| floor(x) | 对数进行下舍入。 | 1 | 3 |
| log(x) | 返回数的自然对数（底为e）。 | 1 | 3 |
| max(x,y) | 返回 x 和 y 中的最高值。 | 1 | 3 |
| min(x,y) | 返回 x 和 y 中的最低值。 | 1 | 3 |
| pow(x,y) | 返回 x 的 y 次幂。 | 1 | 3 |
| random() | 返回 0 ~ 1 之间的随机数。 | 1 | 3 |
| round(x) | 把数四舍五入为最接近的整数。 | 1 | 3 |
| sin(x) | 返回数的正弦。 | 1 | 3 |
| sqrt(x) | 返回数的平方根。 | 1 | 3 |
| tan(x) | 返回角的正切。 | 1 | 3 |
| toSource() | 返回该对象的源代码。 | 1 | - |
| valueOf() | 返回 Math 对象的原始值。 | 1 | 4 |
6. RegExp(正则表达式) 对象
RegExp 对象属性
FF: Firefox, IE: Internet Explorer
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| global | RegExp 对象是否具有标志 g。 | 1 | 4 |
| ignoreCase | RegExp 对象是否具有标志 i。 | 1 | 4 |
| lastIndex | 一个整数，标示开始下一次匹配的字符位置。 | 1 | 4 |
| multiline | RegExp 对象是否具有标志 m。 | 1 | 4 |
| source | 正则表达式的源文本。 | 1 | 4 |
RegExp 对象方法
FF: Firefox, IE: Internet Explorer
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| compile | 编译正则表达式。 | 1 | 4 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 | 1 | 4 |
| test | 检索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
7. HTML DOM 对象
| 对象 | 描述 |
|---|---|
| Document | 代表整个 HTML 文档，用来访问页面中的所有元素。 |
| Anchor | 代表 <a> 元素。 |
| Area | 代表图像地图中的 <area> 元素。 |
| Base | 代表 <base> 元素。 |
| Body | 代表图像地图中的 <body> 元素。 |
| Button | 代表 <button> 元素。 |
| Event | 代表事件的状态 |
| Form | 代表 <form> 元素 |
| Frame | 代表 <frame> 元素 |
| Frameset | 代表 <frameset> 元素 |
| Iframe | 代表 <iframe> 元素 |
| Image | 代表 <img> 元素 |
| Input button | 代表 HTML 表单中的按钮 |
| Input checkbox | 代表 HTML 表单中的选择框 |
| Input file | 代表 HTML 表单中的 fileupload 。 |
| Input hidden | 代表 HTML 表单中的隐藏域。 |
| Input password | 代表 HTML 表单中的密码域。 |
| Input radio | 代表 HTML 表单中的单选框。 |
| Input reset | 代表 HTML 表单中的重置按钮。 |
| Input submit | 代表 HTML 表单中的确认按钮。 |
| Input text | 代表 HTML 表单中的文本输入域。 |
| Link | 代表 <link> 元素 |
| Meta | 代表 <meta> 元素 |
| Object | 代表一个 <Object> 元素 |
| Option | 代表 <option> 元素 |
| Select | 代表 HTML 表单中的选择列表。 |
| Style | 代表某个单独的样式声明。 |
| Table | 代表 <table> 元素。 |
| TableData | 代表 <td> 元素。 |
| TableRow | 代表 <tr> 元素。 |
| Textarea | 代表 <textarea> 元素。 |
8. 其他对象
| 对象 | 描述 |
|---|---|
| Window | JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现，Window 对象就会被自动创建。 |
| Navigator | 包含客户端浏览器的信息。 |
| Screen | 包含客户端显示屏的信息。 |
| History | 包含了浏览器窗口访问过的 URL。 |
| Location | 包含了当前URL的信息。 |
类型判断
我们都知道， 在js 中 定义一个变量使用 var i = 的方式。
也就是说，定义的时候并没有指定类型， 只是在之后的使用中赋予值。
在赋予值之后， 如何判断这个变量的类型呢。
1. 使用 typeof方法。
看简单的例子， 判断String 和 Object 的类型
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var obj = {key1:'value1'};
alert(typeof(obj));
var str = "11";
alert(typeof(str))
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
2. 使用 instanceof 的方式
使用typeof 可以区别出String 和 Object 的类型。
但是如果对一个数组进行typeof 的话， 发现值也是 object , 也就是说， 无法判断出0bject 和 Array 的区别.
var arry = ["11","22"]; alert(typeof(arry));
这样的话就可以使用 instanceof 的方式了。
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var obj = {key1:'value1'};
alert(obj instanceof Object);
var arry = ["11","22"];
alert(arry instanceof Array);
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
需要注意的部分
1. 注意typeof 和 instanceof 使用时首字母大小写的区别。
“object”是类型的字符串， Object 是对象。
string/String 也是 类似。
2. instanceof 是对象型使用的方法。
对于字符串来说有 基本类型的String 和 对象型的String, 这个Java 的概念有点类似。
比较以下的区别：
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var str1 = "11";
var str2 = new String("11");
alert(typeof(str1)); // string
alert(typeof(str2)); // object
alert(str1 instanceof String); //false
alert(str2 instanceof String); //true
</script>
</HEAD>
<BODY>
</BODY>
</HTML>