Javascript 中的数据类型判断

Author： Master
发布时间：April 21, 2021
607 views
One comment
5044 words
Categories：开发类

Javascript 中的数据类型判断其实是一个JavaScript非常基础问题，但不论是日常实际编程过程中和还是面试时，这都是一个非常常见的问题。

typeof
我们都使用 typeof 是用来判断数据类型的命令, 在常规的场景中足以应付数据类型判断的需求:

let obj = {
	   name: 'feather'
	};

function foo() {
		console.log('this is a function');
	}

let arr = [1,2,3];

let s = Symbol();

console.log(typeof 1);  // number
	console.log(typeof '1');  //string
	console.log(typeof true);  //boolean
	console.log(typeof s); //Symbol
	console.log(typeof undefined); //undefined
	console.log(typeof null); //object
	console.log(typeof foo);  //function
	console.log(typeof obj); //object
	console.log(typeof arr);   //object
	
由结果可知typeof可以测试出number、string、boolean、Symbol、undefined及function，而对于null及数组、对象，typeof均检测出为object，不能进一步判断它们的类型。
所以一般来说, typeof 会使用在比较简单的场景, 一般用在你几乎可以确定数据是哪一类数据然后稍微加以区分的时候。
举个例子，比如你已经知道某个变量一定是JS的6种基本类型之一时，你可以用typeof加以区分；又比如你不需要知道明确的类型，你只是想判断一个变量是不是对象或数组，这个时候也可以用typeof val === 'object'来判断（当然你需要确保这个变量不是null）。
不得不吐槽一句，typeof null === 'object' 其实是JavaScript的一个bug，那么多个版本还一直不肯改过来......

instanceof
instanceof 其实适合用于判断自定义的类实例对象, 而不是用来判断原生的数据类型, 举个例子:

Object.prototype.toString
在任何值上调用 Object 原生的 toString() 方法，都会返回一个 [object NativeConstructorName] 格式的字符串。
需要注意的是，但是它不能检测非原生构造函数的构造函数名。

function foo(){};

Object.prototype.toString.call(1);  '[object Number]'

Object.prototype.toString.call(NaN); '[object Number]'

Object.prototype.toString.call('1'); '[object String]'

Object.prototype.toString.call(true); '[object Boolean]'

Object.prototype.toString.call(undefined); '[object Undefined]'

Object.prototype.toString.call(null); '[object Null]'

Object.prototype.toString.call(Symbol());'[object Symbol]'

Object.prototype.toString.call(foo);  '[object Function]'

Object.prototype.toString.call([1,2,3]); '[object Array]'

Object.prototype.toString.call({});'[object Object]'
	
从上面的例子可以看到，Object.prototype.toString 方法能有效弥补typeof不能很好区分数组、对象和函数的短板。
每个类在内部都有一个 [[Class]] 属性，这个属性中就指定了上述字符串中的构造函数名。
Object.prototype.toString 的原理是当调用的时候, 就取值内部的 [[Class]] 属性值, 然后拼接成 '[object ' + [[Class]] + ']' 这样的字符串并返回. 然后我们使用 call 方法来获取任何值的数据类型.

constructor
	console.log(bool.constructor === Boolean);// true

console.log(num.constructor === Number);// true

console.log(str.constructor === String);// true

console.log(arr.constructor === Array);// true

console.log(obj.constructor === Object);// true

console.log(fun.constructor === Function);// true

console.log(Symbol.constructor === Symbol);// true

console.log(haoxl.constructor === Student);// false

console.log(haoxl.constructor === Person);// true
	
undefined和null没有contructor属性
constructor不能判断undefined和null，并且使用它是不安全的，因为contructor的指向是可以改变的
有用的数据类型判断函数

Array.isArray()
用于确定传递的值是否是一个Array。如果对象是Array，则返回true，否则为false。

Array.isArray([1, 2, 3]);  
	// true
	Array.isArray({foo: 123}); 
	// false
	Array.isArray("foobar");   
	// false
	Array.isArray(undefined);  
	// false
	
isNaN()和Number.isNaN
isNaN()函数用来确定一个值是否为 NaN。
注：isNaN函数内包含一些非常有趣的规则；
你也可以使用 ECMAScript 2015 中定义的Number.isNaN()来判断。

与 JavaScript 中其他的值不同， NaN不能通过相等操作符（== 和 ===）来判断 ，因为 NaN == NaN 和 NaN === NaN 都会返回 false。 因此，isNaN 就很有必要了。

isNaN(NaN); // true
OK, 成功了，看似很完美，但是接着看以下例子

isNaN('A String'); // true

isNaN(undefined); // true

isNaN({}); // true
	
会发现，很明显不是 NaN 的 value 也被误判成 NaN 了。
这个BUG已经存在了20年，从JavaScript最开始就一直存在。很明显当初的设计者，在设计isNaN()的时候，局限了在 "Not a Number" 这一字面意思上了：只要不是number就会返回 true。
于是 ES6 为了弥补这一BUG（而不是修正，因为isNaN存在时间太长，有可能很多功能都是基于这个BUG之上的）引入了 Number.isNaN().

Number.isNaN(NaN); // true

Number.isNaN('A String'); // false

Number.isNaN(undefined); // false

Number.isNaN({}); // false
	没有ES6的情况下，可以采用以下polyfill

if (!Number.isNaN) {
	  Number.isNaN = function(n) {
		return (
		  typeof n === "number" &&
		  window.isNaN( n )
		);
	  };
	}
	
判断是否是 DOM 元素
在实际项目里面, 有时或许我们需要判断是否是 DOM 元素对象, 那么在判断的时候利用的是 DOM 对象特有的 nodeType 属性:

isElement: function(obj){
	  return !!(obj && obj.nodeType === 1);
	}
	
判断是否是对象

isObject: function(obj){
	  var type = typeof obj;
	  return type === 'function' || typeof === 'object' && obj !== null;
	}
	
这里的对象是狭义的, 是通常所指的 key-value 型的集合, 或者是 function 函数并且不为 null.
判断是否是 arguments 对象
判断一个对象是不是 arguments 对象可以通过 Object.prototype.toString 来判断, 但是低版本的浏览器不支持, 他们返回的是 [object Object], 所以需要兼容:

isArguments: function(obj){
	  return Object.prototype.toString.call(obj) === '[object Arguments]' || (obj != null && Object.hasOwnProperty.call(obj, 'callee'));
	}
	
兼容做法原理是通过对象的 hasOwnProperty 方法来判断对象是否拥有 callee 属性从而判断是不是 arguments 对象.

Last modification：August 1, 2021

欢迎留下您的脚印

One comment

hnocoamzzm
来自Windows 10 / 搜狗高速浏览器
November 15th, 2024 at 06:43 pm

你的才华横溢，让人敬佩。 https://www.yonboz.com/video/92204.html

Reply

Javascript 中的数据类型判断

Master • 2021 年 04 月 21 日

Javascript 中的数据类型判断其实是一个JavaScript非常基础问题，但不论是日常实际编程过程中和还是面试时，这都是一个非常常见的问题。

typeof
我们都使用 typeof 是用来判断数据类型的命令, 在常规的场景中足以应付数据类型判断的需求:

let obj = {
	   name: 'feather'
	};

function foo() {
		console.log('this is a function');
	}

let arr = [1,2,3];

let s = Symbol();

instanceof
instanceof 其实适合用于判断自定义的类实例对象, 而不是用来判断原生的数据类型, 举个例子:

function foo(){};

Object.prototype.toString.call(1);  '[object Number]'

Object.prototype.toString.call(NaN); '[object Number]'

Object.prototype.toString.call('1'); '[object String]'

Object.prototype.toString.call(true); '[object Boolean]'

Object.prototype.toString.call(undefined); '[object Undefined]'

Object.prototype.toString.call(null); '[object Null]'

Object.prototype.toString.call(Symbol());'[object Symbol]'

Object.prototype.toString.call(foo);  '[object Function]'

Object.prototype.toString.call([1,2,3]); '[object Array]'

constructor
	console.log(bool.constructor === Boolean);// true

console.log(num.constructor === Number);// true

console.log(str.constructor === String);// true

console.log(arr.constructor === Array);// true

console.log(obj.constructor === Object);// true

console.log(fun.constructor === Function);// true

console.log(Symbol.constructor === Symbol);// true

console.log(haoxl.constructor === Student);// false

Array.isArray()
用于确定传递的值是否是一个Array。如果对象是Array，则返回true，否则为false。

与 JavaScript 中其他的值不同， NaN不能通过相等操作符（== 和 ===）来判断 ，因为 NaN == NaN 和 NaN === NaN 都会返回 false。 因此，isNaN 就很有必要了。

isNaN(NaN); // true
OK, 成功了，看似很完美，但是接着看以下例子

isNaN('A String'); // true

isNaN(undefined); // true

Number.isNaN(NaN); // true

Number.isNaN('A String'); // false

Number.isNaN(undefined); // false

Number.isNaN({}); // false
	没有ES6的情况下，可以采用以下polyfill

isElement: function(obj){
	  return !!(obj && obj.nodeType === 1);
	}
	
判断是否是对象

One comment

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Javascript 中的数据类型判断

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款