Une brève analyse des types de base JavaScript et des types de référence

Pour les types JavaScript, cela peut être simplement résumé comme suit : comparé aux langages fortement typés, il s'agit d'un langage typé faible (lâche) ; il existe des types de base et des types de référence, et la différence entre eux est qu'il y a un espace fixe ; dans la mémoire de pile, un espace non fixé est enregistré dans la mémoire de tas et un pointeur vers l'emplacement d'implémentation est enregistré dans la mémoire de pile.

De nombreux livres sur le marché ont beaucoup d'espace pour en parler. Cet article couvrira plusieurs aspects qui peuvent nécessiter que vous ayez une compréhension de base de JavaScript, en particulier des types JavaScript. Si vous ne le comprenez toujours pas, vous pouvez vous procurer un livre sur JavaScript et le lire avant de lire cet article.

1.Types de base et types de référence

1. Types de base : Indéfini/Null/Boolean/Number/String
2. Types de référence : Objet/Tableau/Fonction/Date/RegExp/Error/Map/Set…

Pourquoi les types de références n’ont-ils pas été énumérés ? Parce qu’il vous suffit d’en savoir autant, du moins pour cet article dont je parle. D'autres peuvent être rarement utilisés, et même des éléments comme Map et Set ne sont pas pris en charge par tous les navigateurs.

2. Jugement de type JavaScript

Il existe deux opérateurs en JavaScript qui peuvent être utilisés pour déterminer les types. Ils sont typeof et instanceof, mais le cercle est très petit, ils ne se mélangent pas bien et ils sont notoirement peu fiables. C’est correct dans quelques cas, mais peu fiable dans de nombreux cas. Jetez un œil et vous saurez :

Copier le code Le code est le suivant :

// Lorsqu'il est fiable :
typeof 'sofish' // string
new String('sofish') instanceof String // true

// Lorsqu'il n'est pas fiable :
typeof [] // objet
typeof null // objet
'sofish' instanceof String // false

Hmm~ Peut-être que de nombreux programmeurs JavaScript débutants jureront à cause de cela. La plupart des gens disposent déjà de bibliothèques telles que jQuery lorsqu'ils ont besoin d'utiliser JS. Ils les ont encapsulées afin que vous puissiez facilement détecter les types. Bien sûr, en fait, ce n'est pas difficile à détecter, car le dicton "En JavaScript, tout est un objet", bien sûr, comme mentionné dans de nombreux documents, undefined n'est en fait qu'une propriété globale comme NaN et Infinity. Vous le savez probablement. Mais "objet" peut nous aider :

Copier le code Le code est le suivant :

/ * Type d'objet de détection 
 * @param : obj {JavaScript Object}
 * @param : tapez {String} Nom du type JS commençant par une majuscule 
 * @return : {Boolean}
 */
 function is(obj, type) {
 return Object.prototype.toString.call(obj).slice(8, -1) === type;
}

Dans ce cas, nous pouvons utiliser la fonction is pour nous aider à déterminer le type, et cette fonction simple a une bonne compatibilité et peut être utilisée dans votre projet. Par exemple :

Copier le code Le code est le suivant :

is('sofish', 'String' ) // vrai
est(null, 'Null') // vrai
est(new Set(), 'Set') // vrai

3. Conversion de types JavaScript

En JavaScript, le type des variables (propriétés) peut être modifié. Le plus courant est la conversion entre String et Number. Comment transformer 1 '2' en 12 ? Il est nécessaire de comprendre l'opérateur, qui est un opérateur mathématique et un trait d'union en JavaScript. Par conséquent, les novices verront souvent un phénomène intéressant : lorsqu’ils utilisent le signe, parfois le calcul n’est pas celui qu’ils souhaitent, mais l’utilisation du signe - peut toujours obtenir la « bonne » réponse.

Copier le code Le code est le suivant :

1'2' // '12' 
 1 ( '2') // 3
1 - '2' // -1

Ceci est en fait dû au double rôle de . Dans le code ci-dessus, vous pouvez remarquer que la deuxième expression utilise un nombre devant String, forçant sa classe à être convertie en Number. Quant à la compréhension de la conversion de type JavaScript, dans la plupart des cas, il suffit de comprendre qu'elle a un double rôle. D'autres classes compréhensibles peuvent être modifiées par affectation/surcharge, y compris même l'erreur :

Copier le code Le code est le suivant :

var err = new Error();
console .log(err instanceof Error); // true

err = 'sofish';
console.log(err); // 'sofish'

4. Types de référence JavaScript

C'est une difficulté dans cet article. Par rapport aux types de base, les références peuvent leur ajouter des propriétés et des méthodes ; une valeur similaire à une référence est une référence, et une valeur d'un type référence est affectée à une variable, et elles pointent vers la même valeur stockée dans la mémoire tas. Les variables (propriétés) peuvent être surchargées, mais la copie peut être une chose très intéressante, nous en reparlerons en détail plus tard.

1. Ajouter des propriétés et des méthodes

Nous verrons dans le code suivant que si nous attribuons une valeur fondamentalement similaire, elle ne signalera pas d'erreur, mais elle sera invalide lors de son obtention :

Copier le code Le code est le suivant :

var arr = [1,2,3];
arr.hello = 'world';
console .log(arr.hello); // 'monde'

var str = 'sofish';
str.hello = 'world';
console.log(str.hello); // non défini

2. Opérations sur les valeurs de type référence

Puisque le type de référence est stocké dans la mémoire de la pile comme référence, lorsque l'on pointe sur la même valeur d'origine, l'opération sur la valeur affectera toutes les références voici un exemple de réaffectation (pas l'opération sur la valeur) ; Manipulation directe) recréera un objet sans changer la valeur d'origine. Par exemple :

Copier le code Le code est le suivant :

var arr = [1, 2,3] , sofish = arr;
sofish.push('bonjour tout le monde');
console.log(arr); // [1, 2, 3, 'bonjour tout le monde']

//Type non identique
sofish = ['not a fish']; // Lorsque sofish est modifié de la même manière, la valeur d'origine ne sera pas modifiée
console.log(arr);// [ 1, 2, 3, 'bonjour tout le monde']

3. Copie des valeurs de type référence

Les opérations sur la valeur d'origine affecteront toutes les références, ce qui n'est pas nécessairement ce que nous souhaitons. Parfois, nous devons copier un tout nouvel objet sans affecter les autres références pendant l'opération. En général, il existe peu d'opérations spécifiques comme Date/Fonction/RegExp..., principalement des opérations telles que l'ajout d'éléments et de propriétés à Array et Object. La principale chose que nous devons comprendre est donc comment copier des objets Array et Object.

3.1 Copie de tableaux

Dans l'objet Array, il existe une méthode slice qui renvoie un tableau intercepté. Dans ES5, filter et ainsi de suite renvoient également un nouveau tableau, nous pouvons donc utiliser cette méthode pour copier.

Copier le code Le code est le suivant :

var arr = [1, 2, 3 ];
var sofish = arr.slice();

// L'opération sur le nouveau tableau n'affectera pas le tableau d'origine
sofish.push('hello world');
console.log(arr); >

3.2 Copie d'objets Nous utilisons la méthode slice pour copier Array. En fait, pour Array et Object, nous pouvons utiliser la boucle for ... in pour parcourir et attribuer des valeurs à copier.

Copier le code Le code est le suivant :

var obj = { nom : 'sofish' }, sofish = {}, p;
pour (p dans obj) sofish[p] = obj[p];
//Les opérations sur les nouveaux objets n'affecteront pas la valeur d'origine

sofish.say = function() {};
console.log(obj); // { name: 'sofish' }

3.3 Ombre/Copie approfondie

Les opérations comme celles ci-dessus sont ce que nous appelons souvent une copie superficielle (Shadow Copy). Cependant, Array et Object peuvent avoir plusieurs calques (dimensions). Une copie comme celle-ci ne prend en compte que la valeur du calque supérieur. Parmi les valeurs possibles, Array et Object pointent toujours vers l'objet d'origine. Par exemple :

Copier le code Le code est le suivant :

var arr = [1, { bio : 'pas un poisson' } ], sofish = [], p;
for(p in arr) {
sofish[p] = arr[p];
}
// Les opérations sur l'objet `cat` contenu dans `sofish` affecteront la valeur d'origine

sofish[1].bio = 'hackable';
console.log(arr);// [1 , cat: { bio: 'hackable' } ]

Alors comment faire ? Utilisons une fonction copy() pour résoudre ce problème :

Copier le code Le code est le suivant :

/* Copier l'objet
 * @param : obj {JavaScript Object} Objet d'origine
 * @param : isDeep {Boolean} S'il s'agit d'une copie complète
 * @return : {JavaScript Object} Renvoie un nouvel objet 
 */
function copy(obj, isDeep) {
 var ret = obj.slice [] : {}, p, prop;
 // Utiliser avec is function 
 if(!isDeep && is(obj, 'Array')) return obj.slice();
 for(p in obj) {
 if(!obj.hasOwnProperty(p)) continue; 
 prop = obj[p];
 ret[p] = (is(prop, 'Object') || is(prop, 'Array')) 
 copy(prop, isDeep) : prop ? ; 
 }
 return ret;
}

De cette façon, nous pouvons copier un tableau ou un objet via la fonction copy(obj, isDeep). Vous pouvez le tester :

Copier le code Le code est le suivant :

var arr = [ 1, {bio : 'pas un poisson'}];
var sofish = copy(arr);

// L'opération de copie superficielle sur le premier calque n'affecte pas la valeur d'origine, mais affecte le deuxième calque
sofish.push('cat');
console.log(arr); 1, {bio : 'pas un poisson'}]
sofish[1].bio = 'hello world';
console.log(arr) // [1, {bio : 'hello world'}]

// La copie approfondie n'affectera pas la valeur d'origine
sofish = copy(arr, 1);
sofish[1].bio = 'foo or bar';
console.log(arr) ; // [1, {bio : 'bonjour tout le monde'}]

C'est tout. Vous devez essentiellement comprendre tous les points difficiles concernant les types que vous devez comprendre. Bien sûr, la copie est le point le plus gênant. En plus des Array et Object qui doivent souvent être exploités, il y a aussi la copie de Date/Function/RegExp.

Une brève analyse des types de base JavaScript et des types de référence_Connaissances de base