A brief introduction to shallow copy and deep copy in js and how to implement them-JS Tutorial-php.cn

A brief introduction to shallow copy and deep copy in js and how to implement them

不言

Release： 2018-08-11 16:09:58

Original

1836 people have browsed it

This article brings you a brief introduction and implementation methods of shallow copy and deep copy in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First statement: What data type can be copied? Undoubtedly, arrays and objects [Array&Object]

Shallow copy:

* --- Method of copying data (shallow copy affects the original data)
* 1. Directly copy to variable //Shallow copy
* 2.Object.assign() //Object shallow copy
* 3.Array.prototype.concat() //Array shallow copy
* 4. Array.prototype.slice() //Array shallow copy

Deep copy:

Method 1:

//无嵌套对象或者数组浅拷贝
function simpleDeepClone(target){
       return JSON.parse(JSON.stringify(target));
}

Copy after login

Method 2:

//嵌套对象或者数组深拷贝
//定义检测数据类型的函数
function checkType(target) {
    return Object.prototype.toString.call(target).slice(8, -1);
}

//实现深度拷贝
function clone(target) {
    //判断拷贝的数据类型
    let result, targetType = checkType(target);
    if (targetType === &#39;Object&#39;) {
        result = {};
    } else if (targetType === &#39;Array&#39;) {
        result = [];
    } else {
        return target;
    }
    //遍历目标数据
    for (let i in target) {
        //获取数据对象的每一个值
        let value = target[i];
        //判断目标结构里面是否存在对象/数组
        if (checkType(value) === &#39;Object&#39; || checkType(value) === &#39;Array&#39;) {
            //继续遍历
            result[i] = clone(value);
        } else { //获取到的value值是基本的数据类型或者函数
            result[i] = value;
        }
    }
    return result;
}

Copy after login

Related recommendations:

jQuery’s $.extend shallow copy and deep copy example analysis

js implementation of deep and shallow copy methods

The above is the detailed content of A brief introduction to shallow copy and deep copy in js and how to implement them. For more information, please follow other related articles on the PHP Chinese website!