探索JavaScript的八大数据类型:你还记得吗?

发表时间: 2023-08-04 10:05

如今前端的火爆程度超出开发人员的想象,学习前端之前,我们首先要了解,前端的“三剑客”——HTML、CSS、JavaScript。

HTML——超文本标记语言

CSS——层叠样式表

JavaScript——嵌入式脚本语言

HTML+CSS为网页布局基础,JavaScript不只是开发网页特效和渲染数据的重要内容,在学习前端开发的后期,大量使用算法和框架的时候,对JavaScript基础的考验也是很多的。

那么我们这篇文章就是带大家了解一下JavaScript基础概念——数据类型,以及基本数据类型和引用数据类型存储的区别。

在JavaScript中,我们可以分成两种类型:

基本数据类型(7种):Number、String、Boolean、Null、 Undefined、Symbol(ES6),BigInt(ES11)这些类型可以直接操作保存在变量中的实际值。

引用数据类型(1种):Object。

一、基本数据类型

01 Number类型

数字类型,包含整数和浮点数(浮点数数值必须包含一个小数点,且小数点后面至少有一位数字)两种值。

NaN是一个特殊的数字类型,表示Not A Number。

特点:

1.JS进行浮点元素运算可能得到一个不精确的值。

0.1+0.2; //0.300000004;

2.NaN与任何数进行运算得到的结果都是NaN。

3.NaN不大于不小于不等于任何数,包括它本身。

NaN == NaN //false


02 String类型

字符串类型,字符串可以使用双引号(")、单引号(')或反引号(`)表示。

特点:

1.在JS中字符串需要使用引号引起来,单引号和双引号不能混用。

2.引号不能嵌套,可以使用\进行转义。

03 Boolean类型

布尔类型,该类型只有两个值,true和false。主要用来做逻辑判断

特点:

1.隐试转换:true会转换成1,false会转换成0。

1 + true; // 2 true会被隐式转化为1

2.0; NaN; null; undefined 都会转换成false。

04 Null类型

空指针对象,只有一个值。null类型也是空的对象引用。

特点:

1.typeof检测, null 值时会返回 object。

typeof null; //object

2.undefined值派生自null值。出现场景:对象不存在时。

undefined==null; //true

05 Undefined类型

只有一个值,即undefined值。

特点:

1.使用var声明了变量,但未给变量初始化值,那么这个变量的值就是undefined。

var un;

console.log(un); //undefined

06 Symbol类型

Symbol 指的是独一无二的值,这是ES6新增的数据类型。每个通过 Symbol() 生成的值都是唯一的。

特点:

1.Symbol 类型的对象永远不相等,即便创建的时候传入相同的值。

let symbol1 = Symbol();

let symbol2= Symbol();

console.log(symbol1==symbol2); //false

2.不支持语法:“new Symbol()”。

07 BigInt类型

Javascript 中的任意精度整数,可以安全存储和操作大整数。即使超出 Number 能够表示的安全整数范围。是 chrome 67中的新功能。

我们前面提到的number数据类型大于或等于2的1024次方的数值,JavaScript 无法表示,会返回Infinity。ES2020 引入了一种新的数据类型 BigInt,来解决这个问题。BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。

特点:

1.BigInt 类型的数据必须添加后缀n。

100; //number类型

100n;//Bigint类型

2.BigInt 与普通整数是两种值,它们之间并不相等。

100 == 100n; //false

3.BigInt 并不是一个构造函数,所以,不能使用 new BigInt() 的方式来构建实例。

二、引用数据类型

Object类型

我们将在JS中除了基本数据类型以外的都称为对象类型。里面包括我们常用的对象(Object)、数组(Array)、函数(Function),以及特殊类型正则(RegExp)和日期(Date)等......

ECMAjavascript中的对象其实就是一组数据和功能的集合。

特点:

引用数据类型是保存到堆内存中的,每创建⼀个新的对象,就会在堆内存中开辟出⼀个新的空间。

三、基本数据类型和引用数据类型的区别

基本数据类型

基本数据类型是指存放在栈(stack)中的简单数据段。

特点:

  • 数据大小固定。
  • 占用空间小。
  • 按值存放,按值访问。

var a = 10;

var b = a; //把a的值赋值给b

b=20;

console.log(a); //10

console.log(b);//20

a的值为一个基本类型,是存储在栈中。将a的值赋给b,虽然两个变量的值相等,但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程:

引用数据类型

引用类型是存放在堆(heap)内存中的对象。

特点:

  • 数据大小不固定。
  • 占据空间大。
  • 栈中存放的是一个指针,该指针指向堆中该实体起始地址

var obj1 = {};

var obj2 = obj1;

obj2.name = '尚硅谷';

console.log(obj1.name); //尚硅谷

obj1是一个引用数据类型,实体起始地址存储在堆中。赋值操作,是将堆内存对象在栈内存的引用地址复制了一份给了obj2,最终他们共同指向了同一个堆内存对象,所以更改obj2会对obj1产生影响。

下图演示了引用类型赋值的过程:

总结

JavaScript是弱类型语言,开始的时候并不知道变量是什么类型,必须通过存储的具体的值才能判断变量的类型。

1.数据类型不同,内存分配不同。

简单类型的值存放在栈中,在栈中存放的是对应的值。

引用类型对应的值存储在堆中,在栈中存放的是指向堆内存的地址。

2.由于内存分配不同,复制变量时结果不同。

简单类型赋值,是生成相同的值,两个对象对应不同的地址。

复杂类型赋值,是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象。