> 웹 프론트엔드 > JS 튜토리얼 > JS 객체의 얕은 복제 및 심층 복제의 코드 예

JS 객체의 얕은 복제 및 심층 복제의 코드 예

不言
풀어 주다: 2019-01-18 11:03:59
앞으로
3192명이 탐색했습니다.

이 글은 JS 객체의 얕은 복제와 깊은 복제에 대한 코드 예제를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Shallow Clone

먼저 코드를 살펴보세요.

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

/**

 * 浅克隆 克隆传入对象,只克隆一层

 * @param {any} source

 */

function shallowClone(source) {

    var tiaget = createEctype(source);  //创建一个副本

    // 将原对象的所有属性值赋值到新对象上

    for (var property in source) {

        if (source.hasOwnProperty(property)) {

            tiaget[property] = source[property];

        }

    }

    /**

    * 创建副本

    * @param {any} source

    */

    function createEctype(source) {

        var newObject = {};

        if (Array.isArray(source))

            newObject = [];

        return newObject;

    }

 

    return tiaget;

}

로그인 후 복사

테스트 실행:

1

2

3

4

5

6

7

8

9

var a={a1:1,a2:2,a3:[1,2,3]};

 var b={b1:1,b2:2,b3:[4,5,6]}

 a.b=b;

 b.a=a;

 a.a4=[a,b];

 b.b4=[a,b];

 a.fn=function(){console.log(this.b);};

  

 var newa=shallowClone(a);

로그인 후 복사

테스트 코드는 자체 참조 개체를 정의합니다

1

2

a===a.a4[0];    // true

a===a.b.a;    // true

로그인 후 복사

shallowClone 메서드 실행 newa

1

2

3

4

5

a === newa;              // false

newa ===  newa.a4[0];    // false

newa ===   newa.b.a;     // false

a === newa.a4[0];        // true

a === newa.b.a;          // true

로그인 후 복사

의 개체 복사본을 얻었습니다. 테스트 실행 속도:

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

/**

获取传入方法在规定时间内执行次数

 

示例:

var test = function(){

 

};

runTime(test,1)

表示test方法 在1秒中执行了6819005次

**/

 

/**

 * 获取传入方法在规定时间内执行次数

 * @param {any} fn 执行的方法

 * @param {any} time 规定的时间,单位为秒

 */

function runTime(fn, time) {

    var startTime = Date.now();

    var count = 0;

    while (Date.now() - startTime < time * 1000) {

        fn.call();

        count++;

    }

    return count;

}

로그인 후 복사

JS 객체의 얕은 복제 및 심층 복제의 코드 예

딥 클론

코드:

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

/**

 * 深克隆

 *

 * 示例:

 * var a={a1:1,a2:2,a3:[1,2,3]};

 * var b={b1:1,b2:2,b3:[4,5,6]}

 * a.b=b;

 * b.a=a;

 * a.a4=[a,b];

 * b.b4=[a,b];

 * a.fn=function(){console.log(this.b);return this.b;};

 *

 * var newa=deepClone(a);

 * newa.a1=123;

 * newa.fn();

 */

function deepClone(source) {

    this.objKeyCache = [];      // 对象缓存

    this.objValueCache = [];    // 对象克隆缓存

 

    this.clone = function (source) {

        var target = createEctype.call(this, source);

        for (var property in source) {

            if (source.hasOwnProperty(property)) {

                var value = source[property];

                if (typeof value === "number"

                    || typeof value === "boolean"

                    || typeof value === "symbol"

                    || typeof value === "string"

                    || typeof value === "function"

                    || typeof value === "undefined"

                    || value === null)

                    target[property] = value;

                else if (typeof value === "object") {

                    // 如果源对象在对象缓存中存在,就用对象克隆缓存中的值赋值

                    var index = this.objKeyCache.indexOf(value);

                    if (index >= 0)

                        target[property] = this.objValueCache[index];  

                    else {

                        target[property] = this.clone( value);

                    }

                }

                else

                    throw "未知数据类型" + (typeof value);

            }

        }

 

        return target;

    };

    /**

     * 创建副本

     * @param {any} source

     */

    function createEctype(source) {

        var target = {};

        if (Array.isArray(source))

            target = [];

        this.objKeyCache.push(source);

        this.objValueCache.push(target);

        return target;

    }

    var newObject = this.clone(source);

    // 释放缓存,防止内存溢出

    this.objKeyCache = [];

    this.objValueCache = [];

    return newObject;

}

로그인 후 복사

실행 테스트:

1

2

3

4

5

6

7

8

9

var a={a1:1,a2:2,a3:[1,2,3]};

var b={b1:1,b2:2,b3:[4,5,6]}

a.b=b;

b.a=a;

a.a4=[a,b];

b.b4=[a,b];

a.fn=function(){console.log(this.b);return this.b;};

 

var newa=deepClone(a);

로그인 후 복사

1

2

3

4

5

a === newa;            // false

newa === newa.a4[0]    // true

newa === newa.b.a;     // true

a === newa.a4[0];      // false

a === newa.b.a;        // false

로그인 후 복사

JS 객체의 얕은 복제 및 심층 복제의 코드 예

테스트 실행 속도:

JS 객체의 얕은 복제 및 심층 복제의 코드 예

위 내용은 JS 객체의 얕은 복제 및 심층 복제의 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿