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

www.www

已于 2024-04-16 18:37:32 修改

阅读量363

点赞数 5

文章标签：前端 javascript

于 2024-04-15 22:32:48 首次发布

本文链接：https://blog.csdn.net/qq_39454432/article/details/137797871

版权

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

基本数据类型
引用数据类型
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 的区别

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

Map 与 Object 的区别

相同点
二者都是以key-value形式对数据存储
不同点
1. key的数据类型范围不同
  - Object可以作为key的有String,Number,symbol
  - Map：目前js的数据类型都可以作为key
2. key的顺序不同
  - Object：如果对象的key中同时存在String,Number,Symbol,通过Object,keys得到的顺序是Number(升序)–>String(symbol)(以创建的顺序)
  - Map：key按声明的顺序进行排序
3. 创建方式不同
  - 创建 Object 实例
```
const obj1=new Object()
const obj2={}
const obj3=Object.create({})
```
  - 创建 Map 实例
```
const map=new Map()
```
4. key值调用的方式不同
  - 通过key取值:
    
    Object：可通过 . 或 []
    Map：只能用原生的get方法进行调用;
  - 判断是否有某个属性
    
    Object: 'a' in obj;判断obj中是否有a这个属性;
    Map: map.has('a');判断map中是否有a这个属性;
5. 设置属性的方式不同
  - Object设置属性：
    
    obj.a = 1;
    obj[‘a’] = 1;
  - Map设置属性：
    
    Map类型中js目前存在的数据类型均可以作为key;
    map.set(‘a’,1)
6. 删除key的方式不同
  
  Object删除属性: 自身没有删除属性的方法;一般删除对象属性的方式:
  delete obj.a
  Map删除属性:
  map.delete('a') ----删除a属性;
  map.clear() ----删除所有的属性;
7. 获取size
  
  Object: 通过Object.keys(obj) 返回一个数组,通过获取数组的长度来获取size;
  Map: 自身带有size属性：map.size，size属性无法修改;
8. 迭代
  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
```
9. JSON操作
  Object: 支持JSON.stringify和JSON.parse的操作;
  Map: 不支持;
10. 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 的区别

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

WeekMap 与 Map 的区别

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