Comment déterminer le type de variable dans les compétences javascript_javascript

En JavaScript, il existe 5 types de données de base et 1 type de données complexe. Les types de données de base sont : Non défini, Null, Boolean, Number et String ; le type de données complexe est Object, et Object est également subdivisé en de nombreux types spécifiques. . Type, tel que : Tableau, Fonction, Date, etc. Aujourd'hui, nous allons discuter de la façon de déterminer le type d'une variable.

Avant d'expliquer diverses méthodes, nous définissons d'abord quelques variables de test pour voir comment les méthodes suivantes peuvent analyser les types de variables. Les variables suivantes incluent presque les types que nous utilisons couramment dans le codage réel.

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

1. Utiliser le type de détection

Ce que nous utilisons habituellement le plus, c'est d'utiliser typeof pour détecter les types de variables. Cette fois, nous utilisons également typeof pour détecter le type de la variable :

console.log(
	typeof num, 
	typeof str, 
	typeof bool, 
	typeof arr, 
	typeof json, 
	typeof func, 
	typeof und, 
	typeof nul, 
	typeof date, 
	typeof reg, 
	typeof error
);
// number string boolean object	object function undefined object object object object

À en juger par les résultats de sortie, arr, json, nul, date, reg, error sont tous détectés en tant que types d'objet, et d'autres variables peuvent être détectées correctement. Lorsque vous devez déterminer si une variable est de type nombre, chaîne, booléen, fonction, non défini ou json, vous pouvez utiliser typeof pour le déterminer. Le type des autres variables ne peut pas être déterminé, y compris null.
De plus, typeof ne peut pas faire la distinction entre les types array et json. Parce que lorsque vous utilisez la variable typeof, les types array et json génèrent des objets.

2. Utiliser la détection d'instance

En JavaScript, l'opérateur typeof est souvent utilisé pour déterminer le type d'une variable. Lors de l'utilisation de l'opérateur typeof, un problème survient lors de l'utilisation de types de référence pour stocker des valeurs. Quel que soit le type d'objet référencé, il renvoie "objet". " ". ECMAScript introduit une autre instance d'opérateur Java pour résoudre ce problème. L'opérateur instanceof est similaire à l'opérateur typeof et est utilisé pour identifier le type d'objet en cours de traitement. Contrairement à la méthode typeof, la méthode instanceof nécessite que le développeur confirme explicitement que l'objet est d'un type spécifique. Par exemple :

function Person(){

}
var Tom = new Person();
console.log(Tom instanceof Person); // true

Regardons à nouveau l'exemple suivant :

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person); // true

instanceof peut également détecter des relations d'héritage à plusieurs niveaux.
D'accord, utilisons instanceof pour détecter les variables ci-dessus :

console.log(
	num instanceof Number,
	str instanceof String,
	bool instanceof Boolean,
	arr instanceof Array,
	json instanceof Object,
	func instanceof Function,
	und instanceof Object,
	nul instanceof Object,
	date instanceof Date,
	reg instanceof RegExp,
	error instanceof Error
)
// num : false 
// str : false 
// bool : false 
// arr : true 
// json : true 
// func : true 
// und : false 
// nul : false 
// date : true 
// reg : true 
// error : true

D'après les résultats d'exécution ci-dessus, nous pouvons voir que le type de num, str et bool n'a pas été détecté, mais lorsque nous créons num en utilisant la méthode suivante, le type peut être détecté :

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);

En même temps, nous devons également voir que und et nul sont des types d'objet détectés, donc ils génèrent vrai, car il n'y a pas de types globaux de Undefined et Null dans js. Und et nul appartiennent au type Object, donc ils sont sortis vrais.

3. Utilisez le constructeur pour détecter

Lorsque nous utilisons instanceof pour détecter les types de variables, nous ne pouvons pas détecter les types de nombre, « chaîne » et booléen. Nous devons donc trouver une autre façon de résoudre ce problème.
Le constructeur est à l'origine une propriété sur l'objet prototype, pointant vers le constructeur. Cependant, selon l'ordre dans lequel l'objet instance recherche les attributs, s'il n'y a pas d'attribut ou de méthode d'instance sur l'objet instance, il sera recherché sur la chaîne prototype. Par conséquent, l'objet instance peut également utiliser l'attribut constructeur.
Commençons par afficher le contenu de num.constructor, c'est-à-dire à quoi ressemble le constructeur d'une variable de type numérique :

fonction Numéro() { [code natif] }

Nous pouvons voir qu'il pointe vers le constructeur de Number. Par conséquent, nous pouvons utiliser num.constructor==Number pour déterminer si num est de type Number. D'autres variables sont similaires :

function Person(){

}
var Tom = new Person();

// undefined和null没有constructor属性
console.log(
	Tom.constructor==Person,
	num.constructor==Number,
	str.constructor==String,
	bool.constructor==Boolean,
	arr.constructor==Array,
	json.constructor==Object,
	func.constructor==Function,
	date.constructor==Date,
	reg.constructor==RegExp,
	error.constructor==Error
);
// 所有结果均为true

D'après les résultats de sortie, nous pouvons voir qu'à l'exception de undefined et null, le type d'autres types de variables peut être déterminé à l'aide du constructeur.
Cependant, utiliser constructor n'est pas sûr, car l'attribut constructor peut être modifié, ce qui entraînera des résultats détectés incorrects, par exemple :

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

Dans l'exemple ci-dessus, le constructeur du prototype Student est modifié pour pointer vers Person, ce qui fait que le constructeur réel de l'objet instance John ne peut pas être détecté.
En même temps, lors de l'utilisation de instanceof et construcor, le tableau jugé doit être déclaré sur la page actuelle ! Par exemple, une page (page parent) a un cadre, et une page (page enfant) est référencée dans le cadre. Un tableau est déclaré dans la page enfant et affecté à une variable de la page parent. est jugé, Array == object.constructor; renverra false Raison :
1. Le tableau est constitué de données de référence. Pendant le processus de transfert, il s'agit uniquement du transfert de l'adresse de référence.
2. L'adresse référencée par l'objet natif Array de chaque page est différente. Le constructeur correspondant du tableau déclaré sur la sous-page est l'objet Array de la sous-page ; n'est pas égal à Tableau de sous-pages ; rappelez-vous, sinon il sera difficile de localiser le problème !
4. Utilisez Object.prototype.toString.call

Ne nous soucions pas de ce que c'est, voyons d'abord comment il détecte les types de variables :

console.log(
	Object.prototype.toString.call(num),
	Object.prototype.toString.call(str),
	Object.prototype.toString.call(bool),
	Object.prototype.toString.call(arr),
	Object.prototype.toString.call(json),
	Object.prototype.toString.call(func),
	Object.prototype.toString.call(und),
	Object.prototype.toString.call(nul),
	Object.prototype.toString.call(date),
	Object.prototype.toString.call(reg),
	Object.prototype.toString.call(error)
);
// '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
// '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个参数是Object，第二个参数就是这个变量的类型，而且，所有变量的类型都检测出来了，我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量arr是不是数组。
我们现在再来看看ECMA里是是怎么定义Object.prototype.toString.call的：

复制代码 代码如下:

Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)

上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
5. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让我们检测变量的类型：

console.log(
	$.type(num),
	$.type(str),
	$.type(bool),
	$.type(arr),
	$.type(json),
	$.type(func),
	$.type(und),
	$.type(nul),
	$.type(date),
	$.type(reg),
	$.type(error)
);
// number string boolean array object function undefined null date regexp error

Est-ce que cela vous semble familier lorsque vous voyez le résultat ? Oui, c'est le deuxième paramètre du résultat obtenu à l'aide de Object.prototype.toString.call (variable) ci-dessus.
Comparons d'abord les résultats de détection de toutes les méthodes ci-dessus. La ligne horizontale est la méthode de détection utilisée, et la ligne verticale est chaque variable :

类型判断	type de	instance de	constructeur	toString.call	$.type
numéro	numéro	faux	vrai	[Numéro d'objet]	numéro
str	chaîne	faux	vrai	[chaîne d'objet]	chaîne
bool	booléen	faux	vrai	[objet booléen]	booléen
arr	objet	vrai	vrai	[Tableau d'objets]	tableau
json	objet	vrai	vrai	[objet Objet]	objet
fonction	fonction	vrai	vrai	[Fonction objet]	fonction
et	indéfini	faux	-	[objet non défini]	indéfini
nul	objet	faux	-	[objet Null]	nul
date	objet	vrai	vrai	[Date de l'objet]	date
reg	objet	vrai	vrai	[objet RegExp]	expression rationnelle
erreur	objet	vrai	vrai	[Erreur d'objet]	erreur
Avantages	Facile à utiliser et peut produire des résultats directement	Peut détecter des types complexes	Basiquement capable de détecter tous les types	Détecter tous les types	-
Inconvénients	Trop peu de types détectés	Les types de base ne peuvent pas être détectés et ne peuvent pas traverser les iframes	Impossible de traverser les iframes et le constructeur est facilement modifié	Sous IE6, undefined et null sont tous deux des objets	-

这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。我们来看看jquery（2.1.2版本）内部是怎么实现$.type方法的：

// 实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;

// 省略部分代码...

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
},

// 省略部分代码... 

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

我们先来看看jQuery.each的这部分：

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//循环之后，`class2type`的值是： 
class2type = {
	'[object Boolean]' : 'boolean', 
	'[object Number]' : 'number',
	'[object String]' : 'string',
	'[object Function]': 'function',
	'[object Array]'  : 'array',
	'[object Date]'  : 'date',
	'[object RegExp]' : 'regExp',
	'[object Object]' : 'object',
	'[object Error]'  : 'error'
}

再来看看type方法：

// type的实现
type: function( obj ) {
	// 若传入的是null或undefined，则直接返回这个对象的字符串
	// 即若传入的对象obj是undefined，则返回"undefined"
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	// 低版本regExp返回function类型；高版本已修正，返回object类型
	// 若使用typeof检测出的obj类型是object或function，则返回class2type的值，否则返回typeof检测的类型
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
}

当typeof obj === "object" || typeof obj === "function"时，就返回class2type[ toString.call(obj)。到这儿，我们就应该明白为什么Object.prototype.toString.call和$.type那么像了吧，其实jquery中就是用Object.prototype.toString.call实现的，把'[object Boolean]'类型转成'boolean'类型并返回。若class2type存储的没有这个变量的类型，那就返回”object”。
除了”object”和”function”类型，其他的类型则使用typeof进行检测。即number, string, boolean类型的变量，使用typeof即可。