函数进阶

进阶JavaScript

函数进阶

1. 函数的定义和调用

1.1 函数的定义方式

image-20230501181003826

image-20230501181016420

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//  函数的定义方式

// 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);

1.2 函数的调用

image-20230501181136859

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 函数的调用方式

// 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('人生的巅峰');
})();
// 立即执行函数是自动调用

2. this指向

2.1 函数内部的this指向

image-20230501181226826

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 函数的不同调用方式决定了this 的指向不同
// 1. 普通函数 this 指向window
function fn() {
    console.log('普通函数的this' + this);
}
window.fn();

// 2. 对象的方法 this指向的是对象 o
var o = {
    sayHi: function () {
        console.log('对象方法的this:' + this);
    }
}
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.setTimeout(function () {
    console.log('定时器的this:' + this);

}, 1000);

// 6. 立即执行函数 this还是指向window
(function () {
    console.log('立即执行函数的this' + this);
})();

2.2改变函数内部 this 指向

image-20230501181310322

2.3 call()方法

image-20230501181318478

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

// call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
// fun.call(thisArg, arg1, arg2, ...)
//  thisArg：在 fun 函数运行时指定的 this 值
//  arg1，arg2：传递的其他参数
//  返回值就是函数的返回值，因为它就是调用函数
//  因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

// 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);

2.4 apply()方法

image-20230501181400389

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

// apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
// fun.apply(thisArg, [argsArray])
//  thisArg：在fun函数运行时指定的 this 值
//  argsArray：传递的值，必须包含在数组里面
//  返回值就是函数的返回值，因为它就是调用函数
//  因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

// 2. apply()  应用 运用的意思
var o = {
    name: 'andy'
};

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 arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);

2.5 bind()方法

image-20230501181431283

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!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>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // bind() 方法不会调用函数。但是能改变函数内部this 指向
        // fun.bind(thisArg, arg1, arg2, ...)
        //  thisArg：在 fun 函数运行时指定的 this 值
        //  arg1，arg2：传递的其他参数
        //  返回由指定的 this 值和初始化参数改造的原函数拷贝
        //  因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

        // 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 btn1 = document.querySelector('button');
        // btn1.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');
        btns.forEach(function (value, i) {
            btns[i].onclick = function () {
                this.disabled = true;
                setTimeout(function () {
                    this.disabled = false;
                }.bind(this), 2000);
            }
        })
        // 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.6 call apply bind 总结

image-20230501181627571

3. 严格模式

3.1 什么是严格模式

image-20230501181643749

3.2 开启严格模式

image-20230501181652153

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 1.为整个脚本(script标签)开启严格模式 -->
<script>
    // 为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句“use strict”;（或‘use strict’;）。
    'use strict';
	// 因为"use strict"加了引号，所以老版本的浏览器会把它当作一行普通字符串而忽略。
	// 下面的js 代码就会按照严格模式执行代码
</script>

<script>
    // 有的 script 基本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件
    // 放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。
    (function () {
    'use strict';
})();
</script>

<!-- 2.为某个函数开启严格模式 -->
<script>
    // 此时只是给fn函数开启严格模式
    function fn() {
    'use strict';
    // 下面的代码按照严格模式执行
}

function fun() {
    // 里面的还是按照普通模式执行
}
</script>

3.3 严格模式中的变化

image-20230501181824808

image-20230501181832032

image-20230501181839559

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
'use strict';
// 1. 我们的变量名必须先声明再使用
// num = 10;
// console.log(num);//undefind
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();//undefind
var ldh = new Star();
console.log(ldh.sex);

// 5. 定时器 this 还是指向 window 
setTimeout(function() {
    console.log(this);
}, 2000);

a = 1;
a = 2;
// 6. 严格模式下函数里面的参数不允许有重名
function fn(a, a) {
    console.log(a + a);
};
fn(1, 2);
function fn() { }

// 函数必须声明在顶层.新版本的 JavaScript 会引入“块级作用域”（ ES6 中已引入）。
// 为了与新版本接轨，不允许在非函数的代码块内声明函数。

4. 高阶函数

image-20230501181924896

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>
    <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);
            callback && callback();
        }
        fn(1, 2, function () {
            console.log('我是最后调用的');
        });

        $("div").animate({
            left: 500
        }, function () {
            $("div").css("backgroundColor", "purple");
        })
    </script>
</body>

</html>

5. 闭包

5.1 变量作用域

image-20230501182012472

5.2 什么是闭包

闭包是指在一个函数内部创建另一个函数，并返回该函数，从而形成一个闭合的函数环境，使得内部函数可以访问外部函数的变量和参数。

具体来说，当一个函数返回另一个函数时，如果内部函数引用了外部函数的变量或参数，那么这些变量或参数就会被保留在内存中，即使外部函数已经执行完成并返回了，这些变量或参数仍然可以被内部函数访问和使用，这种现象就称为闭包。

image-20230501182025183

5.3 闭包的作用

闭包的用途非常广泛，可以用于封装变量，实现模块化，延迟执行函数等等。例如，下面的代码演示了如何使用闭包实现一个简单的计数器：

1
2
3
4
5
6
7
8
9
10
11
12
function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3

在这个例子中，createCounter 函数返回了一个内部函数，该函数引用了外部函数的变量 count，并且每次被调用时都会将 count 的值加 1 并输出。由于内部函数和外部函数形成了闭合的环境，所以 count 的值得以保留，并且每次调用内部函数时都会更新。通过这种方式，我们就实现了一个简单的计数器功能，并且可以多次重复使用该计数器而不影响其他计数器的值。

image-20230501182230011

5.4 闭包的案例

  • 循环注册点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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的索引号
        var lis = document.querySelectorAll("li");

        // 1.动态添加属性的方式
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].setAttribute("index", i);
        //     lis[i].onclick = function () {
        //         console.log(this.getAttribute("index"));
        //     }
        // }
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].index = i;
        //     lis[i].onclick = function () {
        //         console.log(this.index);
        //     }
        // }

        // 2.利用闭包的方式得到当前小li的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也称为小闭包，因为立即执行函数里的任何一个函数都可以使用他的i变量
            (function (i) {
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i);
        }
    </script>
</body>

</html>
  • 循环中的 setTimeout()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
  • 计算打车价格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 闭包应用-计算打车价格 
// 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
// 如果有拥堵情况,总价格多收取10块钱拥堵费
// function fn() {};
// fn();
var carPrice = (function () {
    var begin = 13
    var total = 0
    return {
        // 常规价
        conventional: function (input) {
            if (input >= 3) {
                total += begin + (input - 3) * 5
            } else {
                total += begin
            }
            return total
        },
        // 拥堵价
        congestion: function (flag) {
            flag === 'yes' ? flag = true : flag = false
            console.log(flag);
            return flag ? total + 10 : total
        }
    }
})()
var input = parseInt(prompt('请输入公里数'))
alert('接下来判断是否拥堵，\n是就填yes,\n否就不填或者乱填')
var input2 = prompt('是否拥堵（yes or not）')
var sumPrice = carPrice.congestion(input2) + carPrice.conventional(input)
alert('车费为：' + sumPrice);

5.5 思考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 思考题 1：
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            console.log(this);
            return this.name;//这里的this指向window
        };
    }
};
console.log(object.getNameFunc()())
// window的全局里有个var name = "The Window";
// 所以结果是The Window

// 类似于
// var f = object.getNameFunc();
// var f = function () {
//     return this.name; //这里的this指向window
// }
// f();

// 思考题 2：
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        var that = this;//这里的this指向object对象
        console.log(this);
        return function () {
            return that.name;
        };
    }
};
console.log(object.getNameFunc()())
// window的全局里有个 name: "My Object"
// 所以结果是My Object

// 类似于
// var f = object.getNameFunc();
// var f = function () {
//     return that.name; //这里的this指向object对象
// }
// f();

5.6 闭包总结

image-20230501182639326

6. 递归

6.1 什么是递归

image-20230501182715956

6.2 利用递归求数学题

  • 求 1 * 2 *3 … * n 阶乘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// function factorial(n) {
//     let result = 1;
//     for (let i = 2; i <= n; i++) {
//         result *= i;
//     }
//     return result;
// }

// console.log(factorial(5)); // 输出120

// 利用递归函数求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
  • 求斐波那契数列
1
2
3
4
5
6
7
8
9
10
11
// 利用递归函数求斐波那契数列(兔子序列)  0、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(5));

6.3 递归遍历数据

在JavaScript中，递归遍历数据通常通过使用函数来实现，该函数在遍历数据时递归调用自身。以下是一个简单的示例，演示如何使用递归遍历一个包含嵌套对象和数组的数据结构：

1
2
3
4
5
6
7
8
9
function traverse(data) {
  if (Array.isArray(data)) { // 如果是数组
    data.forEach(item => traverse(item)); // 遍历数组中的每个元素
  } else if (typeof data === 'object' && data !== null) { // 如果是对象
    Object.values(data).forEach(value => traverse(value)); // 遍历对象中的每个属性值
  } else { // 如果是基本数据类型，直接输出
    console.log(data);
  }
}

这个函数接受一个参数 data，它可以是任意的 JavaScript 数据类型，包括嵌套的对象和数组。首先，它检查 data 是否是数组类型，如果是，则遍历数组中的每个元素，并递归调用 traverse 函数，以便处理嵌套的数据。如果 data 是对象类型，则遍历对象的所有属性值，并递归调用 traverse 函数，以便处理嵌套的数据。最后，如果 data 是基本数据类型，则直接输出它。

例如，假设有以下嵌套的数据结构：

1
2
3
4
5
6
7
8
9
10
const data = {
  name: 'Alice',
  age: 25,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  },
  hobbies: ['reading', 'hiking', 'traveling']
};

我们可以使用 traverse 函数遍历这个数据结构：

1
traverse(data);

这将输出以下内容：

1
2
3
4
5
6
7
8
Alice
25
123 Main St
Anytown
CA
reading
hiking
traveling
  • 输入id号，就可以返回数据对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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去遍历data里的每一个对象
function getID(json, id) {
    // 3.定义一个对象保存筛选过的数据
    var screen = new Object()
    json.forEach(function (item, index) {
        // console.log(item);//俩个数组元素
        if (item.id == id) {
            // console.log(item);
            screen = item//将筛选过的数据赋给screen
            return item

        } else if (item.goods && item.goods.length > 0) { // 2.获取里层得数据:条件：里层要有goods数组，且数组长度不为0
            screen = getID(item.goods, id)
        }
    })
    return screen
}
console.log(getID(data, 1))
console.log(getID(data, 11))
console.log(getID(data, 111))
console.log(getID(data, 112))
console.log(getID(data, 12))
console.log(getID(data, 2))

7. 浅拷贝

浅拷贝是一种对象复制的方法，它只复制对象本身以及对象中的基本数据类型的值，而不会复制对象中的引用类型的值。换句话说，浅拷贝只是复制了对象的第一层属性，而没有递归地复制对象的所有属性。

常见的浅拷贝方法包括：

  1. 手动遍历对象并复制属性：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function shallowCopy(obj) {
      const newObj = {};
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          newObj[key] = obj[key];
        }
      }
      return newObj;
    }

  2. 使用 Object.assign() 方法(ES6)：

    1
    2
    const obj = { a: 1, b: { c: 2 } };
    const newObj = Object.assign({}, obj);

需要注意的是，使用浅拷贝方法复制对象时，如果对象中有引用类型的值，那么复制后的对象和原对象将共享这些引用类型的值。也就是说，如果修改了复制后的对象中的引用类型的值，那么原对象中相应的值也会受到影响。

例如，下面的代码演示了如何使用浅拷贝方法复制一个对象：

1
2
3
4
const obj = { a: 1, b: { c: 2 } };
const newObj = Object.assign({}, obj);
newObj.b.c = 3;
console.log(obj.b.c); // 输出 3

在这个例子中，我们复制了一个包含了一个引用类型属性的对象 obj，然后修改了复制后的对象 newObj 中的引用类型属性 b.c 的值，发现原对象 obj 中的相应属性也被修改了，说明复制后的对象和原对象共享了引用类型属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 1.浅拷贝:只是拷贝一层，更深层次对象级别的只拷贝引用

// 1.定义一个obj对象
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
}
// 2.定义一个newObj对象
var newObj = {}
// 3.通过for in方法将obj对象拷贝给newObj对象
// for (var k in obj) {
//     // k 变量  得到的是 属性名
//     // obj[k] 得到是 属性值
//     newObj[k] = obj[k]
// }
// // 打印测试
// console.log(newObj);
// // 以上代码是浅拷贝，而newObj对象里的age: 18 只是拷贝obj对象里的age: 18的一个地址，俩个对象指向同一个地址
// newObj.msg.age = 20
// // 此时俩个对象的msg.age=20
// console.log(obj);

// 3.Object..assign(target.sources)es6新增方法可以浅拷贝
// 第一个参数为目标对象
// 第二个参数为要拷贝的对象
console.log('---------------------');
Object.assign(newObj, obj)
console.log(newObj);
// // 以上代码是浅拷贝，而newObj对象里的age: 18 只是拷贝obj对象里的age: 18的一个地址，俩个对象指向同一个地址
newObj.msg.age = 20
// // 此时俩个对象的msg.age=20
console.log(obj);

8. 深拷贝

深拷贝是一种对象复制的方法，它不仅复制对象本身，还递归地复制对象中的所有属性和子属性，包括值类型的属性和引用类型的属性。换句话说，深拷贝会完整地复制一个对象的所有内容，而不是只复制对象的第一层属性。

常见的深拷贝方法包括：

  1. 使用 JSON 序列化和反序列化：
1
2
const obj = { a: 1, b: { c: 2 } };
const newObj = JSON.parse(JSON.stringify(obj));

这种方法的缺点是，它无法复制对象中的函数和符号类型的值，并且会忽略对象中的循环引用。

  1. 使用递归遍历对象并复制属性：
1
2
3
4
5
6
7
8
9
10
11
12
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  const newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }
  return newObj;
}

这种方法会递归地遍历对象并复制所有属性和子属性，即使对象中有函数和符号类型的值，也会被复制。但是这种方法也会忽略对象中的循环引用。

需要注意的是，深拷贝可能会导致性能问题，尤其是在拷贝大型复杂对象时，因为递归遍历对象的过程需要消耗大量的计算资源。因此，在选择深拷贝方法时需要权衡性能和功能需求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 2.深拷贝:拷贝多层，每一级别的数据都会拷贝.

// 1.定义一个obj对象
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    },
    can: ['dance', 'sing', 'rap']
}
// 2.定义一个newObj对象
var newObj = {}
// 通过函数递归的方式来实现深拷贝
// 封装函数
function deepCopy(newObj, oldObj) {
    // .通过for in方法将obj对象拷贝给newObj对象
    for (var k in oldObj) {
        // 判断属性值属于哪种数据类型
        // 1.获取属性值 oldObj[k]
        var item = oldObj[k]

        if (item instanceof Array) {// 2.判断是否是数组(数组也属于对象，所以先写在上面)
            newObj[k] = new Array()
            // console.log(oldObj[k]);
            deepCopy(newObj[k], item)
        }
        else if (item instanceof Object) {// 3.判断是否是对象
            newObj[k] = new Object()
            // console.log(oldObj[k]);
            deepCopy(newObj[k], item)
        } else {// 4.判断是否是简单数据类型
            newObj[k] = item
        }
    }
}
// 调用深拷贝递归函数
deepCopy(newObj, obj)
console.log(newObj);

//深拷贝是指复制出来的对象和原对象不共享同一内存空间，
// 也就是说，两个对象的属性值相同，但它们引用的对象是不同的，修改其中一个对象的属性值不会影响到另一个对象的属性值
newObj.msg.age = 20
console.log(obj);

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~