For so many years, I have been investing a lot of time in business scenarios, difficulties to overcome, component packaging, logic sorting and other things, but I have not in-depth understanding of basic principles. Every interview is based on my own experience to answer the questions. Now the industry is serious, so I settle the previous things. Help yourself review and enrich the blog as well.

Native data type

Data types are the basis of JS, and are often used in practical work. If asked in an interview, what would you say?

Here, we answer by categorizing data types into three categories: basic and complex data types and ES6 new data types.

Being specific about each of the three types will leave the interviewer with a solid foundation and a clear impression.

Underlying data types

The most basic data type:

Null: something that does not exist.

Undefined: undefined (variable with no value)

String: a string, enclosed in quotation marks (values start with characters)

(123e5) (Think of money in your pocket)

Boolean: Boolean values, true and false (the code world is only true or false)

Complex data types

Complex object data types, including:

Object: an object wrapped in curly braces (a person has many attributes)

Array: an array wrapped in brackets.

ES6 Added a data type

Symbol: Unique value that belongs to the underlying data type

Set: Similar to an array, but the values are unique and belong to a data structure

Map: Similar to objects, but the scope of “keys” is not limited to strings. All types of values (including objects) can be used as keys. Belong to data structure

Data type detection

The following are commonly used data type detection methods in previous development, and test cases are configured for detection, and the characteristics of each method are summarized.

Solution 1: Typeof

Typeof returns the typeof a variable or expression, including string, number, Boolean, undefined, object, and function

typeof ' ';             // 'string'
typeof 1;              // 'number'
typeof false;          // 'boolean'
typeof undefined;      // 'undefined'
typeof {};             // 'object'
typeof function () {}; // 'function' 
typeof Symbol(a);// 'symbol'

// The following tests failed
typeof [];             // 'object'
typeof null;           // 'object'
typeof new Set(a);// 'object'
typeof new Map(a);// 'object'
Copy the code

Conclusion: Only string, NUMBE, Boolean, undefined, function, symbol and other types are supported

Solution 2: Instanceof

Instanceof checks whether an instance belongs to a constructor, returning true and false

(null) instanceof Null;              / / an error
(undefined) instanceof Undefined;    / / an error
('1') instanceof String;             // false
(1) instanceof Number;               // false
(Symbol()) instanceof Symbol         // false
([]) instanceof Array;               // true
({}) instanceof Object;              // true
(function () {}) instanceof Function // true

// Extend the custom constructor
function App() {},new App()) instanceof App;      // true
Copy the code

Conclusion: Object, Array, and custom constructor detection are supported

Solution 3: Constructor

Constructor is used to return the object’s constructor.

(null).constructor.toString().indexOf('Null') > -1; / / an error
(undefined).constructor.toString().indexOf('Undefined') > -1; / / an error
('1').constructor.toString().indexOf('String') > -1;
(1).constructor.toString().indexOf('Number') > -1;
(true).constructor.toString().indexOf('Boolean') > -1;
(new Symbol()).constructor.toString().indexOf('Symbol') > -1; / / an error
({}).constructor.toString().indexOf('Object') > -1;
([]).constructor.toString().indexOf('Array') > -1;
(function(){}).constructor.toString().indexOf('Function') > -1;

// Extend the custom constructor
function App () {}
new App().constructor.toString().indexOf('App') > -1; // true
Copy the code

Conclusion: Null, undefined, and Symbol cannot be detected. Custom constructor detection is supported

Solution 4: Object. The prototype. ToString. Call ()

This method determines the type of the object

Object.prototype.toString.call(null) = = ='[object Null]';
Object.prototype.toString.call(undefined) = = ='[object Undefined]';
Object.prototype.toString.call('1') = = ='[object String]';
Object.prototype.toString.call(1) = = ='[object Number]';
Object.prototype.toString.call(true) = = ='[object Boolean]';
Object.prototype.toString.call(new Symbol()) = = ='[object Symbol]'; / / an error
Object.prototype.toString.call({}) === '[object Object]';
Object.prototype.toString.call([]) === '[object Array]';
Object.prototype.toString.call(function()= = = {})'[object Function]';

// Extend the custom constructor
function App () {}
Object.prototype.toString.call(new App()) === '[object App]'; // false
Copy the code

Conclusion: Null and undefined are supported, but custom constructor detection is not

The ultimate conclusion

By comparing the above four detection methods, it is not difficult to see:

  1. typeofSupports basic string, value, Boolean, undefined, but does not support NULL, array, constructors, etc.
  2. instanceofObject, Array, and custom constructor detection are supported, but base types are not.
  3. constructorBase types and custom constructors are supported, but null, undefined, and Symbol are not
  4. Object.prototype.toString.call()All types except Symbol are supported, but custom constructors are not
  5. In ES5, array. isArray is used to detect arrays

Therefore:

  • If the js data type is detectedObject.prototype.toString.call()Is the most powerful \
  • Use if testing ES6 Symboltypeof
  • Used if detecting custom constructorsinstanceoforconstructor