JavaScript基本数据类型和引用数据类型的区别？

最新推荐文章于 2022-01-12 11:22:05 发布

Damao97

最新推荐文章于 2022-01-12 11:22:05 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_41258179/article/details/99762275

JS 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析JavaScript中的数据类型，包括基本数据类型如Number、String、Undefined等，以及引用数据类型如Object、Array、Function等。详细对比了基本数据类型与引用数据类型的特性，如值的可变性、存储方式及赋值机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js数据类型有哪些？

基本数据类型：Number、String、Undefined、Null、Boolean、Symbol ( es6 ）
引用数据类型：Object（Array、Function、Date、Json）

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

首先来看这样一段代码

 var a =  {
   data: {
     name: 1
   }
 };
 var b = {};
 b.data = a.data;
 b.data.name = 5;
 console.log(a.data.name);
a.data = {name: 9};
console.log(b.data.name);

你能说出输出的是什么吗？

#基本数据类型

基本数据类型的值是不可变的
基本类型的比较是值的比较，只要它们的值相等就认为他们是相等的

var a = 1; 
var b = 1; 
console.log(a === b);

基本数据类型不可以添加属性和方法

var p = "change";
p.age = 29;
p.method = function(){
    console.log(name)  
 };
console.log(p.age);//undefined
console.log(p.method)//undefined

基本数据类型是存放在栈区的：存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问；

假如有以下几个基本类型的变量：var name = “jozo”;var city = “guangzhou”;var age = 22;那么它的存储结构如下图：
在这里插入图片描述
栈区包括了变量的标识符和变量的值

基本数据类型的赋值是简单赋值（传值）

基本数据类型的赋值（=）是在内存中新开辟一段栈内存，然后再把再将值赋
值到新的栈中。例如

var a = 10;
var b = a;
a ++ ;
console.log(a); // 11
console.log(b); // 10

在这里插入图片描述

#引用数据类型

引用类型的值是可以改变的

var a = [1,2,3];
a[1] = 5;
console.log(a); //[1,5,3]

引用类型可以添加属性和方法

var person = {};
person.name = "change";
person.say = function(){
    alert("hello");
 }
 console.log(person.name);//change
 console.log(person.say)//function(){alert("hello");
 }

引用类型的比较是引用的比较，是看其的引用是否指向同一个对象(地址是否相同)

var a = [1,2,3];
var b = [1,2,3];
console.log(a === b); // false

虽然a和b看起来一样，但是他们保存在栈区中的指向堆内存的地址却是不同的，所以两个对象不相等

引用类型是同时保存在栈区和堆区中的：变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。每个空间大小不一样，要根据情况进行特定的分配。

例如有以下几个对象：var person1 = {name:“change1”};var person2 = {name:“change2”}; var person3 = {name:“change3”}; 这三个对象在内存中保存的情况如下图

在这里插入图片描述
5. 引用类型的赋值是对象引用（传址）
也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响。

var a = {}; // a保存了一个空对象的实例 
var b = a; // a和b都指向了这个空对象 
a.name = 'jozo'; 
console.log(a.name); // 'jozo' 
console.log(b.name); // 'jozo' 
b.age = 22; 
console.log(b.age);// 22 
console.log(a.age);// 22 
console.log(a == b);// true

在这里插入图片描述

var a = [1,2,3];
var b = a;
b = [11, 12, 13];//b指向了另一个内存地址，与a断开关联
a[0] = 2;
console.log(b[0]) //11，b的值不随a的值改变而改变

看完这些之后你是否能说出上边那段代码的输出？

 var a =  {
   data: {
     name: 1
   }
 };
 var b = {};
 b.data = a.data; 
 b.data.name = 5;
 console.log(a.data.name); //5
a.data = {name: 9}; 
console.log(b.data.name); //5