对象&基本数据类型和引用数据类型存储方式的区别(栈和堆)

92 阅读5分钟

对象

说明

含义:

对象(object)是js里的一种数据类型,可以理解为无序的数据的集合。

对象有两大特性:

1、属性:信息或叫特征(名词)--一般为固定数值;

2、方法:功能或叫行为(动词)--一般为函数。

特点:

可以详细的描述某个事物;

对象属性和方法是用大括号括住的。

对象的使用

1、声明对象

语法:

let 对象名={属性名: 属性值, 方法名: 函数}

1image-20220405220201095

----属性名和方法名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等;

注意事项:
  1. 属性名和属性值之间、方法名和函数之间用:号连接;
  2. 属性和属性、属性和方法、方法和方法之间用逗号隔开;

2、调用对象

调用对象属性/方法:
特点:

返回值为属性名或方法名后面的属性值或方法值(即函数本身)。

  1. 对象名.属性名/方法名;

    1image-20220405220733307

  2. 对象名['属性名/方法名']。

    2image-20220405220822758

    注意: 必须用引号包裹,不然里面的属性名就是变量的意思。

调用对象方法里的函数:
特点:

返回值为return的值,如果没有定义return返回值,则返回undefined。

1、对象名.方法名(实参);

image-20220405221257563

----对象里方法的内容一般为匿名函数。

注意: 调用对象方法的时候,方法名后面一定要加上小括号。

2、对象名['属性名/方法名'] ()。

例子:

let a = {
            username'su',
            arrfunction (b) {
                console.log(b)
            }
        }
        console.log(a.username)//'su'
        console.log(a['username'])//'su'
        console.log(a.arr(10))//10

操作对象

1、新增对象属性

实际上是调用对象属性或方法,然后对他们进行操作。

  1. 对象名.新的属性名=新值;
  2. 对象名['新的属性名']=新值;
  3. 对象名.新的方法名=新函数。

例子:

  <script>
        let a = {
            username: 'su',
            arr: function (b) { console.log(b) }
        }

        // 1. 对象名.新的属性名=新值;
        a.age = 23;

        // 2. 对象名['新的属性名']=新值;
        a['home'] = 'meizhou'

        // 3. 对象名.新的方法名=新函数。
        a.arr1 = function () { console.log('我是新函数') }

        console.log(a)


    </script>

效果:

image-20220405223548971

注意: 无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。

2、重新赋值对象属性或方法

重新赋值其实和新增对象属性或方法一样的写法,只需要把名字改成需要重新赋值的属性名或方法名即可。

如:

image-20220405224340020

3、查询对象--即调用对象

4、删除对象

调用对象属性或方法,然后在调用前面加上单词’delete‘即可删除所调用的属性或方法。

  1. delete 对象名.属性名;
  2. delete 对象名['属性名'];
  3. delete 对象名.方法名。

例子:

<script>
        let a = {
            username: 'su',
            age: '23',
            arr: function (b) { console.log(b) }
        }

        // 1. 删除username属性
        delete a.username;

        // 2.删除age属性
        delete a.age;

        // 3. 删除arr方法
        delete a.arr;


        console.log(a)


    </script>

删除前:

image-20220405225630244

删除后:

image-20220405225744910

遍历对象

介绍:

对象没有像数组一样的length属性,所以无法确定长度;

对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标。

语法:

for(let k in obj){ 代码 }---快捷键(forin);

  1. k是获得对象的属性名或方法名;
  2. 对象名[k]:是获得属性值或方法值(函数);
  3. obj是对象名。

例子:

<script>
        let obj = {
            uname: 'andy',
            age: 18,
            sex: '男',
            arr: function () { return 0 }
        }

        // 对对象obj进行遍历,对对象里的内容逐个进行操作
        for (let k in obj) {

            // 输出对象属性名
            console.log(k);//1

            // 输出对象属性值
            console.log(obj[k])//2
        }

    </script>

效果:

image-20220405232545835

注意:

  1. 一般不用这种方式遍历数组、主要是用来遍历对象;
  2. 一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值。

内置对象

介绍:

js内部提供的对象,包含各种属性和方法给开发者调用;

例如;document.write( ) ; console.log( )

内置对象--Math

介绍:

Math里面包含有关于数学操作的相对方法或属性。

常用方法:
  1. random:生成0-1之间的随机数(包含0不包括1)

    求,min-max的随机数?

    答:Math.round ( Math.random( ) * (max-min)+min );

  2. ceil:向上取整

    alert(Math.ceil(1.1))//2;

  3. floor:向下取整

    alert(Math.floor(1.9))//1;

  4. max:找最大数

    alert(Math.max(5, 9, 6))//9;

  5. min:找最小数

    alert(Math.min(5, 9, 6))//5;

  6. pow:幂运算

    alert(Math.pow(5, 2))//25;

  7. abs:绝对值

    alert(Math.abs(-5))//5;

  8. round:四舍五入

    1. alert(Math.round(1.4))//1
    2. alert(Math.round(1.5))//2

拓展(重要)

前言:

变量声明时都会在栈里申请一个空间;

一个栈对应一个变量,一个变量也只有一个栈;

栈与栈之间是互不干扰的;

变量的相互赋值,只是把在栈里的数据复制了一份,给了另一变量的栈里。

基本数据类型

介绍:

基本数据类型又叫做简单数据类型,在存储时变量中存储的是值本身,因此叫做值类型。

值类型(简单数据类型),如: string ,number,boolean,undefined,null。

值类型变量的数据直接存放在变量(栈空间)中。

image-20220405235513929

注意:

可以把基本数据类型的变量a赋值给另一个变量b,a只是把在栈里的值赋给b,在后面修改b的值不会影响a的值。

复杂数据类型

介绍:

复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型。

引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等。

引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中。

image-20220406000016945

注意:

不能把一个引用数据类型变量随便赋值给另一个变量,如:let a=[3];let b=a; 这样赋值其实不是把数据赋值给b,而是把a连接堆的地址赋值给了b,这样做会造成,我在修改b的值的时候,也把a的值也做了修改,因为,a和b栈不同,但是它两连接堆的地址确是相同的,也就是说,a和b的值存储在同一个堆里。

例如:

           let a = [2];
           let b = a;
             b[0] = 5;
             console.log(a, b)//输出值为5和5

栈(操作系统)

介绍:

由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面。

堆(操作系统)

介绍:

存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。引用数据类型存放到堆里面。

总结

思维导图地址