console
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(x, y) {
this.x += x;
this.y += y;
}
function getArguments() { return arguments }
var type = new Vue({
el: '#table',
data: {
bg: 'red',
md: ['typeof', 'Object.prototype.toString', 'constructor.name', 'instanceof'],
gd: [{
t: null,
n: 'null',
v: 'null'
},
{
t: undefined,
n: 'undefined',
v: 'undefined'
},
{
t: true,
n: Boolean,
v: 'boolean'
},
{
t: 1,
n: Number,
v: 'number'
},
{
t: 'string',
n: String,
v: 'string'
},
{
t: Symbol(),
n: Symbol,
v: 'symbol'
},
{
t: {},
n: Object,
v: 'object'
},
{
t: function() {},
n: Function,
v: 'function'
},
{
t: new Object(),
n: Object,
v: 'new Object()'
},
{
t: new Function(),
n: Function,
v: 'new Function()'
},
{
t: new Boolean(),
n: Boolean,
v: 'new Boolean()'
},
{
t: new Number(),
n: Number,
v: 'new Number()'
},
{
t: new String(),
n: String,
v: 'new String()'
},
{
t: new Array(),
n: Array,
v: 'new Array()'
},
{
t: new Date(),
n: Date,
v: 'new Date()'
},
{
t: new Error(),
n: Error,
v: 'new Error()'
},
{
t: new RegExp(),
n: RegExp,
v: 'new RegExp()',
eg: null
},
{
t: new Set(),
n: Set,
v: 'new Set()'
},
{
t: new Map(),
n: Map,
v: 'new Map()'
},
{
t: new WeakSet(),
n: WeakSet,
v: 'new WeakSet()'
},
{
t: new WeakMap(),
n: WeakMap,
v: 'new WeakMap()'
},
{
t: new Point(1, 2),
n: Point,
v: '自定义 new Point()'
},
{
t: getArguments(),
n: Object,
v: 'arguments'
},
{
t: Math,
n: Math,
v: 'Math'
}]
}
})
<h1>
JavaScript常见数据类型判断
</h1>
<table id="table">
<tr>
<th>
数据类型\判断方式
</th>
<th v-for="(m,i) in md">
{{ m }}
</th>
</tr>
<tr v-for="(o,i) in gd">
<td>
{{ o.v }}
</td>
<td :class="[i > 0 && i < 10 ? '' : bg]">
{{ typeof o.t }}
</td>
<td :class="[i !== 21 ? '' : bg]">
{{ Object.prototype.toString.call(o.t) }}
</td>
<td :class="[i > 1 && i < 22 ? '' : bg]">
{{ o.t ? o.t.constructor.name : 'TypeError' }}
</td>
<td :class="[i>5 ? i > 21 ? 'yellow' : '' : bg]">
{{ i>1 && i < 20 ? (o.t instanceof o.n) : i >= 20 ? (o.t instanceof Object) : 'TypeError' }}{{ i > 21 ? '(Object)' : '' }}
</td>
</tr>
<tr>
<td>
总结
</td>
<td>
不能区分null、arguments<br/>
及构造函数(Function除外)
</td>
<td>
不能区分自定义构造函数
</td>
<td>
不能判断null、undefined、<br/>
不能区分arguments、Math
</td>
<td>
需指定数据类型进行判断<br />
不能判断null、undefined<br />
不能区分其他原始类型<br/>
不能区分arguments、Math
</td>
</tr>
</table>
<h3>
封装函数
</h3>
<pre>
<code>
function typeOf(o) {
if (o === null || o === undefined) return String(o)
let dataType = Object.prototype.toString.call(o).replace(/^\[object |]$/g, '').toLocaleLowerCase()
return dataType === 'object' ? o.constructor.name : dataType
}
function typeOf(o) {
if (o === null) return 'null'
let dataType = typeof o
if (dataType === 'object') {
dataType = Object.prototype.toString.call(o).replace(/^\[object |]$/g, '').toLocaleLowerCase()
if (dataType === 'object') {
dataType = o.constructor.name
}
}
return dataType
}
</code>
</pre>
body {
text-align: center
}
table {
width: 100%
}
td {
color: #fff;
background-color: green
}
.red {
background-color: red
}
.yellow {
color: #000;
background-color: yellow
}
pre {
text-align: left;
background-color: #000;
color: #fff
}