JS中的数据类型分为 简单数据类型(原始数据类型)和 复杂数据类型(引用数据类型)。
简单数据类型:Undefined、Null、Boolean、Number、String、Symbol、Bigint。
复杂数据类型:Object。
下面来对它们进行针对性介绍。
1. Undefined
Undefined类型只有一个值,就是特殊值 undefined 。如果声明了一个变量但没有初始化(为变量赋值)时,变量的值就是 undefined ,相当于默认给未初始化的变量赋予 undefined 值。
在ECMA标准中特殊值 undefined 的目的是为了正式明确空对象(null)和未初始化变量的区别。
2. Null
Null类型只有一个值,就是特殊值 null ,用来表示空对象。
3. Boolean
Boolean类型有两个字面值,分别是 true 和 false 。特别需要注意的是这两个值是区分大小写的。
4. Number
Number类型用来表示JS中的整数和浮点数,可以表示的最大安全数字为 “2的53次方-1” 。我们在声明Number类型时可以采用不同的字面量格式,如下所示:
// 最基本的十进制,可以直接写出来
let num1 = 66; //整数66
// 0b开头表示二进制
let num2 = 0b10; //二进制的2
// 0开头表示八进制,ES6中通过前缀0o表示
let num3 = 070; //八进制的56
let num4 = 0o70; //八进制的56
// 0x开头表示十六进制
let num5 = 0xA; //十六进制的10
// 需要注意的是前缀之后的数字不能超过对应进制应有的范围,且不是所有的浏览器都支持如此表示。
Number类型中的特殊数值如下所示:Infinity(正无穷)、-Infinity(负无穷)、NaN(非法数值,用于表示本来要返回的数值操作失败了,而不是抛出错误)
// 例如0除0就会返回NaN
console.log(0/0); // NaN
// 所有涉及NaN的操作始终返回NaN
console.log(NaN/10); // NaN
// NaN不等于包括NaN在内的任何值
console.log(NaN == NaN); // false
// 可以通过Object.is() 来进行NaN的相等判定
console.log(Object.is(NaN, NaN)); // true
// ECMAScript提供了 isNaN() 函数判断传入的参数是否不是数值,任何不能转换为数值的值都会导致这个函数返回 true
console.log(isNaN(NaN)); // true
console.log(isNaN(10)); // false,10是数值
console.log(isNaN("10")); // false,可以转换为数值10
console.log(isNaN("blue")); // true,不可以转换为数值
5. String
String(字符串)数据类型用于表示字符序列,可以使用双引号、单引号、反引号标示。需要注意的是以某种引号开头就要以该种引号结尾,否则会导致语法错误。
6. Symbol
Symbol(符号)是ES6 引入的一种新的原始数据类型,表示独一无二的值。常用于确保对象属性使用唯一标识符,不会发生属性冲突。可以使用 Symbol() 函数或 Symbol.for() 方法创建符号。
(1)Symbol() 函数接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示或转为字符串时容易区分,参数相同的符号实例不相等。
// 使用Symbol()创建的符号实例不可以共享和重用
let sym1 = Symbol();
let sym2 = Symbol();
console.log(sym1 == sym2); // false
let sym3 = Symbol('lala');
let sym4 = Symbol('lala');
console.log(sym3 == sym4); // false
(2) Symbol.for() 方法可以用一个字符串作为键,在全局符号注册表中创建并重用符号。
// 使用symbol.for()创建的符号实例可以共享和重用
let sym5 = Symbol.for('haha');
let sym6 = Symbol.for('haha');
console.log(sym5 === sym6); // true
// 即使采用相同的符号描述,使用Symbol()定义的符号和Symbol.for()定义的符号也不相等
let sym7 = Symbol('dada');
let sym8 = Symbol.for('dada');
console.log(sym5 === sym6); // false
(3) 可以使用 Symbol.keyFor() 来查询全局注册表,该方法接收符号,返回该全局符号对应的字符串键。如果查询的不是全局符号,则返回 undefined 。
// 创建全局符号
let a = Symbol.for('yaya');
console.log(Symbol.keyFor(a)); // yaya
// 创建普通符号
let b = Symbol('gaga');
console.log(Symbol.keyFor(b)); // undefined
// 如果传入的不是符号,则会抛出错误
console.log(Symbol.keyFor(666)); // TypeError: 666 is not a symbol
(4) Symbol 值作为对象属性名时,不能用点运算符进行操作,只能用[]方括号。
let s1 = Symbol('nana');
let s2 = Symbol('wawa');
let obj = {
//以对象字面量使用Symbol时,必须在Symbol两侧加中括号
[s1]: 'hello nana',
}
//为对象赋Symbol属性或取Symbol属性值时必须使用中括号
obj[s2] = 'hello wawa';
console.log(obj[s1]) // hello nana
console.log(obj) // {Symbol(nana): 'hello nana', Symbol(wawa): 'hello wawa'}
// 如果使用点运算符取值
console.log(obj.s1) // undefined
// 如果使用点运算符赋值
obj.s2 = 123456;
console.log(obj.s2) // 123456
7. BigInt
BigInt可以表示任意大的整数,它提供了一种方法来表示大于 “2的53次方-1” 的整数。这原本是 Number中可以表示的最大数字。可以用在一个整数字面量后面加 n 或者调用函数 BigInt()的方式定义一个 BigInt 。
const num1 = 9007199254740991n;
const num2 = BigInt(9007199254740991);
(1)当使用 BigInt 时,带小数的运算会被取整。
(2)BigInt 和 Number 不是严格相等的,是宽松相等的。
(3)Number 和 BigInt 可以进行比较。
(4)[更多详情见MDN](BigInt - JavaScript | MDN (mozilla.org))
8. Object
Object(对象)类型,是一种引用数据类型,包括Object、Array、Function等等,可以通过 new 操作符后跟对象类型的名称来创建。
const obj1 = new Object(); //对象
const obj2 = new Array(); //数组
const obj3 = new Function(); //函数
//...
拓展:
简单数据类型(原始数据类型)和复杂数据类型(引用数据类型)的区别:
(1)首先了解下JS中的内存空间,内存分为栈内存和堆内存。对于原始数据类型,栈内存中保存的是实际值。对于引用数据类型,栈内存中保存的是地址值,根据地址值可以访问到保存在堆内存中的具体值。
(2) 原始数据类型是按值访问的,原始数据类型的值储存在栈上,当把一个原始变量传递给另一个原始变量后,这两个原始变量互不影响。
let a = 123;
let f = a;
f = f + 1;
console.log(a); // 123
console.log(f); // 124
(3)引用数据类型是按地址访问的,把引用变量的名称(内存地址)储存在栈中,把实际值储存在堆中,栈中的内存地址指向堆中的实际对象,当把引用类型的值赋值给另一个变量时,赋的其实是指向实际对象的内存地址,此时两者指向的是同一个实际对象。如果改变其中一个变量的值,另一个变量也会跟着改变。
const obj1 = {name: 'Tony', age: 19};
const obj2 = obj1;
obj2.name = 'liushufen';
console.log(obj1); // {name: 'liushufen', age: 19}
console.log(obj2); // {name: 'liushufen', age: 19}
本篇文章来源于对《JavaScript高级程序设计(第4版)》和互联网中相关知识的消化吸收,介绍并不完全,只介绍了常见知识点。作为一个前端新人,希望以后可以继续学习,继续进步,拖了半年,终于完成了第一篇博客的写作,欢迎各位朋友指正,如果您觉得有些许帮助,欢迎点赞评论😄。