es6에서 객체 복사를 구현하는 방법

구현 방법: 1. 객체의 첫 번째 레이어 속성을 복사하는 얕은 복사를 구현하려면 "Object.sign()"을 사용하세요. 2. 확산 연산자를 사용하여 얕은 복사를 구현합니다. 구문은 "{ ...obj };"입니다. 3. "JSON.stringify()"를 사용하여 깊은 복사를 구현하는 것이 원칙입니다. 객체를 JSON 문자열로 직렬화하고 객체의 내용을 문자열로 변환하여 디스크에 저장한 다음 JSON.parse( ) 역직렬화는 JSON 문자열을 새로운 객체로 변환합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

객체의 전체 복사와 얕은 복사를 이해하기 전에 먼저 JavaScript의 데이터 유형을 알아야 합니다. JavaScript에는 기본 데이터 유형과 참조 데이터 유형이라는 두 가지 주요 데이터 유형이 포함되어 있습니다.

기본 데이터 유형

기본 데이터 유형은 값이 스택에 저장되는 단순 데이터입니다. 예:

    let a = '123';
    let b = 2;

JavaScript의 기본 데이터 유형은 String, Number, Boolean, Undefine, Null, Symbol(ES6의 새로운 기능)입니다. 기본 데이터 유형은 값으로 액세스됩니다. 예를 들어 변수 a가 변수 b에 할당된 경우 변수 a의 값을 수정해도 변수 b의 값에는 영향을 미치지 않으며 서로 독립적이므로 서로 영향을 주지 않습니다. 두 변수는 스토리지 스택에서 각각 공간을 할당받습니다. String、Number、Boolean、Undefined、Null、Symbol(ES6新增的)。基本数据类型都是按值访问的。比如把变量a赋值给变量b，修改变量a的值不会影响变量b的值，它们两个是互相独立的，互不影响。在存储栈中这个两个变量分别分配了空间。

    let a = '123';
    let b = a;
    a = 10;
    console.log(a) // 10
    console.log(b) // 123

引用数据类型

引用类型值是引用类型的实例，它是保存在堆内存中的一个对象，引用类型是一种数据结构，最常用的是Object,Array,Function类型，另外还有Date,RegExp,Error等，ES6同样也提供了Set,Map2种新的数据结构。

    let obj1 = {
        a: '1'
    }
    let obj2 = obj1;
    obj1.a = '2';

    console.log(obj1.a); // 2
    console.log(obj2.a) // 2

看看上面的代码，发现和基本数据类型的结果不太一样，我们把obj1赋值给了obj2，修改obj1的值，obj2的值也发生了改变。由于引用数据类型的值是存储的堆内存中，而在栈内存中存储了指向堆内存中的指针（地址），我们上面代码中的赋值操作只是赋值了指针（地址）。而指针指向的堆内存还是同一个。

浅拷贝

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

JavaScript中常见的一些浅拷贝方法

Object.assign()

    let target = {}; // 目标对象
    let source = {
        a: 1
    } // 原对象

    Object.assign(target, source);
    console.log(target.a); // 1
    source.a = 2;
    console.log(source.a); // 2
    console.log(target.a); // 1

Object.assign()是一个浅拷贝，它值拷贝了对象的第一层属性。如果对象的属性仍然是一个对象，就无法实现拷贝了。

除了Object.assign()能实现对象的浅拷贝之外，扩展运算符var cloneObj = { ...obj }; Array.prototype.slice()、也都是浅拷贝。

手动实现一个浅拷贝

    function shalldowCopy(source) {
        let obj = Array.isArray(origin) ? [] : {}; // 目标对象
        for(let prop in source) {
            if (src.hasOwnProperty(prop)) {
                target[prop] = source[prop];
            }
        }
        return target;
    }

测试一下

var sourceObj = { a:1, arr: [2,3] };
var targetObject = shallowCopy(sourceObj);

因为浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅拷贝会导致 sourceObj.arr 和 targetObject.arr 指向同一块内存地址。所以导致的结果就是：

shallowObj.arr[1] = 5;
obj.arr[1]; // = 5

深拷贝

深拷贝就是指将一个对象完整的复制一份新的出来，在堆内存中开辟一份新的存储空间。如果对象的属性是对象，也依旧会拷贝。

JavaScript中常见的一些深拷贝方法

JSON.stringify()

JSON.stringify()是目前前端开发过程中最常用的深拷贝方式，原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()

    let target = {}; // 目标对象
    let source = {
        a: 1,
        b: {
            d: 3
        }
    } // 原对象
    let targetStr = JSON.stringify(source);
    let target = JSON.parse(targetStr);
    console.log(target); // {a: 1, b: {d: 3}}
    source.b.d = 10;
    console.log(source); // {a: 1, b: {d: 10}}
    console.log(target); // {a: 1, b: {d: 3}}

참조 데이터 유형

참조 유형 값은 힙 메모리에 저장된 객체입니다. 일반적으로 사용되는 유형은 Object, Array, Function이며 Date, RegExp, Error 등도 있습니다. ES6에서는 새로운 유형의 Set, Map2도 제공합니다. 데이터 구조.

/**
 *  深拷贝
 * @param {*} origin 
 */
function deepCopy(origin) {
    let obj = Array.isArray(origin) ? [] : {};
    if (origin && typeof origin === 'object') {
        for(let key in origin) {
            let item = origin[key];
            if (item && typeof item === 'object') {
                obj[key] = deepCopy(item); 
            } else {
                obj[key] = item;
            }
        }
    }
    return obj;
}

위 코드를 보면 기본 데이터 타입과 결과가 다른 것을 발견했습니다. obj1을 obj2에 할당하고, obj1의 값을 수정하고, obj2의 값도 변경했습니다. 참조 데이터 유형의 값은 힙 메모리에 저장되고, 힙 메모리를 가리키는 포인터(주소)는 스택 메모리에 저장되므로 위 코드의 할당 연산에서는 포인터(주소)만 할당됩니다. 포인터가 가리키는 힙 메모리는 여전히 동일합니다.

Shallow copy

Shallow copy는 객체의 비트 단위 복사본입니다. 원본 객체의 속성 값과 동일한 복사본을 갖는 새 객체를 생성합니다. 속성이 기본 유형이면 기본 유형의 값이 복사됩니다. 속성이 메모리 주소(참조 유형)이면 메모리 주소가 복사되므로 객체 중 하나가 이 주소를 변경하면 다른 객체에도 영향을 미칩니다. 물체. JavaScript의 몇 가지 일반적인 얕은 복사 방법

🎜Object.sign()🎜🎜

var sourceObj = { a:1, arr: [2,3] };
var targetObject = deepCopy(sourceObj); 
shallowObj.arr[1] = 5;
obj.arr[1]; // = 3

🎜Object.sign()은 객체의 첫 번째 단일 레이어를 복사하는 얕은 복사본입니다. 속성. 개체의 속성이 여전히 개체인 경우 복사할 수 없습니다. 🎜🎜객체의 얕은 복사를 실현할 수 있는 Object.sign() 외에도 확장 연산자 var cloneObj = { ...obj }; Array.prototype.slice() code >도 얕은 복사본입니다. 🎜<h3 data-id="heading-4">🎜얕은 복사본을 수동으로 구현🎜🎜rrreee🎜테스트해 보세요🎜rrreee🎜얕은 복사본은 개체의 각 속성을 순서대로 복사하고 JavaScript 저장소를 재귀적으로 복사하지 않기 때문입니다. 개체는 주소에 있으므로 얕은 복사로 인해 <code>sourceObj.arr 및 targetObject.arr가 동일한 메모리 주소를 가리키게 됩니다. 결과는 다음과 같습니다. 🎜rrreee

🎜Deep copy🎜

🎜Deep copy는 객체의 전체 복사본을 만들고 힙 메모리에 새 저장 공간을 여는 것을 의미합니다. 객체의 속성이 객체인 경우에도 여전히 복사됩니다. 🎜🎜JavaScript🎜

🎜JSON.stringify()🎜🎜🎜JSON.stringify()의 일부 일반적인 전체 복사 방법은 현재 프런트엔드에 있습니다. 개발 프로세스 가장 일반적으로 사용되는 Deep Copy 방법으로, 객체를 JSON 문자열로 직렬화하고 객체 내용을 문자열 형식으로 변환하여 디스크에 저장한 후 JSON.parse()를 사용하는 것이 원칙입니다. code> JSON 문자열을 새 객체로 역직렬화🎜rrreee🎜🎜수동으로 전체 복사 구현🎜🎜rrreee🎜테스트하기🎜rrreee🎜【관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜프로그래밍 비디오🎜】🎜

위 내용은 es6에서 객체 복사를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!