50~75(函数的定义何调用+this+严格模式+高阶函数+闭包+递归)

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量228 收藏 1
点赞数
分类专栏： ES 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/127436685
版权

1 函数的定义和调用

1.1 函数的定义方式

  1. 函数声明方式function关键字(命名函数)
  2. 函数表达式(匿名函数)
  3. new Function()

var fn = new Function(‘参数1’, ‘参数2’…,‘函数体’)

  • Function 里面参数都必须是字符串格式
  • 第三种方式执行效率低,也不方便书写,因此较少使用
  • 所有函数都是Function的实例(对象)
  • 函数也属于对象

在这里插入图片描述

eg:

<!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>
        // 函数的定义方式
        // 1. 自定义函数(命名函数)
        function fn() {};
        // 2. 函数表达式(匿名函数)
        var fun = function() {};

        // 3. 利用 new Function('参数1','参数2', '函数体');
        var f = new Function('a', 'b', 'console.log(a + b)');
        f(1, 2);
        // 4. 所有函数都是 Function 的实例(对象)
        console.dir(f);
        // 5. 函数也属于对象
        console.log(f instanceof Object);
    </script>
</body>
</html>

1.2 函数的调用方式

  1. 普通函数
  2. 对象的方法
  3. 构造函数
  4. 绑定事件函数
  5. 定时器函数
  6. 立即执行函数
<!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>函数的调用方式</title>
</head>
<body>
    <script>
        // 1. 普通函数
        function fn() {
            console.log('人生的巅峰');
        }
        // fn();  fn.call()
        // 2. 对象的方法
        var o = {
            sayHi: function() {
                console.log('人生的巅峰');
            }
        }
        o.sayHi();
        // 3. 构造函数
        function Star() {};
        new Star();
        // 4. 绑定事件函数
        btn.onclick = function() {} // 点击了按钮就可以调用这个函数
        // 5. 定时器函数
        setInterval(function() {}, 1000); // 这个函数是定时器自动1秒钟调用一次
        // 6. 立即执行函数
        (function() {
            console.log('人生的巅峰');
        })();
        // 立即执行函数是自动调用
    </script>
</body>
</html>

2 this

2.1 函数内this的指向

这些this的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同.一般指向我们的调用者.
在这里插入图片描述

<!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>函数的调用方式</title>
</head>
<body>
    <button>点击</button>
    <script>
        // 函数的不同调用方式决定了this的指向不同
        // 1. 普通函数 this指向window
        function fn() {
            console.log('普通函数this' + this);
        }
        window.fn();
        // 2. 对象的方法 this指向的是o
        var o = {
            sayHi: function() {
                console.log('人生的巅峰');
            }
        }
        o.sayHi();
        // 3. 构造函数 this 指向ldh这个实例对象 原型对象里面的this 指向的也是ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {

        }
        var ldh = new Star();
        // 4. 绑定事件函数 this指向的是函数的调用者 btn这个按钮对象
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定事件函数的this:' + this);
        };
        // 5. 定时器函数  this指向的也是window
        window.setInterval(function() {
            console.log('定时器的this:' + this);
        }, 1000); 
        // 6. 立即执行函数 this还是指向window
        (function() {
            console.log('人生的巅峰');
        })();
        // 立即执行函数是自动调用
    </script>
</body>
</html>

2.2 改变函数内部this指向

  1. call方法
    call()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this指向

fun.call(thisArg, arg1, arg2,…)

```html
<!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>
        // 改变函数内this指向 js提供了三种方法 call() apply()  bind()

        // 1. call()
        var o = {
            name: 'andy'
        }
        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        };
        fn.call(o, 1, 2);
        // call 第一个可以调通函数 第二个可以改变函数内的this指向
        // call 的主要作用可以实现继承
        function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }
        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son('刘德华', 18, '男');
        console.log(son);
    </script>
</body>
</html>
  1. apply方法
    apply()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this指向

fun.apply(thisArg, [argArray])

  • thisArg :在fun函数运行时指定的this值
  • argsArray :传递的值,必须包含在数组里面
  • 返回值就是函数的返回值,因为它就是调用函数
<!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>
        // 改变函数内this指向 js提供了三种方法 call() apply() bind()
        // 2. apply() 应用 运用的意思
        var o = {
            name: 'yaya'
        };
        function fn(arr) {
            console.log(this);
            console.log(arr); // 'pink'
        };
        fn.apply(o, ['pink']);
        // 1. 也是调用函数 第二个可以改变函数内部的this指向
        // 2. 但是它的参数必须是数组(伪数组)
        // 3. apply的主要应用  比如说可以利用apply借助于数学内置对象求最大值
        // Math.max();
        var arr = [1, 66, 3, 99, 4];
        // var max = Math.max.apply(Math, arr);
        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);
        console.log(max, min);
    </script>
</body>
</html>
  1. bind方法
    bind()方法不会调用函数。但是能改变函数内部this指向

fun.bind (thisArg, arg1, arg2, …)

  • thisArg :在fun函数运行时指定的this值
  • arg1, arg2 :传递的其他参数
  • 返回由指定的this值和初始化参数改造的原函数拷贝
<!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>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 3. bind()绑定 捆绑的意思
        var o = {
            name: 'andy'
        };
        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }
        var f = fn.bind(o, 1, 2);
        f();
        // // 1. 不会调用原来的函数 可以改变原来函数内部的this指向
        // // 2. 返回的是原函数改变this之后产生的新函数
        // // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向 此时用bind
        // // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     this.disabled = true; // 这个this指向的是btn这个按钮
        //     // var that = this;
        //     setTimeout(function() {
        //         // that.disabled = false; // 定时器函数里面的this 指向的是window
        //         this.disabled = false; //此时定时器函数里面的this 指向的是btn
        //     }.bind(this), 3000)  // 这个this指向的是btn这个对象
        // }
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i ++ ) {
            btns[i].onclick = function() {
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false;
                }.bind(this), 2000);
            }
        }
    </script>
</body>
</html>

2.3 call apply bind总结

相同点:

都可以改变函数内部的this指向.

区别点:

  1. call和apply会调用函数,并且改变函数内部this指向.
  2. call和apply传递的参数不一样 call传递参数aru1, aru2…形式apply 必须数组形式[arg]
  3. bind 不会调用函数 可以改变函数内部this指向.

主要应用场景

  1. call 经常做继承.
  2. apply 经常跟数组有关系.比如借助于数学对象实现数组最大值最小值
  3. bind 不调用函数但是还想改变this指向.比如改变定时器内部的this指向.

3 严格模式

3.1 什么是严格模式

JavaScript除了提供正常模式外,还提供了严格模式(strict mode)。ES5的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格的条件运行JS代码。

严格模式在IE10以上版本的浏览器中才会被支持, 旧版本浏览器中会被忽略。

严格模式对正常的JavaScript语义做了一些更改:

  1. 消除了Javascript语法的一些不合理、不严谨之处,减少了一些怪异行为。
  2. 消除代码运行的一些不安全之处,保证代码运行的安全。
  3. 提高编译器效率,增加运行速度。
  4. 禁用了在ECMAScript的未来版本中可能会定义的一些语法,为未来新版本的Javascript做好铺垫。比如一些保留字如: class, enum, export, extends, import, super不能做变量名

3.2 开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

  1. 为脚本开启严格模式
    为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"use strict";('use strict';)
<script>
    'use strict';
    console.log('这是严格模式');
</script>

有的script基本是严格模式,有的script脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他script脚本文件。

  1. 为函数开启严格模式
    要给某个函数开启严格模式,需要把"usestrict" ; (或'use strict';)声明放在函数体所有语句之前。
    h
<script>
    (function() {
        "use strict";
        var num = 10;
        function fn() {}
    })();
</script>

eg:

<!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标签)开启严格模式 -->
    <script>
        'use strict';
        // 下面的js代码就会按照严格模式执行代码
    </script>
    <script>
        (function() {
            'use strict';
        })();
    </script>
    <!-- 为某个函数开启严格模式 -->
    <script>
        // 此时只是给fn函数开启严格模式
        function fn() {
            'use strict';
            // 下面的代码按照严格模式执行
        }u
        function fun() {
            // 里面的还是按照普通模式执行
        }
    </script>
</body>
</html>

3.3 严格模式中的变化

严格模式对Javascript的语法和行为,都做了一些改变。

  1. 变量规定
  • 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,变量都必须先用var命令声明,然后再使用。
  • 严禁删除已经声明变量。例如，delete x;语法是错误的.
  1. 严格模式下this指向问题
  • 以前在全局作用域函数中的this指向window对象。
  • 严格模式下全局作用域中函数中的this是undefined.
  • 以前构造函数时不加new也可以调用，当普通函数, this指向全局对象
  • 严格模式下，如果构造函数不加new调用, this会报错.
  • new实例化的构造函数指向创建的对象实例。
  • 定时器this还是指向window。
  • 事件、对象还是指向调用者。
  1. 函数变化
  • 函数不能有重名的参数。
  • 函数必须声明在顶层新版本的JavaScript会引入"块级作用域"(ES6中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数。

更多严格模式要求参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

<!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>
        'use strict';
        // 1. 我们的变量名必须先声明再使用
        // num = 10;
        // console.log(num);
        var num = 10;
        console.log(num);
        // 2. 我们不能随意删除已经声明好的变量
        // delete num;
        // 3. 严格模式下全局作用域中的this是undefined
        // function fn() {
        //     console.log(this); // undefined
        // }
        // fn();
        // 4. 严格模式下 如果构造函数不加new调用 this指向的是undefined 如果给他赋值会报错
        // function Star() {
        //     this.sex = '男';
        // }
        // // Star();
        // var ldh = new Star();
        // console.log(ldh.sex);
        // 5. 定时器this还是指向window
        // setTimeout(function() {
        //     console.log(this);
        // }, 2000);
        // a = 1;
        // b = 2;
        // 6. 严格模式下函数里面的参数不允许有重名
        // function fn(a, a) {
        //     console.log(a + a);
        // }
        // fn(1, 2);
    </script>
</body>
</html>

4 高阶函数

高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出

<script>
function fn(callback) {
    callback&&callback();
}
fn(function() { alert('hi')})
</script>

<script>
function fn() {
    return function() {}
}
fn();
</script>

此时fn就是一个高阶函数

函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用.最典型的就是作为回调函数

eg:

<!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>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
    // 高阶函数-函数可以作为参数传递
    function fn(a, b, callback) {
        console.log(a + b);
    }
    fn(1, 2, function() {
        console.log('我是最后调用的');
    });
    $("div").animate({
        left: 500
    }, function() {
        $("div").css("backgroundColor", "purple");
    })
    </script>
</body>
</html>

5 闭包

5.1 变量作用域

变量根据作用域的不同分为两种:全局变量和局部变量。

  1. 函数内部可以使用全局变量。
  2. 函数外部不可以使用局部变量。
  3. 当函数执行完毕,本作用域内的局部变量会销毁。

5.2 什么是闭包

闭包(closure)指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计

简单理解就是,一个作用域可以访问另外一个函数内部的局部变量。

<!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>
        // 闭包(closure)指有权访问另一个函数作用域中变量的函数
        // 闭包: 我们fun 这个函数作用域 访问了另外一个函数fn 里面的局部变量 num
        function fn() {
            var num = 10;
            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
    </script>
</body>
</html>

5.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>
    <script>
        // 闭包(closure)指有权访问另一个函数作用域中变量的函数
        // 闭包: 我们fun 这个函数作用域 访问了另外一个函数fn 里面的局部变量 num
        // fn外面的作用域可以访问fn内部的局部变量
        // 闭包的主要作用:延伸了变量的作用范围
        function fn() {
            var num = 10;
            function fun() {
                console.log(num);
            }
            return fun;
        }
        var f = fn();
        f();
        // 类似于
        // var f = function fun() {
        //     console.log(num);
        // }
    </script>
</body>
</html>

5.4 闭包案例

<!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 class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </div>
    <script>
        // 闭包应用-点击li输入当前li的索引号
        // 1. 我们可以利用动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0;i < lis.length; i ++ ) {
            lis[i].index = i;
            lis[i].onclick = function() {
                // console.log(i);
                console.log(this.index);
            }
        }
        // 2. 利用闭包的方式得到当前小li的索引号
        for (var i = 0; i < lis.length; i ++ ) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i); 
                }
            })(i);
        }
    </script>
</body>
</html>

5.5 闭包案例

  1. 循环注册点击事件。
  2. 循环中的setTimeout().
<!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 class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </div>
    <script>
        // 闭包应用-3秒钟 打印所有li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i ++ ) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000);
            })(i);
        }
    </script>
</body>
</html>

5.6 闭包案例

  1. 循环注册点击事件。
  2. 循环中的setTimeout().
  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>
    <script>
        // 闭包应用-计算打车价格
        // 打车起步价13(3公里内) 之后每多一公里增加5块钱 用户输入公里数就可以打算打车价格
        // 如果有拥堵情况 总价格多收取10块钱拥堵费
        // function fn() {};
        // fn();
        var car = (function() {
            var start = 13; // 起步价
            var total = 0;  // 总价
            return {
                // 正常的总价
                price: function(n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = start + (n - 3) * 5;
                    }
                    return total;
                }, 
                // 拥堵之后的费用
                yd: function(flag) {
                    return flag ? total + 10 : total;
                }  
            }
        })();
        console.log(car.price(5)); // 23
        console.log(car.yd(true)); // 33
        console.log(car.price(1)); // 13
        console.log(car.yd(false)); // 13
    </script>
</body>
</html>

5.7 思考题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 思考题 1：

        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function() {
                return function() {
                    return this.name;
                };
            }
        };

        console.log(object.getNameFunc()())
        var f = object.getNameFunc();
        // 类似于
        var f = function() {
            return this.name;
        }
        f();

        // 思考题 2：

        // var name = "The Window";　　
        // var object = {　　　　
        //     name: "My Object",
        //     getNameFunc: function() {
        //         var that = this;
        //         return function() {
        //             return that.name;
        //         };
        //     }
        // };
        // console.log(object.getNameFunc()())
    </script>
</body>

</html>

5.8 闭包总结

  1. 闭包是什么?
    闭包是一个函数(一个作用域可以访问另外一个函数的局部变量)

  2. 闭包的作用是什么?
    延伸变量的作用范围

6 递归

6.1 什么是递归?

如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。

简单理解:函数内部自己调用自己，这个函数就是递归函数

递归函数的作用和循环效果一样

由于递归很容易发生"栈溢出"错误(stack overflow),所以必须要加退出条件return。

<!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 num = 1;
        function fn() {
            console.log('我要打印6句话');
            if (num == 6) {
                return; // 递归里面必须加推出条件
            }
            num++;
            fn();
        }
        fn();
    </script>
</body>
</html>

6.2 利用递归求数学题

  1. 求1 * 2 * 3 … * n阶乘
<!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>
        // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * .. n
        function fn(n) {
            if (n == 1) {
                return 1;
            }
            return n * fn(n - 1);
        }
        console.log(fn(3));
        console.log(fn(4));
        // 详细思路 假如用户输入的是3
        // return 3 * fn(2)
        // return 3 * (2 * fn(1))
        // return 3 * (2 * 1)
        // return 3 * (2)
        // return 6
    </script>
</body>
</html>
  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>
    <script>
        // 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
        // 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
        // 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
        function fb(n) {
            if (n === 1 || n === 2) {
                return 1;
            }
            return fb(n - 1) + fb(n - 2);
        }
        console.log(fb(3));
        console.log(fb(6));
    </script>
</body>
</html>

6.3 利用递归求:根据id返回对应的数据对象

<!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 data = [{
            id: 1,
            name: '家电',
            goods: [{
                id: 11,
                gname: '冰箱',
                goods: [{
                    id: 111,
                    gname: '海尔'
                }, {
                    id: 112,
                    gname: '美的'
                }, ]
            },{
                id: 12,
                gname: '洗衣机'
            }]
        }, {
            id: 2,
            name: '服饰'
        }];
        // 我们想要做输入id号 就可以返回的数据对象
        // 1. 利用forEach去遍历里面的每一个对象
        function getID(json, id) {
            var o = {};
            json.forEach(function(item) {
                // console.log(item); // 2个数组元素
                if (item.id === id) {
                    o = item;
                } else if (item.goods && item.goods.length > 0) {
                    o = getID(item.goods, id);
                }
            });      
            return o;
        }
        console.log(getID(data, 1));
        console.log(getID(data, 2));;
        console.log(getID(data, 11));;
        console.log(getID(data, 12));;
        console.log(getID(data, 111));;
        console.log(getID(data, 112));;
    </script>
</body>
</html>

6.4 浅拷贝和深拷贝

  1. 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用.
  2. 深拷贝拷贝多层，每一级别的数据都会拷贝.
  3. Object.assign(target,…sources) es6新增方法可以浅拷贝

浅拷贝:

<!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 = {
            id: 1, 
            name: 'yaya',
            msg: {
                age: 18
            }
        };
        var o = {};
        // for (var k in obj) {
        //     // k是属性名 obj[k]是属性名
        //     o[key] = obj[key];
        // }
        // console.log(o);
        // o.msg.age = 20;
        // console.log(obj);

        console.log('----------------');
        Object.assign(o, obj);
        console.log(o);
        o.msg.age = 20;
        console.log(obj);
    </script>
</body>
</html>

深拷贝:

<!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 = {
            id: 1,
            name: 'yaya',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 封装函数
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断属性值属于哪种类型
                // 1. 获取o属性值 oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否为数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    o.color = [];
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item);
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }   
            }
        }
        deepCopy(o, obj);
        console.log(o);

        var arr = [];
        console.log(arr instanceof Object);
        o.msg.age = 20;
        console.log(obj);
    </script>
</body>
</html>
前进的北极熊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript | 函数进阶 + 函数的定义和调用 + 改变函数内部 this 指向 + 严格模式 + 高阶函数 + 闭包 + 递归
不爱吃菜的菜菜的博客
06-03 249
目录函数的定义和调用函数的定义方式函数的调用方式this改变函数内部 this 指向call 方法apply 方法bind 方法call apply bind 总结严格模式开启严格模式1. 为脚本开启严格模式2. 为函数开启严格模式严格模式中的变化1. 变量规定2. 严格模式下 this 指向问题3. 函数变化高阶函数闭包变量作用域什么是闭包在 chrome 中调试闭包闭包的作用闭包案例1. 循环注册点击事件2. 循环中的 setTimeout()3. 计算打车价格思考题递归利用递归求数学题1.求 1
objc swift函数式编程+进阶 （swift 4.0)
09-22
综上所述，这个主题会涵盖Swift 4.0中的函数式编程技巧，包括但不限于高阶函数的应用、闭包的使用、类型推断和泛型，以及与其他编程范式的对比。通过学习这些内容，开发者能够提升代码的可读性、可维护性和效率，更...
函数的定义和调用 + 改变this指向方法 + 闭包 + 递归
qq_53283188的博客
05-07 407
文章目录一、函数的定义和调用1. 函数的定义2. 函数的调用二、三、四、五、 一、函数的定义和调用 1. 函数的定义 函数声明方式 function 关键字 (命名函数) function fn(){} 函数表达式(匿名函数) var fn = function(){} new Function() var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Function('参数1','参数2
函数的定义和调用、this、严格模式、高阶函数、闭包、递归
m0_51195865的博客
06-27 121
函数的定义和调用、this、严格模式、高阶函数、闭包、递归
JS高级-函数定义与调用、函数内的this指向、改变this指向方法、闭包、递归、严格模式
qq_39206750的博客
11-07 245
函数的定义与调用 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = function(){} 方式3 new Function() var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Functio...
python中的装饰器和递归函数
01-20
装饰器的本质就是一个闭包，是一个返回内部函数的高阶函数。它使我们在不修改原函数代码的情况下为原函数增加性的功能。 1.1.基本装饰器 我们下面来举例说明装饰器的写法和用法。下面我们利用装饰器为hope()函数增加...
函数式swift_epub+pdf版本
11-22
在Swift中，函数式编程的特点主要体现在高阶函数、闭包、映射、过滤、reduce等概念上。以下是对这些关键知识点的详细解释： 1. **高阶函数**：高阶函数是可以接受一个或多个函数作为参数，或者返回一个函数作为结果...
go代码-Go 函数定义及基本调用
07-14
Go语言允许将函数作为其他函数的参数或返回值，这样可以实现高阶函数，比如 `map`, `filter`, `reduce` 等函数式编程概念。 9. **接收者与方法**： Go中的方法是定义在类型上的函数，方法通过接收者参数来操作该...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 400
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 186
vue 自定义滚动条同步拖动（移动端）
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 700
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 251
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 272
通过sm4对文件进行加解密，用户输入密码
Vue单路由的独享守卫怎么设置
ggq53219的博客
07-13 179
在Vue.js中，特别是在使用Vue Router时，路由守卫（Route Guards）是一种强大的机制，允许我们在路由发生变化时执行一些逻辑，比如检查用户是否登录、加载数据等。Vue Router提供了全局守卫、路由独享守卫和组件内守卫三种类型的守卫。对于你的问题，关于如何设置“单路由的独享守卫”（即路由独享守卫），你可以通过给特定的路由配置。当尝试进入这个路由时，会首先调用这个守卫函数。如果检查未通过（即用户未登录），则调用。函数是一个假设的示例，你需要根据你的应用逻辑来实现它。
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 206
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 493
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 170
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
React:useState和useEffect
读万卷书 行万里路
07-12 486
最近因为想要开发一个简单的应用才开始接触React。但是并没有系统学习React，所以这篇博客可能会写的不够专业。
第7章 高级函数.pptx
05-21
- Python解释器逐行执行代码，遇到函数定义时会创建函数对象，函数调用时则创建一个栈帧，用于保存局部变量和执行上下文。 **4. 学习目标：闭包与装饰器** - **闭包**: Python支持嵌套函数，当内部函数引用外部函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值