Analysis of JavaScript data types

Analysis of JavaScript data types

Recently, I was reviewing the basics of JS and found that my understanding of BigInt and Number is not very deep, and my understanding of NaN is not in place, so I plan to write an article to explain it in detail.

Reference article :

• Detailed explanation of data types in Javascript - Nuggets (juejin.cn)
• JavaScript Basic Data Types - Nuggets (juejin.cn)
• JavaScript Data Types | Rookie Tutorial (runoob.com)
• Introduction to ECMAScript 6 (ruanyifeng.com)
• Understanding Constructors and Prototype Objects - Nuggets (juejin.cn)

⭐ Tips : After studying this article, you will have a broad understanding of the eight data types of JavaScript, suitable for beginners to watch or review, not suitable for in-depth understanding.

• There are two data types in JS
  • Basic data types : Number, String, Boolean, Null, Undefined, Symbol (new in ES6), BigInt (new in ES11)
  • Reference data type : Object (plain Object, Function, Date, Math, Array, etc.)

basic data type

characteristic

• A wrapper object (Number, String, etc.) containing the corresponding primitive value .
• Simple data segment stored in stack memory.
• The data is immutable, that is, it cannot be forcibly modified, Array.prototype.sort.call('abc')and the modification will report an error.
• There is no _proto_property .

judgment

• You can use typeofto determine the data type.
• It should be noted here that typeof(null) == 'object' the type of null will be misjudged as object .
  • nullObtaining detection errors is a problem left over from history. In JSthe initial version of , a 32-bit system was used. For performance considerations, the type information of low-order storage variables was used. 000The beginning represented an object but nullrepresented all zeros, so it was misjudged as object.

type	result
String	“string”
Number	“number”
Boolean	“boolean”
Undefined	“undefined”
Object、Array、RegExp、null、Date、Error	“object”
Function	“function”
Symbol (new in ES6)	“symbol”
BigInt (new in ES11)	“bigint”

Number

• Number can be defined directly using numbers or scientific notation.
• The basic data class Number in JavaScript is a double-precision floating-point number . The maximum safe range it can represent is plus or minus 9007199254740991, that is, 2 to the 53rd power minus 1, and all numbers larger than 2 to the 53rd power can be expressed BigInt.

let x1 = 34.00
let x2 = 34
let x3 = 123e5
let x4 = 123e-5
let x5 = new Number(123)

NaN

• Here is a point of attention typeof NaNfor Number.
• The NaN property is a special value that represents a not-a-number value. This attribute is used to indicate that a value is not a number. A Number object can be set to this value to indicate that it is not a numeric value.
• isNaN() global function to determine whether a value is a NaN value.

typeof NaN === "number" // true
// NaN 同任何数比较均为false
NaN === NaN // false

isNaN("0")  // false
isNaN("ssss")  // true

BigInt

• A Bigint can be defined by appending an integer literal nor calling a function BigInt()without newoperators, which cannot be initialized with newthe keyword .
• BigIntis a new primitive type in JavaScript that can represent integers with arbitrary precision . Using , large integers can be safely stored and manipulated, BigInteven if they exceed JavaScript 's safe integer limits.Number
• Added in ES11.

let x1 = 123n
let x2 = BigInt(123)

• BigInt is different from Number.
  • Cannot be used for Mathmethods in objects.
  • Cannot be mixed with any Numberinstance, both must be converted to the same type. Be careful when converting the two types back and forth, as variables may lose precision when BigIntconverted to variables.Number

String

• A String can be defined directly using a String.
• In addition to null, undefined, others can toStringobtain the value of their corresponding string through the method.

let s1 = "qwe"
let s2 = new String("sad")
let s3 = 'sdg'
let s4 = `dbs`

({
    
    }).toString() // [object Object]
(123).toString() // "123"

// 字符串与其他类型相加会发生奇怪的事情
{
    
    } + '' //  0
[] + '' // ''

Boolean

• true and false are Boolean.

• Only the following seven values ​​are false in JS .

  • undefined
  • null
  • false
  • NaN
  • ‘’
  • 0
  • -0

• All the rest are true .

Boolean(null) // false
Boolean(undefined) // false
Boolean(4) // false

Null

• null is the Null data type.
• Its expression is null. Often used to free memory, or initialize assignments. It is equal to undefined, but not strictly equal to undefined.

let a = null

undefined == null // true
undefined === null // false

Undefined

• undefined is the Undefined data type.
• Its meaning is undefined, or defined unassigned. It is equal to null, but not strictly equal to null.

let a = undefined

null == undefined // true
null === undefined // false

Symbol

ES5's object property names are all strings, which can easily cause property name conflicts. For example, if you use an object provided by others, but want to add a new method (mixin mode) to this object, the name of the new method may conflict with the existing method. It would be great if there is a mechanism to ensure that the name of each attribute is unique, so as to fundamentally prevent attribute name conflicts. That's Symbolwhy ES6 introduced it.

• Symbol, representing a unique value.
• Symbol values ​​are Symbol()generated by functions.
• There are two types of object attribute names, one is the original string, and the other is the newly added Symbol type. All attribute names that belong to the Symbol type are unique and can be guaranteed not to conflict with other attribute names.

let s = Symbol();

typeof s
// "symbol"

let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

• If you want to know more about it, you can read teacher Ruan Yifeng’s article, which is very well written: Symbol - Getting Started with ECMAScript 6 (ruanyifeng.com)

reference data type

characteristic

• Two spaces are allocated when a reference type is being created
  • One piece is on the heap , storing the data of the reference type itself (of course, the amount of data will be relatively large)
  • One piece is on the stack , storing references to data on the heap (storing memory addresses on the heap, that is, pointers)
• Reference types are mutable: ielet a={}; a.x=1;
• functionParameters are passed by value, references cannot be modified

judgment

• Pass the most accurate Object.prototype.toString.calldetection

let a = function (){
    
    }
let b = []
let c = {
    
    }

Object.prototype.toString.call(a) // [object Function]
Object.prototype.toString.call(b) // [object Array]
Object.prototype.toString.call(c) // [object Object]

typeof a // function
typeof b // object
typeof c // object

Object

• JS everything is an object
• JavaScript provides several built-in objects such as String, Date, Array, etc. Objects are just special data types with properties and methods.
  • Boolean can be an object.
  • A numeric type can be an object.
  • A string can also be an object
  • date is an object
  • Math and regular expressions are also objects
  • array is an object
  • Even functions can be objects

let x1 = {
    
    }
let x2 = new Object()
// 基本类型的包装类 使用typeof判为object
let x3 = new String()
let x4 = new Number()

typeof x1 // "object"
typeof x2 // "object"
typeof x3 // "object"
typeof x4 // "object"

Function

• A function is a special kind of object
• A function is also a functional code block, a script with a short closed interval. If the same piece of code is used multiple times, it can be encapsulated into a function, which allows it to be used as needed in the code.
• Number encapsulation to avoid repeated typing a lot of the same content, but the real power of the function lies in the ability to pass parameters, you can pass different data to them, and use these data to complete the predetermined operation
• Functions are first-class citizens, objects, and values ​​that can be stored in a variable, array, or object
• Functions can be passed to functions and returned by functions, and functions have properties
• A function always has a return value (in other words, there is a return statement, except for the constructor function, because it will return the constructor function call by default, and when the constructor call is executed, it will return the display)

var funA = function(){
    
    
    console.log("我是匿名函数保存在变量funA中");
}
var funB = [function(){
    
    
    console.log("我是匿名函数保存在数组funB中");
}]
var funC = {
    
    
     method:function(){
    
    
        console.log("我是匿名函数保存在对象funC中");
    }
}
// 函数的调用
funA();     // 普通函数的调用
funB[0]();  // 函数存入数组中的调用
funC.method(); // 对象调用方法的使用

⭐The above is the whole content of this article, if it is helpful to you, please give me a like