面试官：如何正确的判断Javascript中的数据类型？

这是我参与更文挑战的第5天，活动详情查看： 更文挑战

前言

面试系列又开始更新啦。

1. 数据类型的区分

原始类型： undefined, boolean, number, string, bigInt, symbol, null

对象类型：Object （Object, Array, Map, Set, WeakMap, WeakSet, Date......）

原始类型，它存储的是一个值。 而对象类型，是通过原生Object派生出来的，它存储的是一个位置(地址/指针)。

// 对象类型可以调用方法  
// list => [1,2,3,4,5] => Array() => Array().filter
const list = [1,2,3,4,5] //对象类型 
const filterItem = list.filter(i => i === 2)  // [2] 

//如果在原始类型上调用方法会怎么样？
const number = 1  //原始类型
number.toString() // "1"

// 1. new Number(number) =>  1 (Number对象派生出来的数据)
// 2. 调用toString()   1 => Number() => Object() => Object().toString
// 3. return 结果， 销毁当前实例。
复制代码

2. 类型判断

typeof：只用于检查原始类型，若检查对象类型的数据只会返回object。

instanceof：运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

//typeof
console.log(typeof 42); // number
console.log(typeof 'aaaaa'); // string
console.log(typeof true); //boolean
console.log(typeof []); //object  如果想要打印出array应该怎么做？

//instanceof
function a (){}
function b (){} 
let c = new a() 

console.log(c instanceof a) // true 
console.log(c instanceof b) // false 
复制代码

需要注意的知识点：

1. undefined, 创建一个变量，但未被赋值，那就会有个默认值 ⇒ undefined。

2. Object，它是任何 constructed 对象实例的特殊非数据结构类型，几乎所有通过new创建出来的数据类型。

3. instanceof原理和原型链

   首先确定两个点，第一点是所有对象都有__proto__属性，只有Object.prototype.proto为null。第二点所有构造函数的prototype都指向它的原型对象，而构造函数的实例的__proto__也指向原型对象。

   function a () {} 
   const b = new a () 
   
   console.log(b.__proto__ === a.prototype) // true  都指向构造函数a的原型对象
   console.log(b instanceof a) // true 
   console.log(b instanceof Object) // true 
   
   //nstanceof的原理就是比对prototype是否出现在原型链上。
   复制代码

例题

有没有什么更好的办法判断类型？

const checkType  = obj => {
	const [typeEx, typeEn] = Object.prototype.toString.call(obj).split(' ')
	return typeEn.substring(0, typeEn.length - 1).toLowerCase()
}

checkType(1) // number 
checkType([]) // array
checkType(new Date()) // date
复制代码

能手写实现instanceof吗？

const instanceOf = (left, right) => {
	const rpt = right.prototype
	white(true){
		if(left === null) return false 
		if(left === rpt) return true 
		
		left = left.__proto__
	}
}
instanceOf([], Object) // true 
instanceOf([], String) // false 
instanceOf('a', String) // true 
复制代码

最后

面试系列第一篇：
面试官：你知道Callback Hell（回调地狱）吗？

面试系列第二篇：
面试官：react和vue有什么区别吗？

面试系列第三篇：
面试官：你了解es6的知识吗？

面试系列第四篇：
面试官：你了解Webpack吗？

面试系列第五篇：
面试官：你使用webpack时手写过loader，分离过模块吗？

如果您有收获或者疑问请在下方评论，求赞！谢谢观看到这里。