函数高级（闭包、递归、深浅拷贝）

最新推荐文章于 2021-01-31 09:46:33 发布
最新推荐文章于 2021-01-31 09:46:33 发布
阅读量169 收藏 1
点赞数 1
分类专栏： JavaScript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35218523/article/details/112787482
版权

闭包的实例

1.点击li输出当前li的索引号

<!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>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <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>

2.闭包应用-3秒钟之后,打印所有li元素的内容

<!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>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <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>

3.打车价格

<!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>
        // 闭包应用-计算打车价格 
        // 打车起步价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>

4.思考题

<!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>

递归实例

1.利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * …n

<!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~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>

2.利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21…

<!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、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>

3.输入id号,就可以返回的数据对象

<!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>
        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(json);
                // console.log(item); // 2个数组元素
                if (item.id == id) {
                    // console.log(item);
                    o = item;
                    // 2. 我们想要得里层的数据 11 12 可以利用递归函数
                    // 里面应该有goods这个数组并且数组的长度不为 0 
                } else if (item.goods && item.goods.length > 0) {
                    // 当id = 11,id = 12对象运行结束，return o ,返回为id = 11的对象，此时应该用 o来接收该对象，否则它回到上一层继续运行的的时候，从id = 1对象执行完if语句处继续执行，此时 o = {}(初始值)，然后处理id= 2的对象，此时因为if和else if都不符合，所以o未处理，仍为o = {},最后返回return {}。 
                    o = getID(item.goods, id);
                    // getID(item.goods, id);
                }
                console.log(o);

            });
            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));
    </script>
</body>

</html>

深浅拷贝

在这里插入图片描述

1.浅拷贝

<!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>
        // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        // for (var k in obj) {
        //     // k 是属性名   obj[k] 属性值
        //     o[k] = obj[k];
        // }
        // 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>

2.深拷贝

思路：简单数据类型直接赋值，复杂数据类型（数据、对象）使用递归赋值。
数组判断需要放在对象判断前面，因为数组也属于对象，所以需要放在前面，如果对象判断提前，则不会进入数组判断里面的递归拷贝操作。

<!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>
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    //值给属性
                    deepCopy(newobj[k], item)
                } 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>
饮尽杯中月
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
09-17
Python编程语言中有许多核心概念，其中包括闭包、深浅拷贝、垃圾回收和with语句。这些知识点对于理解和编写高效、安全的代码至关重要。 **1. 闭包** 闭包是一种特殊的函数，它记住了自己被创建时的环境，即能够访问...
javascript高级编程之函数表达式 递归和闭包函数
10-23
主要介绍了javascript高级编程之函数表达式 递归和闭包函数的相关资料,需要的朋友可以参考下
关于闭包函数和递归函数的详细理解
weixin_30641465的博客
05-10 153
关于闭包函数的详解 从技术的角度讲，所有的JavaScript函数都是闭包：它们都是对象，它们都关联到作用域链。当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 闭包的作用 闭包的应用比较典型是定义模块，我们将操作函数暴露给外部，而细节隐藏在模块内部。 function fn1() { var name = 'iceman'; function ...
闭包函数和递归
weixin_47612165的博客
12-27 243
闭包 变量根据作用域的不同分为两种：全局变量和局部变量。 1，函数内部可以使用全局变量。 2，函数外部不可以使用局部变量。 3，当函数执行完毕，本作用域内的局部变量会销毁。 <script> /** * 这里产生了三个作用域 * 全局作用域=》局部作用域(函数f1)=》局部作用域(函数f2) * 1）如果在多个作用域中都声明了同名的变量，那么会按照就近原则向上寻找 * 2）子作用域可以访问父作用域中的变量，
回调函数、闭包函数、递归函数
EnyingSong的博客
10-23 417
回调函数 定义：作为参数使用的函数称为回调函数 setInterval(function () { }, 1000); btn.addEventListener('click', function () { }); arr.sort(function () { }); $btn.on('click', function () {}); $(function () { }); 闭包函数 概...
函数 —— 递归 与 高级函数
白菜执笔人的博客
08-31 117
Python 学习笔记 一、函数的返回值 返回值：就是函数执行以后的返回的结果。 1.1、return 当想要对函数返回的结果进行操作时，可以使用 return 来指定返回值。 def fn(): return 100 fn() # 直接执行不会打印结果, 但函数确实有返回值 print(fn()) # 可用有 print 函数打印验证 ...
js闭包、函数的递归、冒泡排序
WeiflR10的博客
01-09 267
一、闭包 闭包的值会存在内存里面，大量使用闭包会导致内存的泄露，在做js版本库的封装的时候经常使用。 1.怎么调用局部变量 2.闭包的作用：1.可以读取函数内部的变量。2.使这些变量的值始终存储在内存中。 3.事件中for循环的i值拿不到，因为网页初始化时，每个button的事件的都已经绑好了，而用户都是在后续触发的，相当于整个事件都有了，则意味着for循环也已经执行完毕了，i达到了最...
php基于闭包实现函数的自调用(递归)实例分析
12-19
当`$n`小于`$max`时，闭包函数会递归调用自身，每次递归都将`$n`加一，并将结果追加到`$counter`中。最后，当`$n`达到`$max`时，递归结束。 闭包的灵活性体现在它可以访问并修改外部作用域的变量，例如这里的`$n`和...
了解一下ES6: 函数&简述深浅拷贝
weixin_33775572的博客
10-15 329
标准开头今天我们来看一下ES6的函数部分知识函数函数初始值有时候，函数的非必填参数，我们可以给予其默认值。保证程序完整不会出错在早期，我们赋初始值可能是这样做的：// 早期ES5方法 function ajax(url, method, param) { method = method ? method : 'GET'; param = param ? param : {}; ...
函数表达式---递归和闭包总结
baiqiangdoudou的博客
03-12 275
一、定义函数的两种方式：函数声明和函数表达式 1、函数声明： // 语法： function funName(arg0,arg1,arg2){ // 函数体 } 函数声明有个重要特征是：函数声明提升,意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。 sayHi(); // 函数调用 function sayHi(){ // 函数声明 ...
JS闭包和递归以及浅拷贝和深拷贝
贝贝的博客
07-27 325
目录 函数的定义和调用 函数内this指向问题以及改变this指向 高阶函数 闭包 递归 浅拷贝和深拷贝 函数的定义和调用     ^ 函数的定义 我们函数的定义有三种定义方式 函数的声明方式 function 关键字 函数表达式（匿名函数） new Function() 第三种定义函数的方式代码如下 let fn = new Function('a','b','console.log(a+b)'); fn(1,1); /*
细谈深浅拷贝问题
TANGY的博客
02-26 434
浅拷贝 浅拷贝：也称位拷贝，编译器只是将对象中的值拷贝过来。如果对象中管理资源，最后就会导致多个对象共享同一份资源，当一个对象销毁时就会将该资源释放掉，而此时另一些对象不知道该资源已经被释放，以为还有效，所以当继续对资源进行操作时，就会发生了访问违规。 下面来看一段代码： String(const char* pstr = &quot;&quot;) :_pstr(new char[strlen(pstr)+1...
品优购项目
qq_35218523的博客
10-10 1067
1.font:不需要设置的属性可以省略（去默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。 2.em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。 ...
响应式布局
qq_35218523的博客
12-02 941
阿里百秀案例 1.width：100%; 1.1 box-sizing为content-box时 width：100%;表示width=父级的width 父级的width不包括其内边距和边框值 1.2 box-sizing为border-box时 width：100%;表示width=父级的width 父级的width包括其内边距和边框值 1.3实践 3处的空白间隔： 1号盒子padding-right:10px 2号盒子width:100%，此处为默认的content-box 所以width：100
HTML5+CSS3
qq_35218523的博客
11-18 875
三角形 代码实现： 1. div { width: 40px; height: 40px; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 10px solid blue; border-left: 10px solid #000; } 2.
Promise全解析
qq_35218523的博客
01-31 723
1 为什么需要promise 需求 通过ajax请求id, 再根据id请求用户名, 再根据用户名获取email 回调地狱 在回调函数中嵌套回调 Promise解决了回调地狱 2 Promise的基本使用 Promise是一个构造函数, 通过new关键字实例化对象 语法 new Promise((resolve, reject)=>{}) Promise接受一个函数作为参数 在参数函数中接受两个参数 resolve: 成功函数 reject: 失败函数 promise实例 p
flex布局
qq_35218523的博客
11-28 621
1.CSS3中行高=高时，文字没有垂直居中 原因：设置box-sizing:border-box后设置的盒子的高，包含padding和border，所以此时想文字垂直居中，需要行高=高-padding-border才行。
js递归函数算闭包吗
最新发布
07-27
闭包和递归函数是两个概念。递归函数是指在函数体内调用自身的函数，而闭包是指一个函数能够访问并操作其词法作用域之外的变量。 在JavaScript中，递归函数可以创建闭包。当一个函数在内部引用了外部的变量，并且这...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值