>웹 프론트엔드 >JS 튜토리얼 >js의 얕은 복사와 깊은 복사에 대한 간략한 소개와 구현 방법

js의 얕은 복사와 깊은 복사에 대한 간략한 소개와 구현 방법

不言
不言원래의
2018-08-11 16:09:581866검색

이 글은 js의 얕은 복사(shallow copy)와 깊은 복사(deep copy)에 대한 간략한 소개와 구현 방법을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

첫 번째 설명: 어떤 데이터 유형을 복사할 수 있나요? 틀림없이 배열과 객체 [Array&Object]

Shallow copy:

* --- 데이터를 복사하는 방법(원본 데이터에 영향을 미치는 것은 얕은 복사본)
* 1. 변수에 직접 복사 //Shallow copy
* 2. Object.sign() //객체 얕은 복사
* 3.Array.prototype.concat() //배열 얕은 복사
* 4.Array.prototype.slice() //배열 얕은 복사

깊은 복사:

방법 1:

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

방법 2:

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

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

관련 권장 사항:

jQuery의 $.extend 얕은 복사 및 전체 복사 예제 분석

js의 깊은 복사본과 얕은 복사본 구현 방법

위 내용은 js의 얕은 복사와 깊은 복사에 대한 간략한 소개와 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.