JavaScript data types and their detection

1. How many types of values ​​are there in JavaScript?

Javascript has two data types, primitive data types and reference data types. The basic data types include Undefined, Null, Boolean, Number, String, and Symbol (new in ES6, representing unique values), while reference data types are collectively called Object objects, including objects, arrays, and functions. Next, we look at the characteristics of the two.

2. Basic data types

1. Values ​​are immutable

var name = 'java';
name.toUpperCase(); // output 'JAVA'
console.log(name); // output 'java'

Thus, the value of the basic data type is immutable

2. Stored in the stack area

The primitive data type is a simple data segment directly stored in the stack. It occupies a small space and has a fixed size. It is frequently used data, so it is stored in the stack.

3. Comparison of values

var a = 1;
var b = true;
console.log(a == b);    // true
console.log(a === b);   // false

== : Only compare values ​​and convert data types.

=== : Do not only compare values, but also compare data types.

3. Reference data types

1. Values ​​are mutable

var a={age:20}；
a.age=21；
console.log(a.age)//21

The above code shows that reference types can have properties and methods, and can be dynamically changed.

2. Save in stack memory and heap memory at the same time

The object of the reference data type stored in the heap occupies a large space and the size is not fixed. If it is stored in the stack, it will affect the performance of the program; the reference data type stores a pointer in the stack, and the pointer points to the heap. The starting address of this entity. When the interpreter looks for a reference value, it first retrieves its address on the stack, and then obtains the entity from the heap after obtaining the address.

3. A comparison is a comparison of references

When assigning a value of reference type from one variable to another, it also copies the value of the object stored in the variable into the space allocated for the new variable.

var a={age:20};
var b=a;
b.age=21;
console.log(a.age==b.age)//true

We mentioned above that basic types and reference types are stored in different locations in memory. Reference types store objects in the heap. At the same time, a pointer is stored in the stack, and this pointer points to the starting position of the entity in the heap. When the variable a is initialized, the a pointer points to the address of the object {age:20}. After a is assigned to b, b points to the address of the object {age:20}. These two variables point to the same object. Therefore, changing any one of these variables will affect each other.

At this point, if you cancel the reference of a variable to the original object, it will not affect the other variable.

var a={age:20};
var b=a;
a = 1;
b // {age:20}

In the above code, a and b point to the same object, and then the value of a becomes 1, which will not affect b at this time, and b still points to the original object.

Fourth, the test data type

1.typeof

typeof returns a string representing the data type . The return result includes: number, boolean, string, symbol, object, undefined, function and other 7 data types, but cannot judge null, array, etc.

typeof Symbol(); // symbol is valid
typeof ''; // string is valid
typeof 1; // number is valid
typeof true; //boolean valid
typeof undefined; //undefined is valid
typeof new Function(); // function is valid
typeof null; //object is invalid
typeof [] ; //object is invalid
typeof new Date(); //object is invalid
typeof new RegExp(); //object is invalid

Both arrays and objects return objects, so you need to use instanceof to judge

2.instanceof

instanceof is used to determine whether A is an instance of B. The expression is: A instanceof B, if A is an instance of B, it returns true, otherwise it returns false. The instanceof operator is used to test whether an object has a constructor's prototype property in its prototype chain.

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true

Regarding the type judgment of arrays, you can also use ES6 to add Array.isArray()

Array.isArray([]);   // true

Three disadvantages of instanceof :

• For basic data types, there is a certain difference between the result created by the literal method and the result created by the instance method.

console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true

Strictly speaking, only the result created by the instance is the standard object data type value, and it is also an instance of the standard Number class; the result created by the literal method is the basic data type value, not a strict instance. , but due to the loose nature of JS, the methods provided on Number.prototype can be used.

• As long as it is on the prototype chain of the current instance, the results we use to detect it are all true. In the prototypal inheritance of classes, the results we finally detect may not be accurate .

var arr = [1, 2, 3];

console.log(arr instanceof Array) // true
console.log(arr instanceof Object);  // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true

• Cannot detect null and undefined

For the special data types null and undefined, their classes are Null and Undefined, but the browser protects these two classes and does not allow us to access them outside .

3.constructor

The constructor function is very similar to instanceof. But the constructor detection Object is not the same as instanceof, and can also handle the detection of basic data types.

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false

Two major drawbacks of constructor :

• Null and undefined are invalid objects, so there will be no constructor. These two types of data need to be judged by other methods.
• The constructor of the function is unstable. This is mainly reflected in rewriting the prototype of the class. In the process of rewriting, it is very likely that the previous constructor will be overwritten, so the detected result will be inaccurate.

function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array

4.Object.prototype.toString.call()

Object.prototype.toString.call() The most accurate and common way . First get the toString method on the Object prototype, let the method execute, and let this in the toString method point to the value of the first parameter.

Important supplementary notes about toString :

• Intended to convert to string, but some toString methods do more than just convert to string
• The toString methods on the prototypes of Number, String, Boolean, Array, RegExp, Date, and Function all convert the current data type to a string type (their functions are only used to convert to a string)
• toString on Object is not meant to be converted to a string.

The function of toString on Object is to return the detailed information of the class to which the main body of the current method execution (this in the method) belongs, namely "[object Object]", where the first object represents the current instance is of the object data type (this is fixed dead), the second Object represents that the class to which this belongs is Object.

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
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(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window is a reference to the global object global