typeof的使用技巧

 typeof  对于基本类型，除了  null  都可以显示正确的类型

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script> export default { methods: { get() { console.log(typeof '666'); // string
 console.log(typeof 66); // number
 console.log(typeof true); // boolean
 console.log(Symbol()); // Symbol()
 console.log(typeof undefined); // undefined
 console.log(typeof b); // undefined (没有声明，但是还是会显示undefined)
 } } }; </script>

 

 typeof  对于对象，除了函数都会显示  object 

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script> export default { methods: { get() { console.log(typeof {key: 1}); // object
 console.log(typeof null); // object
 console.log(typeof []); // object
 console.log(typeof function () { // function
 }); } } }; </script>

 

对于  null  来说，虽然它是基本类型，但是会显示  object ，这是一个存在很久了的 Bug

PS：为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而  null  表示为全零，所以将它错误的判断为  object  。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

 

 

如果我们想获得一个变量的正确类型，可以通过  Object.prototype.toString.call(xx) 。这样我们就可以获得类似  [object Type] 的字符串。

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script> export default { methods: { get() { console.log(Object.prototype.toString.call([1])); console.log(Object.prototype.toString.call(1)); console.log(Object.prototype.toString.call('1')); console.log(Object.prototype.toString.call({})); console.log(Object.prototype.toString.call(true)); console.log(Object.prototype.toString.call(null)); console.log(Object.prototype.toString.call(Symbol())); console.log(Object.prototype.toString.call(function () { })); } } }; </script>

 

 判断Array的的时候，我们可以使用 instanceof 来判断，但是这里还要区别 object 

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script> export default { methods: { get() { let a = [1,2]; console.log(a instanceof Array); console.log(a instanceof Object); } } }; </script>

 

 

 

 

 

判断undefined的时候，有时候我们需要留意一下，undefined 不是保留字，能够在低版本浏览器被赋值，这样判断就会出错

 

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script> export default { methods: { get() { let a; if (a === undefined) { console.log(6); } let undefined = 2; console.log(undefined); if (a === undefined) { console.log(66); } } } }; </script>

所以可以用下面的方式来判断，并且代码量更少，因为 void 后面随便跟上一个组成表达式，返回就是 undefined

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script> export default { methods: { get() { let a; if (a === void 0) { console.log(66); } } } }; </script>

 

 

 

嗯，就酱~

https://www.cnblogs.com/chuhui/archive/2018/12/03/10060071.html