Web前端----JavaScript的基础学习第五天_javascript基础第五天-CSDN博客

本文链接：https://blog.csdn.net/m0_70612148/article/details/126090416

此文章是对JavaScript进行的一些基础的学习。

前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下JavaScript的语法，用来对JavaScript进行基础的学习。

`一、JavaScript是什么？`

JS是一种编程语言，主要生成一些特效，完成用户和页面的交互，Javascript（JS）是一种脚本语言，主要用于Web。它用于增强HTML页面，通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此，它不需要编译。JavaScript以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据。

二、JavaScript的基础

1.1简单数据类型和复杂数据类型

简单数据类型存的是值，如果想修改某个值的话，其他的变量不会发生改变。复杂数据类型，他们存的是引用地址，当引用地址中有一个变量变了，其他同一个地址也会发生改，下面就是一个简答数据类型和一个复杂数据类型的案例。

实现一个简单数据类型，代码如下：

<script>

    let a = 1
    let b;
    b = a;
    b=2
    console.log(a,b);

</script>

代码运行结果如下：

复杂数据类型代码示例如下：

    <script>
        let obj = {
            name:'名字'
        }
        let obj2;
        obj2 = obj
        obj.name = '这是一句话' 
        console.log(obj,obj2);
    </script>

代码运行结果如下：

1.2实现一个深拷贝

这个比较难，代码示例如下：

    <script>

        let obj = {
            name:1,
            age:2,
            userInfo:{
                hobby:'运动'
            }
        }


        function DeepCopy(obj){
            let arr = {}
            if(typeof obj!='object'){
                alert('这是一句话');
            }

            for (const key in obj) {
                if(typeof obj[key] =='object'){
                    arr[key] = DeepCopy(obj[key])
                }else {
                    arr[key] = obj[key]
                }
            }
            return arr
        }
        obj.name = 666        
        let obj1 = DeepCopy(obj)
        obj.userInfo.hobby='运动1'
        console.log(obj1,obj);
    </script>

代码运行结果如下：

1.3 递归

递归概念很简单，意思就是函数内部自己调用自己。

代码示例如下：

    <script>
        
        function fn(num) {
            if(num==1) {
                return n = 1
            }
            return num + fn(num-1)
        }
        let abcd = fn(5)
        console.log(abcd);

    </script>

代码运行结果如下：

递归一定要有判断条件，否则的话就会进入死循环，然后报错，下面是代码的示例：

    <script>
        var a = 0
        function fn() {
            console.log('111');
            a++
            if (a == 5) return
            fn()
        }
        fn()
    </script>

代码运行结果如下：

1.4 遍历对象

代码示例如下：

    <script>

        let arr = [1,2,3,4]

        // es6 forEach
        arr.forEach(it=>{
            console.log(it);
        })

        // for循环遍历数组
        for (let index = 0; index < arr.length; index++) {
            console.log(arr[index]);
        }


        let obj = {
            name:'名字',
            age:18,
            hobby:'动作'
        }

        // for   属性名 in 要遍历的对象
        for (const key in obj) {
            console.log(obj,key,obj[key]);
        }
    </script>

代码运行结果如下：

1.5 数组对象解构

数组的解构语法就是数组的另一种使用调用方法，可以不通过 [ ] 语法或者不通过索引下标来调用使用数组中的数据。用于将数组中的数据一一对应的赋值给变量，代码示例如下：

    <script>

        // 解构：

        let obj = {
            name: '名字',
            age:18
        }
        let name1 = obj.name
        console.log(name1,obj.name);
        // 这个是es6新增的对象解构语法,要拿的是什么类型的格式，就定义成什么样的格式
        const { name , age } = obj
        console.log(name,age);
    </script>

代码运行结果如下：

1.6 浅拷贝

浅拷贝是指，一个新的对象对原始对象的属性值进行精确地拷贝，如果拷贝的是原始数据类型，拷贝的就是原始数据的值，如果是引用数据类型，拷贝的就是内存地址。如果其中一个对象的引用内存地址发生改变，另一个对象也会发生变化。

代码示例如下：

    <script>
        let obj = {
            b:2
        }
        let newObj= {}
        Object.assign(newObj,obj)
        obj.b = 5
        console.log(newObj);
    </script>

代码运行结果如下：

1.7 深拷贝

深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它会在堆内存空间中创建一个新的实体对象，新的实体对象内容与被拷贝对象的实体对象内容相同，然后新拷贝出来的对象在栈内存中的对象指针就会指向这个新的实体对象，因此拷贝前后的两个对象指向的是两个内存地址不同但内容相同的实体对象。深拷贝对于一些对象可以使用 JSON 的两个函数来实现，但是由于 JSON 的对象格式比 js 的对象格式更加严格，所以如果属性值里边出现函数或者 Symbol 类型的值时，会转换失败，代码示例如下：

    <script>
        let obj = {
            b: 2,
            hobby: {
                jump: 'yue'
            }
        }
        function DeepCopy(obj) {
            let newObj = {}
            if (typeof obj != 'object') return alert('他不是一个对象');
            for (const key in obj) {
                typeof obj[key] == 'object' ? newObj[key] = 
                DeepCopy(obj[key]) : newObj[key] = obj[key]
            }
            return newObj
        }

        const newObj = DeepCopy(obj)
        obj.hobby.jump = '不yue了'
        console.log(newObj, obj);
    </script>

代码运行结果如下：

1.9 实现拷贝的第二种方法

代码示例如下：

    <script>
        let obj = {
            b: 2,
            hobby: {
                jump: '跳'
            }
        }
        let obj1 = JSON.stringify(obj) 、
        // 转成JSON类型的字符串 使用场景  一般情况下 后台要这种数据
        let obj2 = JSON.parse(obj1)  
        // 把JSON类型的字符串 转回 js 对象  使用场景：
        后台返回给了我们 一个JSON的字符串格式 需要我们手动转换 
    
        // 经常开发会使用 但是有一定缺陷
        let obj4 = JSON.parse(JSON.stringify(obj)) // 深拷贝
        obj.hobby.jump = '101'
        console.log(obj1,obj,obj2,obj4);
    </script>

代码运行结果如下：

1.8 JSON.parse(JSON.stringify()) 的缺陷

代码示例如下：

    <script>
        obj = {
            a: NaN,
            b: undefined,
            c: new Date(),
            d: new RegExp(/\d/),
            d: new Error(),
            e: Infinity
        }

        console.log(obj);
        let newObj = JSON.parse(JSON.stringify(obj))
        console.log(newObj);

    </script>

代码运行结果如下：