JavaScript中的基本类型和引用类型（数组、对象）

川长思鸟来 2022-01-31 08:31 332阅读 0赞

#### 基本类型值 ####

基本类型值，是只储存在栈内存中的  
String：任意字符  
Number：任意的数字  
boolean: true/false  
undefined: undefined  
null: null

#### 引用类型值 ####

当我们声明一个对象的时候，会将对象的的声明变量名存储在栈内存中，并保存对象在堆内存中的地址值，而在堆内存中保存的是对象的值。对象是储存在堆内存中，但是我们无法直接操作堆内存，我们只能通过栈内存中的地址值获取到堆内存中的值  
Object：任意对象  
Fuction：一种特别的对象（可以执行）  
Array：一种特别的对象（数值下表，内部的数据是有序的）

#### 基本类型值和引用类型值的区别 ####

以下是关于**基本类型**的声明和赋值的代码，可结合下面的**基本类型和引用类型的声明和赋值过程图**一起理解。

var a=1;//在栈内存的底部储存一个a 值为1
        var b=a;//在栈的第二个位置添加一个区域,保存的是b的值,b的值是a的值复制过来的
        var b=2;//将栈内存中 b的值改成了2，这个值是已经复制过来的，对a的值是没有任何影响的
        console.log(a,b); //结果为：1,2

**引用类型值**的声明和赋值的代码

var c={
            name:"lily"
        }
        var d=c;//把c赋值给了d，这个时候，赋值的是栈内存中的引用地址，而不是堆内存中的值
        d.name="lucy";//所以在这里修改d的内容，其实也是修改d和c相同对象的内容，他们指向的是同一个对象
        console.log(c.name,d.name);  // 结果为：lucy，lucy

![基本类型和引用类型的声明和赋值过程图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xVT2FuZEhVQU5H_size_16_color_FFFFFF_t_70]  
**通过以上的代码和图可分析并总结出基本类型和引用类型的区别：**  
1、基本类型的值是不可变的：基本类型的值修改后，相当于直接重新赋值了，而引用  
类型值是对原来的值进行增删改查。

var num=1;
        var str1="AKJnjaksdKJKJ";
        var str2=str1.toLowerCase(); //字符串的方法，将字符串全部转换为小写
        console.log(str1);  // 结果为：AKJnjaksdKJKJ
        console.log(str2);  //结果为： akjnjaksdkjkj
    
        var arr=[3,4,1,2,5];
        arr.sort();//sort是数组的方法，对数组进行排序
        console.log(arr);//引用类型值的原数据是可以被修改的,结果为：[1,2,3,4,5]

2、我们不能给基本类型添加属性和方法。

var arr2=[1,2,3,4];
        arr2.name="lily";//给引用类型值扩展了一个name的属性
        console.log(arr2.name);//结果为：lily，结果表明，我们可以给引用类型值扩展属性
    
        var str3="today is happy day";
        str3.name="laowang";//给基本类型值扩展一个属性 name
        console.log(str3.name);//结果为：undefined ，结果表明，基本类型值是不可以扩展属性和方法的

3、基本类型的比较是值的比较，而引用类型值得比较是引用地址的比较

var num1=1;
        var num2=num1;
        console.log(num1==num2)//true
    
        var obj1={};
        var obj2={};
        console.log(obj1==obj2);//false  因为两个对象的引用地址不一样

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xVT2FuZEhVQU5H_size_16_color_FFFFFF_t_70]: /images/20220131/43f6772e31aa4544a93fcad96797ecda.png