数据类型

154 阅读10分钟

一、JavaScript数据类型

基本类型

  • Null : 通常用来给变量赋初值。
  • Undefined :未定义,不建议用来赋初值,某些函数会返回Undefined,一般通过void 0获取安全的undefined。
  • String : 字符串
  • Numberintfloat+infinity-infinityNaN+0-0
  • Boolean : truefalse
  • Symbol :Es6新增,唯一且不可改变的数据类型。比如call apply bind改变this指向会将原函数对象作为方法挂在新对象上,这时候为了避免变量冲突会用symbol创建新属性也就是key。通过object.getPropertySymbols()获取。
  • Bigint

引用类型

  • Object
  • Array
  • Function
  • RegExp
  • Date

包装类型

  • Boolean
  • String
  • Number

二、基本类型和引用类型区别

2.1存储方式

JavaScript中,定义一个变量并赋值过程是先在内存中申请一个存储空间,存入值。而这个存储空间是根据数据类型来申请,如果是基本数据类型就在栈内存申请,如果是引用数据类型就在栈中存地址,实体存在堆中。

内存分为栈内存堆内存

栈内存

  • 空间小
  • 大小固定
  • 存储频繁使用的变量
  • 由编译器自动分配释放

JavaScript中,基本类型存储在栈中,栈空间大小固定,所以基本类型具有不可变性。

a+='3'是在栈中开辟一个新的存储空间存储a3,将原来变量a指向新的存储空间。复制后会开辟新空间,所以新变量的操作不会影响旧变量。

捕获.PNG

堆内存

  • 空间大
  • 大小不固定
  • 由程序员分配释放或者垃圾回收机制回收
  • 引用类型值存在堆中,栈中存指针指向堆中的实体

由于内存有限,所以引用类型的变量需要程序员自动分配释放,或者最终由垃圾回收机制回收,如果垃圾回收机制还没有回收就会造成内存泄漏。垃圾回收与内存泄漏

JavaScript中,引用类型存储在堆中,可以随时变化。比如数组的增删,翻转,排序方法可以改变原数组。 引用类型复制后会在栈中开辟新空间存储的是地址,该地址指向原来堆中的实体,也就是说新旧地址指向堆中的同一个实体对象,所以新变量的操作会影响旧变量。

由于引用数据类型复制后新旧地址指向同一个实体对象,会相互影响,所以有了深拷贝和浅拷贝。深拷贝与浅拷贝

2.2 ==、===

==:值相等就返回true

===: 值相等且数据类型相等返回true。引用类型会比较它们的引用地址,虽然两个变量在堆中存储的对象具有的属性值都相等,但是它们被存储在不同的存储空间,因此若栈中的存储空间不相等返回false

2.3 传参不同

javascript中函数传参不是变量的引用,而是变量拷贝的副本。变量是原始类型,副本是值本身。变量是引用类型,副本是指向堆内存的地址。

三、检测数据类型

3.1 typeof

typeof a

  • 准确检测基本数据类型,null返回Objectundefined返回undefined;引用类型除了function全部返回Object
  • typeof null === object
  • typeof undefined === undefined
  • typeof NaN === Number
  • typeof function ==== function
typeof 1 // 'number' 
typeof '1' // 'string' 
typeof undefined // 'undefined' 
typeof true // 'boolean' 
typeof Symbol() // 'symbol' 
typeof null // 'object' 
typeof [] // 'object' 
typeof {} // 'object' 
typeof console // 'object' 
typeof console.log // 'function'

3.2 instanceof

a instanceof Array

  • 准确检测引用数类型,返回布尔值,基本类型返回false,引用类型返回true
  • 原理:a的原型链上是否存在Array的prototype属性
  • 手写instanceof
function myInstanceof(left, right) {
if (left === null || typeof left !== 'object' && typeof left !== 'function') return false
let proto = Object.getPrototypeOf(left)
let prototype = right.prototype
while (true) {
    if (!proto) return false
    if (proto === prototype) return true
    proto = Object.getPrototypeOf(proto)
}
}

原型原型链相关链接

3.3 Object.prototype.toString.call(a)

  • 准确判断所有数据类型,返回[Object xxx]

3.2 a.constructor === 'Array'

  • 不建议使用,因为对象的constructor可能会改变
  • null undefined没有constructor属性

四、null undefined

  • Number(null)===0
  • Number(undefined)===NaN
  • typeof nullObject
  • typeof undefinedundefined
  • null==undefinedtrue
  • null===undefinedfalse
  • 一般null用来赋初值
  • 一般undefined不建议赋初值,通过void 0获取安全的undefined
  • 返回undefined场景
//1.变量声明未赋值
var a
//2.调用函数没有传递参数
function fn(a){
return a
}
fn()
//3.对象没有赋值的属性
var a = new Object()
a.name
//4.函数没有返回值,默认返回undefined
function fn(){}
fn()

五、Boolean

除了null undefined 0 "" NaN其他都为true,[] {}都是true

六、Number

5.1整数 浮点数

最常见的面试题:为什么0.1+0.2!==0.3? javascript中只要是数字都以64位浮点数形式存储,运算时候会自动将64位浮点数转为32位整数,所以浮点数运算时候不精确。解决办法(0.1+0.2).tofixed(2)

  • js处理无限循环小数

由于0.1和0.2转为二进制是无限循环小数,js中Number类型遵循IEE754标准,用64位固定长度表示,也就是double双精度浮点数。二进制中double最多保留52位,加上前面的1,就是53位,剩余舍去,遵循0舍1入原则,所以最终0.1+0.2=0.30000000000000004

5.2数值精度 范围 表示方法

数值精度

浮点数的64个二进制位从左往右

  • 正负-第1位:符号位,0表示正数,1表示负数
  • 数值大小-第2位到第12位(共11位):指数部分(0~2047)(2的11次方减1)
  • 精度-第13位到第64位(共52位):小数部分(即有效数字)

正常情况下,指数在(0,2047)之间, JavaScript 内部实际表示形式如下:

(-1)^符号位 * 1.xx...xx * 2^指数部分 有效数字的第一位默认是1,不保存在64位浮点数之中。有效数字总是1.xx...xx形式,xx..xx部分保存在64位浮点数中,最长为52位。因此,JavaScript 有效数字最长为53个二进制位。即-253到253,253是16位的十进制数,所以JavaScript 对15位的十进制数都可以精确处理。多出的有效数字都无法保存,变成0。

数值范围

64位浮点数的指数部分最大为2047,分一半表示负数,表示的数值范围为(2-1023-21024) 如果一个数大于等于2的1024次方,会“正向溢出”,返回Infinity。 如果一个数小于等于2的-1075次方(指数最小值-1023,加上小数部分的52位),会“负向溢出”。返回0。

Math.pow(2, 1024) // Infinity
Math.pow(2, -1075) // 0
Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

数值表示方法 科学计数法允许字母e或E的后面,跟一个整数,表示这个数值的指数部分。 小数点前数字多于21位,小数点后紧跟5个以上的0就转为科学计数法,其他情况采用字面形式表示

123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23
1234567890123456789012// 1.2345678901234568e+21
123456789012345678901// 123456789012345680000
0.0000003 // 3e-7
0.000003 // 0.000003

5.3数值进制

  • 十进制:没有前导0的数值。
  • 八进制:前缀0o或0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:前缀0x或0X的数值。
  • 二进制:前缀0b或0B的数值。
0xff // 255
0o377 // 255
0b11 // 3
0xzz // 报错 16进制出现z
0o88 // 报错 8进制出现8
0b22 // 报错 2进制出现2
//一般有前导0的数值会被视为八进制,但是如果前导0后面有数字8和9,则该数值被视为十进制。ES5 严格模式和 ES6,已废除
0888 // 888
0777 // 511

5.4特殊数值

  • 正零 负零

一般情况正零和负零都会被当作正常的0,但是做分母时返回值不同

-0 === +0 // true
0 === -0 // true
0 === +0 // true
+0 // 0
-0 // 0
(-0).toString() // '0'
(+0).toString() // '0'
(1 / +0) === (1 / -0) // false   +Infinity与-Infinity不相等
  • NAN

一般在字符串解析或者数学函数运算时会出现NAN,是Number类型,不等于任何值包括它本身,与任何数运算都是NAN

5 - 'x' // NaN
Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN
0 / 0 // NaN
typeof NaN // 'number'
// NAN不等于任何值包括它本身
NaN === NaN // false
[NaN].indexOf(NaN) // -1
Boolean(NaN) // false
NaN + 32 // NaN
NaN - 32 // NaN
NaN * 32 // NaN
NaN / 32 // NaN
  • infinity
// 场景一
Math.pow(2, 1024)// Infinity

// 场景二
0 / 0 // NaN
1 / 0 // Infinity

Infinity === -Infinity // false
1 / -0 // -Infinity
-1 / -0 // Infinity
// Infinity大于一切值(除了NaN),-Infinity小于一切数值(除了NaN)。与NaN比较,总返回false。
Infinity > 1000 // true
-Infinity < -1000 // true
Infinity > NaN // false
-Infinity > NaN // false
Infinity < NaN // false
-Infinity < NaN // false

// 运算规则
5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0

0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity
null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity
Infinity + Infinity // Infinity
Infinity * Infinity // Infinity
Infinity - Infinity // NaN
Infinity / Infinity // NaN
// 与undefined计算都是nan
undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN

5.5数值相关的方法

  • parseInt
parseInt('123') // 123
parseInt('   81') // 81
// 字符串转整数时,依次转换,遇到不能转的字符,不再继续,返回已经转好的部分。如果第一个就不能转化(后面跟着数字的正负号除外),返回NaN。
// parseInt返回值要么是十进制整数,要么是NaN。
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15
parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1
parseInt('0x10') // 16
parseInt('011') // 11
parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1

parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8

// 进制
parseInt('1000') // 1000 等同于parseInt('1000', 10) 
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
// 第二个参数不是数值,会被自动转为一个整数。这个整数要在2到36之间,否则返回NaN。
// 第二个参数是0、undefined和null,直接忽略。
parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10
// 字符串包含对指定进制无意义的字符,从最高位开始,只返回可以转换的数值。如果最高位无法转换,直接返回NaN。
parseInt('1546', 2) // 1
parseInt('546', 2) // NaN
// 第一个参数不是字符串,先转为字符串。
parseInt(1.23) // 1 等同于  parseInt('1.23') 
parseInt(0x11, 36) // 43
parseInt(0x11, 2) // 1
// 等同于
parseInt(String(0x11), 36)
parseInt(String(0x11), 2)
// 等同于
parseInt('17', 36)
parseInt('17', 2)
// JavaScript 不允许将带有前缀0的数字视为八进制数,而是要求忽略这个0。
parseInt(011, 2) // NaN
// 等同于
parseInt(String(011), 2)
// 等同于
parseInt(String(9), 2)//NAN
  • parseFloat
// 将字符串转为浮点数,与parseInt()类似
parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN
  • isNaN()
// 判断一个值是否为NaN。
// 1.只对数值有效,传入其他值会先被转为数值,所以NaN返回true时可能不是NaN,而是字符串对象或者数组。
isNaN('Hello') // true  相当于  isNaN(Number('Hello')) // true
isNaN({}) // true
isNaN(['xzy']) // true
isNaN(NaN) // true
isNaN(123) // false
// 2.空数组和只有一个数值成员的数组,isNaN返回false。因为它们都能被Number转成数值
isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false
// 4.使用NaN之前要先判断数据类型,NAN不等于任何值包括它本身
function myIsNaN(value) {
  return value !== value;
}
// isNaN() 和 Number.isNaN() 区别?
isNaN 先转换为数值,不能被转换都返回 true,因此非数字值也会返回 true ,判断不准确。
Number.isNaN 先判断是否为数字,是数字再继续判断是否为 NaN ,不会进行数据类型的转换,判断更准确。
  • isFinite()
// 返回布尔值,表示某个值是否为正常的数值。
// 除了Infinity、-Infinity、NaN和undefined返回false,其他都返回true。
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

七、String类型

// 字符串是类数组,可以返回某个位置字符,以及字符串长度,但是无法改变单个字符也无法改变属性
var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"
'hello'[1] // "e"

var s = 'hello';
delete s[0];
s // "hello"
s[1] = 'a';
s // "hello"
s[5] = '!';
s // "hello"

var s = 'hello';
s.length // 5
s.length = 3;
s.length // 5
// 方括号中的数字超过字符串的长度,或根本不是数字,返回undefined。
'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

八、BigInt类型

es10提出,可以操作超过最大安全数字的数字

  • Number.MAX_VALUE获取最大安全数字

九、Symbol类型

es6新增,symbol值能作为对象属性的标识符

  • 唯一性var sym = Symbol("a")
  • 基本数据类型,不能用构造函数new创建变量
  • 不可枚举 for...inObject.getOwnPropertyNamesObject.keys()都不能获取Symbol属性
  • 获取Symbol属性用Object.getOwnPropertySymbols()

十、数据类型转换

JS 是动态类型语言,变量没有类型限制,可以随时赋予任意值。变量的类型没办法在编译的时候知道,只有在运行的时候才能确定,但是运行时运算符对变量类型有要求,若不满足会自动进行转换。所有隐式转换都符合以下规则。

9.1隐式转换

  • Symbol不能隐式转换会报错,转布尔值是true
  • 其他值转Boolean : 除了null undefined 0 "" NaN其他都为true,[] {}都是true
  • 其他值转String : ["11","aa"]->"11,aa" ; []->"" ; {}->[Object Object] , 其余直接加“”
  • 其他值转Number : null false "" [] 转为0,仅包含数字的字符串或单个数字的数组转为对应数字,true转为1,其余都转为NaN
转换前类型转换前值转换后(Boolean)转换后(Number)转换后(String)
Nullnullfalse0"null"
UndefinedundefinedfalseNaN"undefined"
Booleantrue-1"true"
Booleanfalse-0"fasle"
Number111true-"111"
Number0fasle-"0"
NumberNaNfalse-"NaN"
Numberinfinitytrue-"infinity"
String""false0-
String"111"true111-
String"111abc"trueNaN-
String"abc"trueNaN-
SymbolSymbol()trueerrorerror
Functionfn(){}trueNaN"fn(){}"
Object{}trueNaN[Object Object]
Array[]true0""
Array["aaa"]trueNaN"aaa"
Array["111","aaa"]trueNaN"111,aaa"
Array[111]true111"111"

9.2强制转换

强制转换主要用Number() String() Boolean()

  • Number() :先调用valueof()再调用toString()
  • String() :先调用toString()再调用valueof()

9.3运算符转换

运算符(- * /)首先会将非Number转为Number类型,+运算符除外。运算符相关文章

+操作符:

  • 一侧为String类型,用作字符串拼接,并会优先将另一侧转换为字符串类型。
  • 一侧为Number类型,另一侧原始类型,则将原始类型转换为Number类型。
  • 一侧为Number类型,另一侧为引用类型,将引用类型和Number类型转换成字符串后拼接。