Day03-JavaScript 高阶

最新推荐文章于 2024-10-02 05:39:15 发布

前端拓海

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量46

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Spirs/article/details/134793406

版权

一.严格模式

<script>

        // 开启严格模式
        "use strict";

        // 声明变量没有使用 var 关键字
        // num = 10;
        // console.log(num);


        // 普通函数 this 在严格模式下指向 undefined 
        function fun(num, num) {
            console.log(this);
            console.log(num + num);
        }
        fun(1, 2);

        function Person(name) {
            this.name = name;
        }
        var p1 = new Person("小好");
        console.log(p1);
   
 </script>

二.高阶函数

 <script>

        // 满足以下条件之一即为高阶函数
        // 1.参数是函数
        // 2.以函数作为返回值

        function fun(a, b) {
            return a + b;
        }

        function fun1(fun) {
            console.log(fun);
        }
        fun1(fun(1, 2));


        function fun2() {
            return function () {
                console.log("abc");
            }
        }
        fun2()();
   
 </script>

三.闭包

<script>

        // 闭包：内部函数访问外部函数作用域，所形成的词法环境叫做闭包。

        // 闭包的特性
        // 1. 函数嵌套函数
        // 2. 函数内部访问外部函数的参数或变量
        // 3. 可以使函数中的变量可以长期驻扎在内存

        function fun1() {
            var num1 = 10;
            // 函数嵌套函数
            function fun2() {
                // 内部函数访问外部函数的参数
                console.log(num1);
            }
            return fun2();
        }
        fun1();
    
</script>

四.闭包的使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            display: flex;
            width: 1000px;
            margin: 20px auto;
            position: relative;
        }

        li {
            flex: 1;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ccc;
        }

        .active {
            background-color: pink;
        }

        section {
            position: relative;
        }

        .tab {
            width: 1000px;
            height: 300px;
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translate(-50%, 0);
            border: 1px solid #ccc;
        }

        .tab div {
            width: 1000px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .tab .visit {
            display: block;
        }
    </style>
</head>

<body>

    <section>
        <ul>
            <li class="active">首页</li>
            <li>产品中心</li>
            <li>在线客服</li>
            <li>关于我们</li>
            <li>加入我们</li>
        </ul>
        <div class="tab">
            <div class="visit">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </section>



    <script>

        var list = document.querySelectorAll("li");
        var bar = document.querySelectorAll(".tab div");

        // 封装排他函数
        function siblingFun(ele, defaultName) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = defaultName;
            }
        }

        // for (var i = 0; i < list.length; i++) {
        //     // 保留对应索引
        //     list[i].index = i;
        //     list[i].onclick = function () {
        //         siblingFun(list);
        //         siblingFun(bar);
        //         this.className = "active";
        //         bar[this.index].className = "visit";
        //     }
        // }

        for (var i = 0; i < list.length; i++) {
            // 外部函数
            (function (index) {
                // 内部函数
                list[index].onclick = function () {
                    siblingFun(list);
                    siblingFun(bar);
                    this.className = "active";
                    // 内部函数访问了外部函数的参数
                    bar[index].className = "visit";
                }
            })(i)
        }

        // 闭包的好处
        // 1.使函数内部变量长期驻扎在内存中
        // 2.避免全局变量的污染（多人定义同样名字的全部变量冲突）

        // 闭包的坏处
        // 内存泄漏（应用程序不再用到的内存，由于某些原因，没有及时释放，就叫做内存泄漏。）

    </script>

</body>

</html>

五.递归

<script>

        // 递归 函数内部调用其本身，这个函数就是递归函数

        // n的阶乘
        function facFun(num) {
            if (num == 1) {
                return num;
            } else {
                // 自己调用自己
                return num * facFun(num - 1);
            }
        }

        console.log(facFun(3));
        // facFun(3)  =>  3*facFun(2) => 3*2*facFun(1) => 3*2*1

        // 使用递归要注意：必须有跳出条件

        // 斐波那契数列：下一个数 = 前面两个数之和
        function fibonacci(num) {
            if (num == 1 || num == 2) {
                return 1;
            } else {
                return fibonacci(num - 1) + fibonacci(num - 2);
            }
        }

        // fun(2) + fun(1)
        // 求斐波那契数列第几位
        console.log(fibonacci(5));

        // f(5) => f(4) + f(3) => f(3) + f(2) + f(2) + f(1) => f(2) + f(1) + 1 + 1 + 1 => 1+1+1+1+1
        // fibonacci(10);
    
</script>

六.赋值

<script>

        var arr = [1, 2, 3, 4, 5];

        var arr2 = arr;
        arr[1] = 0;
        console.log(arr);
        console.log(arr2);

        // 赋值（地址传递）：修改其中一个，两个都会受到影响
   
 </script>

七.浅拷贝

<script>

        var obj = {
            name: "小好",
            age: 18
        }


        // 浅拷贝
        var copyObj = {
            uname: "小谷",
            height: 180,
            age: 20
        };

        var nowobj = Object.assign(copyObj, obj);

        nowobj.name = "zhangsan";
        console.log(obj);

        console.log(copyObj);

        console.log(nowobj);
   
 </script>

八.深拷贝

<script>

        var obj = {
            name: "小好",
            age: 18
        }

        var str = '{"name":"小好","age":18}'
        // 深拷贝
        // JSON 中的方法

        // 将字符串形式的json数据转换为对象形式
        // JSON.parse() 

        // 将对象形式的数据转换为json格式
        // JSON.stringify()

        var data = JSON.stringify(obj);
        console.log(data);  // {"name":"小好","age":18}

        var newobj = JSON.parse(str);
        console.log(newobj);


        var deepCopy = JSON.parse(JSON.stringify(obj));
        console.log(deepCopy);
  
</script>

九.手写递归实现深拷贝

<body>

    <script>

        var obj = {
            name: "小好",
            age: 18,
            hobby: {
                a: "play",
                b: "eat"
            },
            num: [1, 2, 3, 4, 5]
        }

        // var newObj = {};

        // for (var key in obj) {
        //     newObj[key] = obj[key];
        // }

        // console.log(newObj);

        // 封装深拷贝
        function deepCopy(newObj, oldObj) {
            for (var key in oldObj) {

                // 获取当前遍历项
                var item = oldObj[key];


                // 判断对象中的值属于哪种数据类型
                if (item instanceof Array) {
                    newObj[key] = [];
                    deepCopy(newObj[key], item);
                } else if (item instanceof Object) {
                    newObj[key] = {};
                    deepCopy(newObj[key], item);
                } else {
                    newObj[key] = item;
                }

            }
            return newObj;
        }

        var copy = deepCopy({}, obj);

        copy.name = "小谷";

        obj.num = [5, 4, 3, 2, 1];

        console.log(obj);
        console.log("-----------------");
        console.log(copy);

    </script>

</body>

</html>