Skip to content
快速预览

数据类型介绍

✍️ cyyspring 🕒 2023-08-11 01:54:57(9 months ago) 🔗 A.前端知识整理

js 数据类型有8个,Undefined、Null、Boolean、Number、String、Object、BigInt、 Symbol

类型介绍

  • Undefined,当值未定义的时候,例如函数没有明确返回值,和声明变量没有赋值
  • Boolean,布尔类型true 和 false
  • String, 字符串类型用单引号或者双引号表示
  • Number,数字类型整数和小数
  • BigInt, 表示任意精度格式的整数
  • Null,空类型,值只有一个:null,一个对象指向为空,此时可以赋值为null
  • Object,用来表示对象
  • Symbol,可以被用作对象属性的唯一标识符,创建私有属性

基本类型有7个 string、number、bigint、boolean、null、undefined、symbol

引用数据类型(Object)常见的引用数据类型包括:

  • Array - 数组对象

  • RegExp - 正则对象

  • Date - 日期对象

  • Math - 数学函数

  • Function - 函数对象

  • 基本类型包装对象(除了 null 和 undefined 之外,所有基本类型都有其对应的包装对象)

    • String- 为字符串基本类型
    • Number- 为数值基本类型
    • BigInt- 为大整数基本类型
    • Boolean- 为布尔基本类型
    • Symbol- 为字面量基本类型等等

存储方式

  • 基础类型存储在栈内存,被引用或拷贝时,会创建一个完全相等的变量
  • 引用类型存储在堆内存,存储的是地址,多个引用指向同一个地址

TIP

函数对象参数 传递是对象在 堆中的地址

null 和 undefined

  1. 首先当我们声明一个对象的变量的时候,如果没有给其赋值最好设置为null,例如:var myObject = null

  2. 当使用双等号进行比较时,nullundefined比较(null == undefined)的结果为true,但不建议这样使用。

  3. null是JavaScript保留关键字,而undefined是全局对象的一个属性

undefined

  1. Undefined 是一个很特殊的数据类型,它只有一个值,也就是 undefined

产生undefined 的几种情况

  • 引用已声明但未初始化的变量
  • 引用未定义的对象属性;
  • 执行无返回值函数;
  • 执行 void 表达式
  • 全局常量 window.undefined 或 undefined
js
var a; // undefined
var o = {}
o.b // undefined
(() => {})() // undefined
void 0 // undefined
window.undefined // undefined

void 表达式来得到 undefined 值,因为这种方式既简并且比undefined长度少,不需要引用额外变量和属性在三目运算的时候表示不进行任何操作 x>0 && x<5 ? fn() : void 0;

undefined说明

  • undefined,是全局作用域的一个变量,undefined的最初值就是原始数据类型undefined,是一个不能被配置(non-configurable),不能被重写(non-writable)的属性,同时需要注意,因此undefined并不是一个保留字

  • undefined in window // true 可以证明undefined 是 window 的一个属性

  • undefined是全局对象的一个属性',因此在非全局作用域下可以重新赋值

js
// 打印 'foo string' PS:说明undefined的值和类型都已经改变
    (function() {
    var undefined = 'foo';
    console.log(undefined, typeof undefined)
    })()

参考链接:undefined

判断类型是否属于 undefined

  1. 下面的三种形式都可以用来判断变量是否为undefined,但是推荐使用typeof的形式。原因是,第一种方式对于空字符串、数值0、null等情况也会判断为undefined,不仅仅针对undefined;第二种方式使用'==='进行判断,但是如果变量未定义会报错,导致程序停止运行。
js
// 方式1
if(!x) {
  ...
}
// 方式2
if(x===undefined) {
  ...
}
// 方式2
if(typeof x === 'undefined') {
  ...
}

Boolean 类型

  1. 布尔类型只有两个字面值:truefalse, 并且区分大小写,只能小写表示

  2. 如果想将其他值转成布尔类型使用Boolean() 或者使用!!

  3. 有时候可以看到一些言论说数字 1是true 或者 0是false 实际只是在 if 条件语句中 这些值自动执行了Boolean() 方法的转化为布尔类型

  4. 除了 undefined、 null、 false、 ''、 0(包括 +0,-0)、 NaN 转换出来是 false,其他都是 true

常见的类型转化成boolean
数据类型转化为true转化成false
Booleantruefalse
String任何非空字符字符串length等于0(空字符)
Number非0的数字(Infinity)包括无穷大0 和 NaN
Object任何对象包括 {} 对象中没值 /new Boolean(false)null
Undefinedn/a(不使用的意思)undefined

Infinity 是true

console.log(Boolean(Infinity)) // true

Number 类型

  1. 不同进制的数字表示:在JavaScript中,我们可以使用二进制、八进制、十进制、十六进制等不同进制来表示数字。在二进制中,遇到2就进一;在八进制( js中表现形式0开头 ),遇到8就进一(0-7);在十进制中,遇到10就进一;在十六进制中( js表现形式0x开头 ),遇到f就进一((0-9)及(A-F),字母大小写不区分)。
js
var intNum = 10; // 十进制
var octalNumber1 = 070; // 八进制
var octalNumber2 = 080; // 错误的八进制只能在0-7中    
var hexNumber1 = 0xA; // 十六进制
console.log(intNum, octalNumber1, octalNumber2, hexNumber1)
打印结果
10 56 80 10

进制问题 计算的时候会自动将八进制和十六进制转换成十进制

js
var octalNumber1 = 070; // 八进制
var hexNumber1 = 0xA; // 十六进制
console.log(hexNumber1+octalNumber1) // 八进制56 + 十六进制10
打印结果
66
  1. 在JavaScript中数字类型分为整数类型浮点数值类型:整数类型包括正整数、负整数和0,例如1、-2、0等;浮点数值类型表示带有小数部分的数字,例如3.14、-0.25等。

  2. NaN:NaN是一个特殊的数字类型,表示“非数值”,当进行一些不合法的数学运算时,结果可能会得到NaN。例如,0/0的结果就是NaN。

  3. 无穷大/无穷小:在JavaScript中,我们可以使用Infinity和-Infinity来表示无穷大和无穷小。例如,1/0的结果是Infinity,-1/0的结果是-Infinity。

  4. 数字类型的最大值/最小值:JavaScript中数字类型的最大值可以使用Number.MAX_VALUE来表示,最小值可以使用Number.MIN_VALUE来表示。例如,console.log(Number.MAX_VALUE)可以输出数字类型的最大值,该值为1.7976931348623157e+308(科学计数法表示),使用toLocaleString方法对该值进行格式化输出可以得到更容易阅读的结果。同样,Number.MIN_VALUE表示数字类型的最小值,该值为5e-324(科学计数法表示)。

toLocaleString 有意思

浮点数值

  1. 浮点值内存空间是整数值的两倍,因此在特定情况下浮点值回被转成整数,例如:var a = 1.0 打印的值就是1

  2. 可以使用科学计数法来表示一些数值,表现形式就是e前面的数值乘上后面10的次幂,例如:var a = 3.12e5 相当于 3.12 * 10^5 因此 a 的结果是312000

  3. 想用科学计数法表示小数则可以写成:var a = 3.12e-5 打印结果0.0000312

  4. 不要用一个小数去求证一个小数 例如 0.1+0.2 不等于0.3的 问题

NaN -- 非数值(Not a Number)

  1. NaN 不予任何值相等包括本身例如:alert(NaN == NaN) // false

  2. 任何数值除以非数值都会返回NaN

  3. 想判断当前是不是数字用isNaN() 方法,不是数字返回true,是数字返回false,这种判断不准确因为isNaN 接受的参数其实是数字,当然如果你传入了其他类型参数你发现他依然可以执行,在规范中的解释是'Let num be ToNumber(number).' tonumber参考isnan参考

判断一个值是不是数字

typeof value === 'number' && !isNaN(value) ,因为 NaN 的typeof 是number

  1. isNaN() 也可以验证对象,但是会先调用对象的valueOf() 看返回的是不是一个数字,如果对象没有这个方法,则调用toString() 方法,如果都没有则为true,反之根据刚才两方法的返回值来做判断
js
console.log(isNaN(NaN))  // true
console.log(isNaN('w')) // true
console.log(isNaN(10))  // false
console.log(isNaN('10')) // false
console.log(isNaN(true)) // false(true会被转成1)
console.log(isNaN([]) )// false
console.log(isNaN([123]) )// false
console.log(isNaN(['123']))// false

Number() 方法

一般用于浏览器的隐式转换中都会默认调用Number([val])例如下面几种情况:

TIP

  • 数学运算,举个例子 1+1 1-1,1-'1' 这一类的计算都是Number数字隐士转换,当然相对数字加字符例如1+'1' 结果为字符串'11' 并不是数字的转换,这类最通俗的记法加号可能是数学计算可能是字符串拼接,当数字和字符串的时候最简单方式就是统一作为拼接处理减少区分类型产生的可能性,相对来说减号只能做数学算法因此是转换Number 计算

  • isNaN检测,isNaN 接受的参数其实是数字,在规范中的解释是'Let num be ToNumber(number).',这也好解释为什么isNaN(true) 为false 原本认为true 作为Boolean值应该是在isNaN下是true才对但实际isNaN(Number(true)),Number(true) 转换之后为 1 因此变成了isNaN(1) 因此为false

  • ==比较

js
console.log(Number(070))  // 56
console.log(Number(011))  // 9
console.log(Number('070'))  // 70
console.log(Number(NaN))  // NaN
console.log(Number("sss"))  // NaN
console.log(Number(undefined))  // NaN
console.log(Number(null))  // 0
console.log(Number('')) // 0
console.log(Number('0xf')) // 15

数字类型的强制转换规则

隐士转换都是调用了 Number() 方法,因此只要知道Number() 针对其他类型的转换规则,即可针对这种得到转换结果,

  • 如果是字符串

    • 如果字符串中只包含数字(或者是 0X / 0x 开头的十六进制数字字符串,允许包含正负号),则将其转换为十进制;
    • 如果字符串中包含有效的浮点格式,将其转换为浮点数值;
    • 如果是空字符串,将其转换为 0;
    • 如果不是以上格式的字符串,均返回 NaN;
  • 如果是布尔值,true 和 false 分别被转换为 1 和 0;

  • 如果是 null,返回 0,如果是 undefined,返回 NaN;

  • 如果是Symbol 无法转换为数字,会报错:Uncaught TypeError: Cannot convert a Symbol value to a number

  • 如果是BigInt 去除 'n'(超过安全数字的,会按照科学计数法处理)

  • 如果是对象转换为数字:

    • 先调用对象的 'Symbol.toPrimitive' 这个方法,如果不存在这个方法
    • 再调用对象的 'valueOf' 获取原始值,如果获取的值不是原始值
    • 再调用对象的 'toString' 把其变为字符串
    • 最后再把字符串基于 'Number' 方法转换为数字

注对 Symbol.toPrimitive 说明

在JavaScript中,如果想要将对象转换成基本类型时,也就是所谓的拆箱时,会调用toPrimitive()

xxxSymbol.toPrimitive{}

  • hint:'number' / 'string' / 'default'
  • number:获取当前对象的数字类型的原始值
  • string:获取当前对象的字符串类型的原始值
  • default:根据操作获取数字或者字符串类型的原始值

进一步说明 Symbol.toPrimitive

可以参考Symbol.toPrimitive

  1. 转换 {} 为 Numberconst obj = {}console.log(Number(obj)) 结果是NaN
  • 先调用Symbol.toPrimitive,console.log(obj[Symbol.toPrimitive]) 结果是undefined
  • 调用console.log(obj.valueOf()) 结果是 {}
  • 调用 console.log(obj.toString()) 结果[object Object] 任何非数字字符串转换结果都是NaN,即相当于实际执行为Number('[object Object]')
  1. 转换数组为Number 为例依旧是经过下面几次得到结果
js
const arr = [10]
console.log(arr[Symbol.toPrimitive]); // undefined
console.log(arr.valueOf()); // [ 10 ]
console.log(arr.toString()); // "10"
console.log(Number("10")); // 10
// --------------分割 --------------------------------
const arr = [10, 20]
console.log(arr[Symbol.toPrimitive]) // undefined
console.log(arr.valueOf()) // [ 10, 20 ]
console.log(arr.toString()) // "10,20"
console.log(Number('10,20')) // NaN
  1. 转换Date,当先查是否有Symbol.toPrimitive 属性方法此时发现有就开始调用,调用时候传参,如果想转换的为number类型,此时传参为number即可
js
const date = new Date(2015, 1, 1)
console.log(date[Symbol.toPrimitive]) // 存在这个属性
console.log(date[Symbol.toPrimitive]('number')) // 1422720000000
  1. 自定义对象重写Symbol.toPrimitive 方法
js
let obj = {
		[Symbol.toPrimitive](hint) {
				let result;
				switch (hint) {
						case 'number':
								result = 0;
								break;
						case 'string':
								result = JSON.stringify(obj);
								break;
						default:
								result = "";
				}
				return result;
		}
};

parseInt([val],[radix])

  1. 如果是整数正常解析

  2. [val]值必须是一个字符串,如果不是则先转换为字符串;然后从字符串左侧第一个字符开始找,把找到的有效数字字符最后转换为数字「一个都没找到就是NaN」;遇到一个非有效数字字符,不论后面是否还有有效数字字符,都不再查找了

  3. [radix]的范围:2~36 不在这个范围内,最后结果都是NaN[radix]不写或者写零:默认值是10「特殊:如果[val]字符串是以0x开始的,默认值是16」

  4. 根据上面的结论所以可以得出为什么 'parseInt' 为什么可以把小数转成整数,例如1.1,从1开始找到后面发现点不是数字所以后面全丢弃得到 1

  5. 字符串的情况下会把前缀0舍去,十六进制是不识别的,要注意和'Number'不同null 和 空字符都是 NaN

  6. 想让parseInt 识别十六进制 和八进制字符串可以这么写parseInt('AF',16) 第二个参数表示几进制

js
console.log(parseInt(070))   // 56 => 070 数字时候自动 转成 56
console.log(parseInt('070'))   // 70 => 070 是字符出因此去掉0  70
console.log(parseInt('000000070'))   // 70 => 000000070 是字符出因此去掉0  70
console.log(parseInt('-070   00')) // -70 
console.log(parseInt(null)) // NaN
console.log(parseInt('AF')) // NaN
console.log(parseInt('AF',16)) // 175
console.log(parseInt('070',8)) // 56
console.log(parseInt("g10"));   //NaN

parseFloat([val])

  1. 跟parseInt() 类似,只不过解释所有里面浮点类型,不同点没有第二个参数,无法把十六进制和八进制字符串转换,十六进制字符串统一被转成 0
  2. 注意是字符串格式的十六进制 并不是 十六进制的数字
js
console.log(parseFloat(0x1A));  // 26
console.log(parseFloat("10"));//10
console.log(parseFloat("10afrswfdsf"));//10
console.log(parseFloat("g10"));//NaN
console.log(parseFloat("1fds0"));//1
console.log(parseFloat("10.98"));//10.98
console.log(parseFloat("10.98fdsfd"));//10.98

var hexString = "0x1A"; // 十六进制字符串
var octalString = "0123"; // 八进制字符串

var parsedHex = parseFloat(hexString);
var parsedOctal = parseFloat(octalString);

console.log(parsedHex); // 输出: 0
console.log(parsedOctal); // 输出: 123

// -----------------------
//  parseInt 第二个参数的范围是 2-36 在字符串中,找到所有符合二进制的内容 -> '10' ,因为3不是二进制中的因此到3截至了
//  把'10'看做二进制,转换为十进制?  如何把其它机制的值转换为十进制 “按权展开求和”
//    个位数权重0  十位数权重1  百位数权重2 依次类推 现在10 其中十位是 1 十位的权重为1,对应的公式
//    1*2^1 + 0*2^0 => 2  2的指数对应二进制当前位置1和0 前面乘法的是对应权重
console.log(parseInt('1030px', 2));
// ---------------------
let arr = [27.2, 0, '0013', '14px', 123];
// 等到结果原因要知道map 数组回调方法是可接受三个参数,parseInt 默认是两个参数此时其实是
// parseInt(number,index) 因此会对应位置进制转换
arr = arr.map(parseInt); //  [27, NaN, 1, 1, 27]

判断是否为整数 -- Number.isInteger()

  1. 'Number.isInteger()' 方法用来判断给定的参数是否为整数
  • 举个例子
Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger(-100000);   // true

Number.isInteger(0.1);       // false
Number.isInteger(Math.PI);   // false

数字类型转化 总结

总结:

想要转整数用parseInt(),想要转小数用parseFloat()想要转数字:Number();要比上面的两种方式严格

关于trunc方法说明

在JavaScript中,trunc是一个内置函数,用于截断(去除)一个数字的小数部分,返回整数部分。

trunc函数用于解决以下问题:

  1. 去除小数部分:当你需要保留一个数字的整数部分,并丢弃其小数部分时,可以使用trunc函数。它会将数字向零方向截断,返回最接近但小于等于给定数字的整数。

  2. 处理数字数据:在某些情况下,你可能需要处理数字数据,并且只关注其整数部分。例如,在计算货币金额时,你可能希望截断小数部分,以获得最接近的整数金额。

下面是trunc函数的示例用法:

javascript
console.log(Math.trunc(3.14));  // 输出: 3
console.log(Math.trunc(-3.14)); // 输出: -3

请注意,trunc函数是ES6中引入的,因此如果你在较旧的JavaScript版本中使用它,可能会遇到兼容性问题。在这种情况下,你可以使用其他方法来实现相同的功能,例如Math.floorparseInt函数。

字符串String

  1. toString()可以将所有的的数据都转换为字符串,调用自身 toString 方法,但是要排除 nullundefined,也就是falsetrue 例如 true.toString(),包含在内,也可以做进制转换例如:
js
二进制:.toString(2);   
八进制:.toString(8);
十进制:.toString(10);
十六进制:.toString(16);
  1. String() 可以将 nullundefined转换为字符串,但是没法转进制字符串转换规则
  • 基本类型拿字符串包起来,举个例子String(true) => 结果 'true'
  • 对象则是调用 Symbol.toPrimitive -> valueOf -> toStringObject.prototype.toString 举个例子String(new Object) => (new Object).toString() =>打印结果 [object Object]

Sysmbol 唯一值类型

  1. ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型

  2. Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型

  3. Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

  4. 很多JS底层的处理机制,就是基于这些属性方法实现的 Symbol.hasInstance\Symbol.toStringTag\Symbol.toPrimitive\Symbol.iterator...

给对象属性设置sysmbol 值

js
const obj = {
    name: 'w',
    [Symbol()]: 'symbol',
}
// 打印是undefined ,原因是因为当前打印的symbol key
// 和声明的symbol 毫无关系
console.log(obj[Symbol()])

// ---------------想获取方法一------------------
const key = Symbol()
const obj = {
    name: 'w',
    [key]: 'symbol',
}
// 想获取symbol 可以将symbol 作为统一的变量提取
console.log(obj[key])

// ---------------想获取方法二------------------
const obj = {
    name: 'w',
    [key]: 'symbol',
}
let symbolKeys = Object.getOwnPropertySymbols(obj); //获取当前对象所有Symbol类型的私有属性,结果数组
symbolKeys.forEach(key => {
    console.log(obj[key]);
});

BigInt

JS中在进行数学运算的时候,如果计算的数值超过最大/最小安全数字,计算出来的结果很可能是不准确,举个例子查看数字最大安全值Number.MAX_SAFE_INTEGER和 最小安全值的方法Number.MIN_SAFE_INTEGER

js
const maxNumber = Number.MAX_SAFE_INTEGER
console.log(maxNumber)

const add = maxNumber + 10
console.log(add)
  • 上面的打印结果在我的电脑如下:
9007199254740991
9007199254741000

可以发现当超过了最大精度时候计算开始出现错误,为了避免这种事情发生使用BigInt大数类型:数字后面加个n即使大数类型

js
const add = BigInt(maxNumber) + 10n
console.log(add)

打印结果9007199254741001n当在数字后面加n时候即转换为大数类型

实际开发过程服务器端数据库存储,是有longInt类型,服务器返回给客户端的值超过安全数字的一般会将数字返回字符串作为参数返回,但是如果前端想要计算此时就不能是单纯转换为数字类,需要BigInt,当计算完成后在将转换成字符串给到后台

Released under the MIT License.