JavaScript数据类型浅析

最近在复习JS的基础知识，发现自己对BigInt与Number的理解不是很深刻，对NaN的理解也不到位，于是打算写一篇文章详细讲解一下。

参考文章：

• Javascript 的数据类型详解 - 掘金 (juejin.cn)
• JavaScript基础数据类型 - 掘金 (juejin.cn)
• JavaScript 数据类型 | 菜鸟教程 (runoob.com)
• ECMAScript 6入门 (ruanyifeng.com)
• 理解构造函数与原型对象 - 掘金 (juejin.cn)

⭐Tips：学习本文，你将对JavaScript的八大数据类型有一个广泛的认识，适合小白观看或复习查看，不适合深入理解。

• JS的数据类型分两种
  • 基本数据类型：Number，String，Boolean，Null，Undefined，Symbol（ES6新增），BigInt（ES11新增）
  • 引用数据类型：Object（普通Object，Function，Date，Math，Array等）

基本数据类型

特性

• 含有对应的原始数值的包装对象（Number，String等对象）。
• 保存在 栈内存 中的简单数据段。
• 数据是不可变的，即不能强行修改 Array.prototype.sort.call('abc') 修改会报错。
• 没有原型链中的 _proto_ 属性。

判断

• 可以使用 typeof 判断数据类型。
• 这里要注意的是 typeof(null) == 'object' null的类型会错误判断为 object。
  • null 得到检测错误是历史遗留问题，在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object 。

Number

• 可以直接使用数字或者科学计数法定义 Number。
• 在JavaScript中的基本数据类Number是双精度浮点数，它可以表示的最大安全范围是正负9007199254740991，也就是2的53次方减1， 比2的53次大的所有数字则可以使用BigInt表达。

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

NaN

• 这里有一个注意的点 typeof NaN 为 Number。
• NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
• isNaN() 全局函数来判断一个值是否是 NaN 值。

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

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

BigInt

• 可以用在一个整数字面量后面加n的方式定义一个 Bigint 或者调用函数BigInt()但不包含new运算符，其不可以使用 new关键字初始化。
• BigInt是JavaScript中的一个新的原始类型，可以用任意精度表示整数。使用BigInt，即使超出JavaScript Number 的安全整数限制，也可以安全地存储和操作大整数。
• ES11新增。

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

• BigInt与Number的不同。
  • 不能用于Math对象中的方法。
  • 不能和任何Number实例混合运算，两者必须转换成同一种类型。在两种类型来回转换时要小心，因为BigInt变量在转换成Number变量时可能会精度丢失。

String

• 可以直接使用字符串定义 String。
• 除了null, undefined之外，其他均可通过toString方法获得其对应的字符串的值。

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

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

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

Boolean

• true 与 false 为布尔型。

• JS中只有以下七个值为 false 。

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

• 其余均为 true。

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

Null

• null 为 Null 数据类型。
• 其表达为空值。 经常用于释放内存, 或者初始化赋值。 其等于undefined，但不严等于undefined。

let a = null

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

Undefined

• undefined 为 Undefined 数据类型。
• 其含义为未定义，或者定义了未赋值。 其等于null，但不严等于null。

let a = undefined

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

Symbol

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

• Symbol，表示独一无二的值。
• Symbol 值通过Symbol()函数生成。
• 对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

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)"

• 想深入了解可以去看阮一峰老师的文章，写的很好：Symbol - ECMAScript 6入门 (ruanyifeng.com)

引用数据类型

特性

• 引用类型正在创建时会分配两个空间
  • 一块在 堆上，储存引用类型本身的数据（当然数据量会比较大）
  • 一块在 栈 上，储存对堆上数据的引用（存储堆上的内存地址，也就是指针）
• 引用类型是可变的：即 let a={}; a.x=1;
• function 参数是值传递，不能修改引用

判断

• 通过 Object.prototype.toString.call 检测最为精准

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万物皆对象
• JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

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

• 函数是一种特殊的对象
• 函数也是功能代码块,一个封闭区间短小的脚本,如果多次使用同一段代码,就可以把它封装成一个函数,允许在代码里随调随用,利用函
• 数封装来避免重复键入大量相同的内容,不过函数的真正威力在于传参的能力,可以把不同的数据传递给它们,使用这些数据去完成预定的操作
• 函数是一等公民,是对象,是值,可以存储在一个变量,数组或者对象中
• 函数可以传递给函数,并由函数返回,函数拥有属性
• 函数总有返回值(换句话说就是有return语句,当然构造器函数除外,因为它默认会返回构造器函数调用,当构造函数的调用执行时,会显示的返回返回)

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

⭐以上就是本文的全部内容啦，如果对你有帮助请给我点个赞吧