前端数据类型大全及其区别总结

  • 基本数据类型
  • 引用数据类型
  • Null 与 Undefined 的区别
  • Map 与 Object 的区别
  • Set 与 Array 的区别
  • WeekMap 与 Map 的区别
  • WeekSet 与 Set 的区别


基本数据类型

  • Number（数值类型），用于表示数字，包括整数和浮点数。
  • String（字符串类型），用于表示文本，由字符组成，可以使用单引号、双引号或反引号表示。
  • Boolean（布尔类型），表示逻辑值，只有true和false两个值。
  • Null，表示空的对象引用。
  • Undefined，表示未定义的变量或属性。
  • Symbol（ES6引入），表示唯一的标识符。
  • BigInt（ES10引入），用于表示大整数，解决JavaScript中Number类型表示大整数的限制。

引用数据类型

  • Object（对象），由键值对组成，可以包含多个属性和方法。
  • Array（数组），由元素组成的列表，元素可以是任意类型的数据。
  • Function（函数），作为第一类对象，可以在程序中作为参数传递或定义其他函数。
  • Date（日期对象），用于处理日期和时间。
  • Map和Set等，用于存储键值对或唯一元素的集合。
  • WeakMap和WeakSet（ES6引入），WeakSet主要用于临时存储对象的集合,以便在不需要时自动释放内存；WeakMap主要用于保存对象的附加数据，可以避免内存泄露的问题。

Null 与 Undefined 的区别

  1. 意义不同
  • null 表示一个值被定义了，定义为“空值”
  • undefined 表示根本不存在
  1. 转换结果不同：undefined转数值为NaN，null转数值为0
  2. 数据类型不同

Map 与 Object 的区别

  • 相同点
    二者都是以key-value形式对数据存储
  • 不同点
  1. key的数据类型范围不同
  • Object可以作为key的有String,Number,symbol
  • Map：目前js的数据类型都可以作为key
  1. key的顺序不同
  • Object：如果对象的key中同时存在String,Number,Symbol,通过Object,keys得到的顺序是Number(升序)–>String(symbol)(以创建的顺序)
  • Map：key按声明的顺序进行排序
  1. 创建方式不同
  • 创建 Object 实例
const obj1=new Object()
const obj2={}
const obj3=Object.create({})
  • 创建 Map 实例
const map=new Map()
  1. key值调用的方式不同
  • 通过key取值:

Object：可通过 . 或 []Map：只能用原生的get方法进行调用;

  • 判断是否有某个属性

Object: 'a' in obj;判断obj中是否有a这个属性;
Map: map.has('a');判断map中是否有a这个属性;

  1. 设置属性的方式不同
  • Object设置属性：

obj.a = 1;
obj[‘a’] = 1;

  • Map设置属性：

Map类型中js目前存在的数据类型均可以作为key;
map.set(‘a’,1)

  1. 删除key的方式不同

Object删除属性: 自身没有删除属性的方法;一般删除对象属性的方式:
delete obj.aMap删除属性:
map.delete('a') ----删除a属性;
map.clear() ----删除所有的属性;

  1. 获取size

Object: 通过Object.keys(obj) 返回一个数组,通过获取数组的长度来获取size;
Map: 自身带有size属性：map.size，size属性无法修改;

  1. 迭代
    Map: 拥有迭代器，可以通过for-of forEach去直接迭代元素，遍历顺序是确定的
    Object: 并没有实现迭代器，需要自行实现，不实现只能通过for-in循环去迭代，遍历顺序是不确定的
    判断一个数据是否可以迭代可通过以下方式：
typeof [][Symbol.iterator] //function
	typeof new Map()[Symbol.iterator] //function
	typeof {}[Symbol.iterator] //undefined
	typeof 1[Symbol.iterator] //undefined
  1. JSON操作
    Object: 支持JSON.stringify和JSON.parse的操作;
    Map: 不支持;
  2. this不同
const f = function(){ console.log(this) }
	Object:
	const obj = {fn:f}
	Map:
	const map = new Map()
	map.set('fn',f)
	
	obj.fn() //指向obj
	map.get('fn')() //取决于函数的调用者;

Set 与 Array 的区别

  1. 初始化方式不同：
  • Set使用new Set()初始化
  • Array使用[]或new Array()初始化。
  1. 存储数据重复性：
  • Array存储重复的数据
  • Set只能存储唯一的值（不允许重复）。
  1. 长度和成员管理方式不同：
  • Array的长度可以动态变化，可以通过索引访问和修改元素
  • Set的长度是固定的，且成员都是唯一的，不能通过索引访问或修改。
  1. 方法和属性不同：
  • Array有许多方法如push(), .pop(), .splice()等
  • Set只有一些基本的方法如add(), .delete(), .has()等。

WeekMap 与 Map 的区别

  1. Map 和 WeakMap 都属于 ES6 中新增的数据类型，用于存储键值对。
  2. Map 是一个普通的键值对集合，可以使用任何类型的值作为键或值，包括基本类型和对象。而 WeakMap 的键必须是对象，值可以是任何类型。
  3. Map 中的键值对是强引用关系，即只要 Map 中的键或值存在，Map 对象就会一直保留这个键值对，不会被垃圾回收。而 WeakMap 中的键值对是弱引用关系，如果 WeakMap 的键不再被引用，那么这个键值对就会被自动删除。
  4. 由于 WeakMap 中的键是弱引用，所以 WeakMap 对象的 size 属性无法访问，也无法使用 forEach() 和 clear() 等方法。
  5. WeakMap 对象的主要应用场景是需要与另外一个对象关联，并且不想影响到这个对象的垃圾回收机制，以避免内存泄漏。例如，将对象存储在 WeakMap 中，可以确保这个对象只在其他地方仍然被引用时才被保留，否则会自动被删除，从而避免内存泄漏。

WeekSet 与 Set 的区别

  1. WeekSet的只能存储引用类型的值，不能存放普通类型的值；Set都可以
  2. WeekSet里的值都是弱引用，垃圾回收机制运行前后，Set内成员数量可能不一样，只要没有其他（不考虑WeekSet）变量或属性引用，这个对象就会被垃圾回收
  3. WeekSet不能够被遍历，也无法获取全部成员