JavaScript高级:函数进阶-3.6 递归(含浅拷贝和深拷贝)

3.6.1 什么是递归？

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return。

练习:16-什么是递归函数

<script>
        // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
        var num = 1;


        function fn() {
            console.log('我要打印6句话');


            if (num == 6) {
                return; // 递归里面必须加退出条件
            }
            num++;
            fn();
        }
        fn();
    </script>

3.6.2 利用递归求数学题

1. 求 1 * 2 *3 … * n 阶乘。

<script>
        // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
        function fn(n) {
            if (n == 1) return 1;
            return n * fn(n - 1);
        }
        console.log(fn(5));
        console.log(fn(3));
         // 详细思路 假如用户输入的是3
        //return  3 * fn(2)
        //return  3 * (2 * fn(1))
        //return  3 * (2 * 1)
        //return  3 * (2)
        //return  6
    </script>

2. 求斐波那契数列 。

<script>
        // 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
        // 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
        // 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
       function fn(n){
            if(n == 1 || n == 2) return 1;
            return fn(n-1)+fn(n-2);
       }
       console.log(fn(8));
    </script>

3. 根据id返回对应的数据对象

<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) {
                    // console.log(item);
                    o = item;
                    // 2. 我们想要得里层的数据 11 12 可以利用递归函数
                    // 里面应该有goods这个数组并且数组的长度不为 0 
                } 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));
    </script>

3.6.4 浅拷贝和深拷贝

1. 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.

练习:20-浅拷贝

<script>
        // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            //k属性名  obj[k]是属性值
            o[k] = obj[k];  //o.k = obj.k  k代表属性名
        }
        console.log(o);
        //浅拷贝只会拷贝一层,第二层之后拷贝的是地址,拷贝后和被拷贝的对象指向同一个数据,其中一个对象的属性值改变,两个对象都会改变
        // o.msg.age = 20;
        // console.log(obj.msg.age);



        console.log('--------------------------------------------');
        //Object.assign(target, ...sources)    es6 新增方法可以浅拷贝
        Object.assign(o,obj);
        console.log(o);
        o.msg.age = 20;
        console.log(obj);
    </script>

2. 深拷贝拷贝多层, 每一级别的数据都会拷贝.

练习:21-深拷贝

<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) {
                    //如果旧对象里的复杂数据类型是数组，递归时 for in中的k代表数组的索引号
                    newObj[k] = [];
                    deepCopy(newObj[k], item);
                //3.判断这个值是否是对象
                } else if (item instanceof Object) {
                    newObj[k] = {};
                    deepCopy(newObj[k], item);
                //4.属于简单数据类型
                }else{
                    newObj[k]= item;
                }          
            }
        }
        deepCopy(o,obj);
        console.log(o);
        
        //因为数组也属于对象,因此数组需要放在对象前面判断
        var arr = [];
        console.log(arr instanceof Object);


        o.msg.age = 20;
        console.log(obj.msg.age);
    </script>

3. Object.assign(target, …sources) es6 新增方法可以浅拷贝

<script>
        // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        console.log('--------------------------------------------');
        //Object.assign(target, ...sources)    es6 新增方法可以浅拷贝
        Object.assign(o,obj);
        console.log(o);
        o.msg.age = 20;
        console.log(obj);
    </script>