JavaScript学习笔记

最新推荐文章于 2025-05-31 16:02:29 发布

畏迁c

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量67

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.youkuaiyun.com/m0_65380423/article/details/129969693

版权

本文介绍了JavaScript中的两种函数定义方式——声明式和赋值式，以及创建对象的字面量和构造函数方法。接着详细讲解了对象的增删改查操作，并通过示例展示了如何遍历对象。最后讨论了JavaScript对象的浅拷贝问题，提出了两种不同的复制方法及其应用场景。

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

一、javaScript两种函数定义方式

1、声明式函数

        function test(){
            console.log("test")
        }
        test()

2、赋值式函数

        var test = function(){
            console.log("Func")
        }
        test();

3、注意事项

注意点：声明式函数可以在函数定义前调用
赋值形函数在声明前调用会报错

二、JavaScript创建对象的两种方式

1、字面量的方式

        var obj = {
            name:"xiaoming",
            age:19
        }
        console.log(obj)

2、内置构造函数

        var obj1 = new Object()
        obj1.name = "xiaoming"
        obj1.age = 13
        console.log(obj1)

3、整体实现效果

整体代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        var obj = {
            name:"xiaoming",
            age:19
        }
        console.log(obj)
        var obj1 = new Object()
        obj1.name = "xiaoming"
        obj1.age = 13
        console.log(obj1)
    </script>
</body>
</html>

实现效果

在这里插入图片描述

三、Javascript对象的增删改查

1、实现代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        var obj = {
            name:"xiaoming",
            age:19
        }
        console.log(obj)

        //增加
        var obj1 = new Object()
        obj1.name = "xiaoming"
        obj1.age = 13
        console.log(obj1)
        //查询
        document.write("name:"+obj.name)
        //修改
        obj.name = "daming"
        //删除
        delete obj.name
        console.log(obj)

        //2-增加
        var obj2 = {}
        obj2["name"] = "小红"
        console.log(obj2)
        //2-查询
        console.log(obj2.name)
        //2-修改
        obj2["name"] = "小红2"
        console.log(obj2.name)
        //2-删除
        delete obj2["name"]
        console.log(obj2)
    </script>
</body>
</html>

2、实现效果

在这里插入图片描述

四、JavaScript对象遍历

1、关键代码如下

    for(var i in obj){
        document.write(i+"："+obj[i])
        document.write("</br>")   
    }

2、整体代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"xiaoming",
            age:19,
            sex:"女"
        }
        for(var i in obj){
            document.write(i+"："+obj[i])
            document.write("</br>")   //换行
        }
    </script>
</body>
</html>

3、实现效果如下

在这里插入图片描述

五、Javascript对象的复制（存储）

1、第一种方式

    <script>
        var obj = {
            name:"xiaoming",
            age:12,
            sex:"男"
        }
        var obj2 = obj
        obj2.name = "hhh"
        console.log(obj,obj2)
    </script>

实现效果：
在这里插入图片描述
存在问题：就是把obj复制给了obj2，确实可以现输出的东西一模一样，但是当修改的时候，就会出现修改obj2，但是obj的内容也变了的情况，故不可取
问题原因：存储的时候会区分简单类型和复杂类型
简单类型的例如：var name = “小明” 这种会储存在栈中，而复杂类型的，例如上面的obj，就只会把地址储存在栈中，而内容储存在堆中，所以复制的时候，只是复制了地址，所以才会改obj2，obj也会跟着变

1、第二种方式


    <script>
        var obj = {
            name:"xiaoming",
            age:12,
            sex:"男"
        }
        var obj3 = {}
        for(var i in obj){
            obj3[i] = obj[i]
        }
        obj3["name"]= "hhh"
        console.log(obj,obj3)
    </script>