SOURCE

console 命令行工具 X clear

                    
>
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
}

本项目引用的自定义外部资源