JavaScript 얕은 복사 구현

JavaScript 개발에서는 객체나 배열의 복사 작업을 처리해야 하는 경우가 많습니다. 실제 개발에서는 얕은 복사, 즉 한 개체나 배열의 내용을 다른 개체나 배열에 복사해야 하는 경우가 종종 있습니다. 복사된 새 개체나 배열은 원래 개체나 배열과 데이터의 일부를 공유합니다. 이 기사에서는 JavaScript에서 얕은 복사를 구현하는 방법을 소개합니다.

1. 얕은 카피란?

JavaScript에서 객체와 배열은 모두 참조 유형입니다. 객체나 배열을 새 변수에 할당하면 실제로는 원래 객체나 배열의 참조를 새 변수에 할당합니다.

예를 들어 다음 코드는 개체를 새 변수에 할당합니다.

let obj1 = { name: '张三', age: 18 };
let obj2 = obj1;

이 예에서 obj2와 obj1는 다음을 가리키는 두 개의 서로 다른 개체가 아닙니다. 같은 메모리 주소. obj2 和 obj1 并不是两个不同的对象，而是指向同一个内存地址的两个引用。

在实际开发中，我们可能需要将一个对象或数组的内容复制到另一个对象或数组中，这时就需要进行浅拷贝。

浅拷贝是指仅复制对象或数组的第一层数据结构，如果对象或数组中还包含对象或数组，复制后的新对象或数组与原对象或数组将共享这些引用类型的数据结构，如下图所示：

如图所示，对象 A 包含两个属性 a 和 b，属性 b 的值为一个对象 B，对象 B 又包含两个属性 c 和 d。当对对象 A 进行浅拷贝后，生成一个新的对象 C，对象 C 与对象 A 共享属性 a 和 b，即浅拷贝只复制了对象 A 的第一层结构，而对象 B 只是被引用了一次，对象 C 与对象 A 共享对象 B，即两个对象的地址相同。

二、浅拷贝实现方式

下面将介绍 JavaScript 中几种常见的浅拷贝实现方式。

1. 手动遍历

手动遍历对象或数组，将每个属性或元素复制到新的对象或数组中。这种方式简单易懂，代码可读性高，但对于嵌套层次较多的对象或数组，代码量将会很大。

function shallowCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.slice();
  } else if (typeof obj === 'object' && obj !== null) {
    let newObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
      }
    }
    return newObj;
  } else {
    return obj;
  }
}

在这个例子中，我们首先判断待拷贝的对象是数组还是对象。如果是数组，我们使用 slice() 方法进行浅拷贝；如果是对象，我们通过循环遍历对象的属性，并将每个属性复制到新对象中，最后返回新对象。

2. Object.assign()

Object.assign() 方法用于将一个或多个对象的属性复制到目标对象中，如果多个对象具有相同的属性，则后续对象中的属性将覆盖先前对象中的属性。Object.assign() 方法只会复制对象的第一层数据结构，如果对象中包含引用类型的属性，则新对象与原对象将共享这些引用类型的属性。

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = Object.assign({}, obj1);

在这个例子中，我们使用 Object.assign() 方法将对象 obj1 复制到一个新的空对象中，生成一个新的对象 obj2。

注意，使用 Object.assign() 方法时，第一个参数必须是目标对象，后面的参数是源对象，如果源对象具有相同的属性，则后续对象中的属性将覆盖先前对象中的属性。如果源对象中有属性是引用类型，那么复制后的新对象将与原对象共享这些属性。

3. 扩展运算符

扩展运算符（spread operator）是 ES6 中新增的语法，可以用于展开数组或对象，将它们的内容复制到另一个数组或对象中。扩展运算符只能用于对象或数组的第一层数据结构，如果对象或数组中包含引用类型的属性，则新对象或数组与原对象或数组将共享这些属性。

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = { ...obj1 };

在这个例子中，我们使用扩展运算符将数组 arr1 和对象 obj1 的内容复制到新的数组和对象中，生成新的数组 arr2 和对象 obj2。

扩展运算符使用起来方便简洁，代码可读性高，但对于嵌套层次较多的对象或数组，代码量还是比较大。

4. Array.from()

Array.from() 方法用于将一个类数组对象或可迭代对象转换成一个新的数组，可以用于数组的浅拷贝。

let arr1 = [1, 2, 3];
let arr2 = Array.from(arr1);

在这个例子中，我们使用 Array.from() 方法将数组 arr1 转换成一个新的数组 arr2，实现了浅拷贝。

需要注意的是，Array.from()

실제 개발에서는 한 객체나 배열의 내용을 다른 객체나 배열에 복사해야 할 수도 있으며, 이 경우 얕은 복사본이 필요합니다.

얕은 복사는 객체 또는 배열의 첫 번째 수준 데이터 구조만 복사하는 것을 의미합니다. 객체 또는 배열에 객체 또는 배열도 포함되어 있는 경우 복사된 새 객체 또는 배열과 원본 객체 또는 배열은 이러한 참조 유형 데이터 구조를 공유합니다. . 아래 그림과 같습니다: 🎜🎜🎜🎜에 표시된 대로 그림, 객체 A에는 두 개의 속성 a와 b가 포함되어 있고, 속성 b의 값은 객체 B이며, 객체 B에는 두 개의 속성 c와 d가 포함되어 있습니다. 객체 A의 얕은 복사본이 생성되면 새 객체 C가 생성됩니다. 객체 C는 객체 A와 속성 a 및 b를 공유합니다. 즉, 얕은 복사본은 객체 A의 첫 번째 수준 구조만 복사하고 객체 B는 속성만 복사합니다. 객체 C와 객체 A는 객체 B를 공유합니다. 즉, 두 객체의 주소가 동일합니다. 🎜🎜2. 얕은 복사 구현 방법🎜🎜다음은 JavaScript의 몇 가지 일반적인 얕은 복사 구현 방법을 소개합니다. 🎜

1. 수동 순회

🎜 각 속성이나 요소를 새 개체나 배열에 복사하여 개체나 배열을 수동으로 순회합니다. 이 방법은 간단하고 이해하기 쉬우며 코드 가독성이 높습니다. 그러나 중첩된 수준이 많은 객체나 배열의 경우 코드 양이 매우 많습니다. 🎜rrreee🎜이 예에서는 먼저 복사할 개체가 배열인지 개체인지 확인합니다. 배열인 경우 slice() 메서드를 사용하여 얕은 복사본을 만듭니다. 객체인 경우 객체의 속성을 반복하여 각 속성을 새 객체에 복사합니다. 마지막으로 새 객체를 반환합니다. 🎜

2. Object.sign()

🎜Object.sign() 메서드는 하나 이상의 객체 속성을 복사하는 데 사용됩니다. 대상 개체에 대해 여러 개체가 동일한 속성을 갖는 경우 후속 개체의 속성이 이전 개체의 속성을 덮어씁니다. Object.sign() 메서드는 객체의 첫 번째 수준 데이터 구조만 복사합니다. 객체에 참조 유형 속성이 포함되어 있으면 새 객체와 원본 객체는 이러한 참조 유형 속성을 공유합니다. 🎜rrreee🎜이 예에서는 Object.sign() 메서드를 사용하여 obj1 객체를 새로운 빈 객체에 복사하여 새로운 객체 obj2를 생성합니다. 🎜🎜 Object.sign() 메서드를 사용할 때 첫 번째 매개변수는 대상 객체여야 하고, 후속 매개변수는 소스 객체여야 합니다. 소스 객체가 동일한 속성을 갖는 경우 속성은 후속 개체에서 이전 개체의 속성을 덮어씁니다. 소스 개체에 참조 유형인 속성이 있는 경우 복사된 새 개체는 이러한 속성을 원래 개체와 공유합니다. 🎜

3. 확산 연산자

🎜확산 연산자는 ES6의 새로운 구문으로, 배열이나 객체를 확장하는 데 사용할 수 있습니다. 내용은 다음에 복사됩니다. 다른 배열이나 객체. 스프레드 연산자는 객체나 배열의 첫 번째 수준 데이터 구조에서만 사용할 수 있습니다. 객체나 배열에 참조 유형의 속성이 포함되어 있으면 새 객체나 배열은 이러한 속성을 원래 객체나 배열과 공유합니다. 🎜rrreee🎜이 예에서는 스프레드 연산자를 사용하여 배열 arr1 및 객체 obj1의 내용을 새 배열 및 객체에 복사하여 새 배열 arr2 및 객체 obj2를 생성합니다. 🎜🎜스프레드 연산자는 사용하기 편리하고 간결하며 코드 가독성이 높습니다. 그러나 중첩 수준이 많은 객체나 배열의 경우 코드 양이 여전히 상대적으로 많습니다. 🎜

4. Array.from()

🎜Array.from() 메서드는 배열과 유사한 객체 또는 반복 가능한 객체를 변환하는 데 사용됩니다. object 배열의 얕은 복사본에 사용할 수 있는 새 배열로 변환합니다. 🎜rrreee🎜이 예에서는 Array.from() 메서드를 사용하여 배열 arr1을 새 배열 arr2로 변환하고 얕은 복사본을 구현합니다. 🎜🎜 Array.from() 메서드는 배열형 객체나 반복 가능한 객체의 얕은 복사본에만 사용할 수 있다는 점에 유의하세요. 다른 방법을 사용해야 합니다. 🎜🎜3. 요약🎜

이 기사에서는 수동 순회, Object.sign() 메서드, 스프레드 연산자 및 Array.from() 메서드를 포함하여 JavaScript의 얕은 복사본 구현을 소개합니다. 실제 개발에서는 실제 필요에 따라 얕은 복사 작업을 수행하는 데 가장 적합한 방법을 선택할 수 있습니다. 얕은 복사는 개체나 배열의 첫 번째 수준 데이터 구조만 복사한다는 점에 유의해야 합니다. 개체나 배열에 참조 유형 특성이 포함되어 있으면 얕은 복사로 복사된 새 개체나 배열은 이러한 특성을 원래 개체나 배열과 공유합니다. . 전체 복사를 구현해야 하는 경우 다른 방법을 사용하여 작동해야 합니다.

위 내용은 JavaScript 얕은 복사 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!