Javascript学习之对象

最新推荐文章于 2023-10-10 20:46:26 发布

@白茶清欢@

最新推荐文章于 2023-10-10 20:46:26 发布

阅读量176

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/m0_53450739/article/details/129886965

版权

1、创建对象

2、对象的基本操作（增、删、改、查）

3、对象的遍历

4、基本数据类型和复杂数据类型在数据存储上的区别

5、复杂数据类型的复制（使复制对象和被复制对象之间互不影响，即两者指向不同的地址空间）

在Javascript中，对象是一个复杂数据类型，是存储了一些基本数据类型的集合。对象就是一些键值对的集合，就像是我们准备一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据。

1、创建对象

（1）方式一：字面量方式创建一个对象

<body>
    <script>
        // 字面量的方式创建一个空对象
        var obj01 = {}
        // 像对象中添加成员
        obj01.name = 'Jack'
        obj01.age = 18

        // 字面量的方式创建一个非空对象
        var obj02 = {
            name: "xiaoming",
            age: 20
        }
        console.log(obj01)
        console.log(obj02)
    </script>
</body>

输出如下：

（2）方式二：内置构造函数的方式创建对象

<body>
    <script>
        // 创建一个空对象
        var obj = new Object()

        // 向对象中添加成员
        obj.name = 'Rose'
        obj.age = 20
        console.log(obj)
    </script>
</body>

输出如下：

注意：若对象中的某个key值不符合标识符命名规则，则该key值一定要加单引号或者双引号，符合标识符命名规则的标识符可以加引号也可以不加，一般不加。举例如下：

<body>
    <script>
        // 字面量的方式创建一个非空对象
        var obj02 = {
            name: "xiaoming",
            age: 20,
            "a+b": 5      // a+b不符合标识符命名规则
        }
        console.log(obj02)
    </script>
</body>

输出如下：

2、对象的基本操作（增、删、改、查）

（1）方式一

<body>
    <script>
        var obj = {}
        // 增
        obj.name = "xiaoming"
        obj.age = 18
        obj.location = "北京"
        console.log(obj)

        // 查
        document.write("姓名：" + obj.name + "<br>")
        document.write("年龄：" + obj.age + "<br>")
        document.write("地址：" + obj.location)

        // 改
        obj.age = 50
        console.log(obj)

        // 删
        delete obj.location
        console.log(obj)
    </script>
</body>

（2）方式二

<body>
    <script>
        var obj={}
        // 增
        obj["name"]="xiaoming"
        obj["age"]=18
        obj["location"]="北京"

        // 查
        console.log(obj["name"])

        // 改
        obj["name"]="zhangsan"

        // 删
        delete obj["location"]
    </script>
</body>

注意：当对象中key值不符合标识符命名规范时，建议使用第二种增查改删的方式，举例如下：

<body>
    <script>
        var obj={
            "a+b":"111111"
        }
        // console.log(obj."a+b")    会报错
        console.log(obj["a+b"])      // 不会报错
    </script>
</body>

3、对象的遍历

<body>
    <script>
        var obj = {
            name: "xiaoming",
            age: 100,
            location: "北京"
        }
        // 遍历对象中的成员
        for(var i in obj){
            // i为对象中的key值
            // 这里只能使用中括号的方式获取key对应的值，不能用点
            console.log(i+":"+obj[i])
        }
    </script>
</body>

4、基本数据类型和复杂数据类型在数据存储上的区别

栈：主要存储基本数据类型的内容

堆：主要存储复杂数据类型的内容

（1）基本数据类型在内存中的存储情况

直接在栈空间内存储数据

（2）复杂数据类型在内存中的存储情况

在堆空间里开辟一个存储空间
把数据存储到存储空间内
把存储空间的地址赋值给栈里面的变量

（3）基本数据类型和复杂数据类型在数据存储上的区别：

基本数据类型是“值”之间的比较

<body>
    <script>
        var str1="abcd"
        var str2=str1      // str2和str1指向不同的内存空间
        console.log(str1===str2)   // true
        str2="xy"
        console.log(str1,str2)     // abcd xy
        console.log(str1===str2)   // false
    </script>
</body>

复杂数据类型是“地址”之间的比较

<body>
    <script>
        var obj1={
            name:"zhangsan",
            age:18
        }
        var obj2=obj1        // obj2和obj1指向同一内存空间
        console.log(obj1,obj2)  //{name: 'zhangsan', age: 18} {name: 'zhangsan', age: 18}
        console.log(obj1===obj2)     // true
        obj2.name="xiaoming"
        console.log(obj1,obj2)  //{name: 'xiaoming', age: 18} {name: 'xiaoming', age: 18}
        console.log(obj1===obj2)     // true
    </script>
</body>

<body>
    <script>
        var obj1={
            name:"zhangsan",
            age:18
        }
        var obj2={
            name:"zhangsan",
            age:18
        }
        console.log(obj1,obj2)  //{name: 'zhangsan', age: 18} {name: 'zhangsan', age: 18}
        console.log(obj1===obj2)  // false
    </script>
</body>

5、复杂数据类型的复制（使复制对象和被复制对象之间互不影响，即两者指向不同的地址空间）

<body>
    <script>
        var obj1={
            name:"kerwin",
            age:18
        }
        var obj2={}
        for(var i in obj1){
             obj2[i]=obj1[i]
        }
        console.log(obj2)
    </script>
</body>

@白茶清欢@

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习之对象

在Javascript中，对象是一个复杂数据类型，是存储了一些基本数据类型的集合。对象就是一些键值对的集合，就像是我们准备一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据。（1）方式一：字面量方式创建一个对象输出如下：（2）方式二：内置构造函数的方式创建对象。
复制链接

扫一扫