js 类型详解

6/23/2022 JavaScript

# JS基础:数据类型

# 1. 基本数据类型(值类型)

  • number
  • string
  • boolean
  • null
  • undefined
  • symol
  • bigint

「基本数据类型是直接存储在栈中」, 浏览器会在计算机的内存中开辟一块内存, 用于执行JS代码, 这就是栈内存:执行环境栈, 而基本数据类型是直接存储在栈内存中

# 2. 引用数据类型

  • object
  • array
  • function

「存储在单独开辟一块内存中:堆内存」, 在创建引用数据类型时,会单独开辟出一块内存(Heap):堆内存, 引用数据类型会存储在这个堆内存中。每一个堆内存都有一个16进制的地址,这个地址会放到栈中存储,方便后期变量的关联

# 3. 数据类型转换

# 1.其他数据类型转换成number

  • 显示转换
    • Number([value])
    • parseInt/parseFloat([value])
  • 隐式转换(浏览器内部默认会转换成number类型)
    • isNan([value])
    • 数学运算(特殊情况:+号在出现字符串的时候,会进行字符串拼接)
    • 在==比较的时候,有些值需要转换成number再进行比较
对象在做数学运算的时候(对象转换成数字):底层机制

1. 检测对象的 Symbol.toPrimitive 这个属性值,如果有则基于这个值进行运算
2. 如果没有,检测对象的 valueOf() 这个值「原始值:基本类型值」,如果有则基于这个值进行运算
3. 如果不是原始值,获取对象的 toString() 把其变为字符串,当转成字符串后,+号则进进行字符串拼接
4. 如果最后就是想变为数字,则再把字符串转换为数字即可
1
2
3
4
5
6
let obj = {};
console.log(20 + obj); // '20[object Object]'

{} + 20 // 20, 因为前面的空对象在解析的时候会被解析成代码块
1
2
3
4
// Number机制
console.log(Number('0')) // 0
console.log(Number('10')) // 10
console.log(Number('1abc')) // 只要出现非有效数字都是NaN
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN
console.log(Number(false)) // 0, 反之true为1

// 对象转成数字类型,参考上面的说明

// parseInt机制:
// 从字符串左侧开始查找有效数字字符
// 只要一遇到无效数字字符,则停止查找
// parseFloat则是多识别一个小数点
parseInt('') // NaN
Number('')   // 0
isNaN('')    // false,需要先Number('')转成0,再isNaN
parseInt(null) // NaN,需要先把null转成字符串
parseInt('10abc') // 10
parseFloat('1.2ab') + parseInt('1.8abc') // 1.2 + 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2.其他数据类型转换成string

  • 能直接使用的办法
    • toString()
    • String()
  • 隐式转换
    • 在加号运算的时候,如果一边出现了字符串,则是字符串拼接
    • toString()
1. 把其他数据类型转换成字符串类型很简单,一般是直接引号''包起来。
2. 只有{}普通对象调用toString(),不是转换成字符串,而是类型检测,返回的结果是:"[object Object]"
1
2

# 3.其他数据类型转换成boolean

  • 转换方式
    • !转换布尔值后取反
    • !!转换为布尔类型
    • Boolean([val])
  • 隐式转换
    • 在条件判断中,条件的处理结果就是布尔类型值

「规则:只有0、NaN、null、undefined、空字符串这5个值会变成布尔类型的false,其余的都是true」

# 4. ==比较,数据转换规则

  • 两边都是一样的数据类型(特殊情况)
    • {}=={} : false, 引用类型比较的是堆内存地址
    • []==[] :false, 原因同上
    • NaN==NaN:false
  • ==两边是不同的数据类型
    • null==undefined : true, 除此之外, null/undefined和其他数据类型值都不相等
    • 对象==字符串,要把对象转换成字符串后再进行比较
    • 剩下的==两边数据类型不一样的,都需要转换成number类型再进行比较