한 기사에서 JavaScript로 개체를 병합하고 복제하는 방법을 알아보세요.

이 글에서는 JavaScript에서 객체를 병합하고 복제하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

기본 값과 참조 값(객체)은 복사하려고 할 때 매우 다르게 동작합니다.

기본 값

변수 name에는 이와 관련된 기본 값(숫자, 문자열, 부울, 정의되지 않음 및 null)이 있다고 가정합니다. 이 변수 name을 다른 변수 name2에 복사하면 원래 변수에 대한 수정 사항은 원래 값이므로 두 번째 변수에는 영향을 미치지 않습니다. name 具有一个与之关联的原始值（number，string，boolean，undefined 和null）。 如果我们将此变量 name 复制到另一个变量name2 ，则原始变量的任何修改都不会影响到第二个变量，因为它们是原始值。

let name="前端小智";
let name2= name;
console.log (name, name2); // 前端小智, 前端小智
name="王大冶";
console.log (name,name2); // 王大冶 前端小智

引用值

但是，如果我们对引用类型的值进行相同的操作，则我们对一个变量所做的任何更改也将反映在另一个变量中，因为两个变量都指向同一对象。

数组

要拷贝数组，slice()方法用于创建数组的新副本。 可以独立修改此副本，而不会影响原始数组。

如果未传递任何参数，则它会精确复制数组，但数字也可以作为参数传递。 如果仅传递一个数字，它将确定我们要从其进行复制的索引的值，而如果传递两个数字，则将标记开始和结束。

// 示例1
const names = ['前端小智', '王大冶', '小力'];
const names2 = names;
console.log(names, names2);
// ["前端小智", "王大冶", "小力"] 
// ["前端小智", "王大冶", "小力"] 

// 示例2
names2[2] = '前端小力';
console.log(names, names2);
//  ["前端小智", "王大冶", "前端小力"] 
//  ["前端小智", "王大冶", "前端小力"] 

// 示例3
const name2 = names.slice();
names[2] = '我是隔壁老智';
console.log(name2, names2)
// ["前端小智", "王大冶", "前端小力"]
//  ["前端小智", "王大冶", "我是隔壁老智"]

对象

当引用值是一个对象时，也会发生同样的情况，对其属性之一的任何修改都会影响这两个变量。 若要克隆对象，请使用 Object.assign() 方法，该方法会将一个或多个源对象的所有可枚举属性的值复制到目标对象，但是此方法仅对对象的一个浅拷贝。

// 示例1
const names = {
  name: '前端小智',
  surname: '隔壁老智'
}

const names2 = names;
console.log(names, names2) // 打印结果是一模一样的

// 示例2
names2.surname ='隔壁老王';
console.log(names, names2)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老王"}

// 示例3
const names3 = Object.assign({}, names);
names3.surname = '隔壁老色P';
console.log(names, names3)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老色P"}

要对对象进行深拷贝，需要使用其他方法。

正如我们所说，Object.assign()方法只是一个浅拷贝（即，当我们的对象没有其他对象作为属性时）才有效。 在这些情况下，必须对对象进行深拷贝。

与浅拷贝不同，深拷贝以递归方式复制每个子对象，直到所有涉及的对象都被复制为止。

我们可以使用什么方法复制对象的深层副本？

JSON.parse(JSON.stringify(obj))

此方法使用JSON.stringify()将对象转换为字符串，然后再用JSON.parse()将其转换回对象。 此方法对简单对象有效，但如果对象属性是函数时无效。

const names = {
  name: '前端小智',
  surname: '隔壁老智',
  social: {
    wx: '大迁世界',
    url: 'www.lsp.com'
  }
}
const names2 = JSON.parse(JSON.stringify(names));
names2.social.url = 'www.baidu.com';
console.log(names, names2);

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.lsp.com"}
  surname: "隔壁老智"
}
*/

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.baidu.com"}
  surname: "隔壁老智"
}
*/

深度拷贝

另一种非常有趣和优雅的对象深度复制方法是使用递归函数。

我们创建了一个deepClone(object)函数，将想要克隆的对象作为参数传递给它。在函数内部，将创建一个局部变量克隆，这是一个空对象，其中将从起始对象克隆的每个属性都将添加到该对象中。

具体思路：

• 如果该属性不是对象，则将其简单地克隆并添加到新的克隆对象中。
• 如果属性是对象，则再次执行deepClone（value）

  function deepClone(object) {
    var clone = {};
    for (var key in object) {
      var value = object[key];
      if (typeof(value) !== 'object') {
        clone[key] = value;
      } else {
        clone[key]=deepClone(value);
      }
    }
    return clone;
  } 
  
  deepClone({value1:1,value2:{value3:2}});
  //{value1:1,value2:{value3:2}}
  deepClone({value1:1,value2:{value3:{value3b:3}}});
  //{value1:1,value2:{value3:{value3b:3}}}

  참조 값

  그러나 참조 유형 값으로 동일한 작업을 수행하면 두 변수가 모두 동일한 개체를 가리키므로 한 변수에 대한 모든 변경 사항이 다른 변수에도 반영됩니다.

  Arrays

  배열을 복사하려면 slice() 메서드를 사용하여 배열의 새 복사본을 만듭니다. 이 사본은 원본 배열에 영향을 주지 않고 독립적으로 수정될 수 있습니다. 인수가 전달되지 않으면 배열의 정확한 복사본이 만들어지지만 숫자도 인수로 전달될 수 있습니다. 하나의 숫자만 전달되면 복사하려는 인덱스의 값을 결정하고, 두 개의 숫자가 전달되면 시작과 끝을 표시합니다.

  rrreee🎜🎜Objects🎜🎜🎜참조 값이 객체일 때도 마찬가지입니다. 해당 속성 중 하나를 수정하면 두 변수 모두에 영향을 미칩니다. 객체를 복제하려면 하나 이상의 소스 객체의 모든 열거 가능한 속성 값을 대상 객체에 복사하는 Object.sign() 메서드를 사용하십시오. 그러나 이 방법은 객체 A에만 적용됩니다. . 🎜rrreee🎜객체의 전체 복사본을 만들려면 다른 방법을 사용해야 합니다. 🎜🎜우리가 말했듯이 Object.sign() 메서드는 얕은 복사본(즉, 객체에 속성으로 다른 객체가 없는 경우)으로만 작동합니다. 이러한 경우 개체의 전체 복사본을 만들어야 합니다. 🎜🎜얕은 복사와 달리 전체 복사는 관련된 모든 개체가 복사될 때까지 각 하위 개체를 반복적으로 복사합니다. 🎜🎜객체의 전체 복사본을 만들려면 어떤 방법을 사용할 수 있나요? 🎜🎜🎜JSON.parse(JSON.stringify(obj))🎜🎜🎜이 메서드는 JSON.stringify()를 사용하여 개체를 문자열로 변환한 다음 JSON.parse( ) 다시 개체로 변환합니다. 이 방법은 단순한 객체에는 작동하지만 객체 속성이 함수인 경우에는 작동하지 않습니다. 🎜rrreee🎜🎜Deep Copy🎜🎜🎜객체를 깊은 복사하는 또 다른 매우 흥미롭고 우아한 방법은 재귀 함수를 사용하는 것입니다. 🎜🎜 deepClone(object) 함수를 생성하고 복제하려는 객체를 매개변수로 전달합니다. 함수 내부에는 시작 개체에서 복제될 모든 속성이 추가되는 빈 개체인 로컬 변수 clone이 생성됩니다. 🎜🎜구체적인 아이디어: 🎜
  • 속성이 개체가 아닌 경우 간단히 복제하여 새로 복제된 개체에 추가하세요. 🎜
  • 속성이 객체인 경우 deepClone(value) 함수를 다시 실행하고 속성(이 경우 객체)의 값을 매개변수로 전달하고 동일한 과정을 반복합니다. 🎜🎜rrreee🎜🎜영어 원본 주소: https://www.ma-o.org/en/programming/javascript/the-javascript-asign-method-to-merge-and-clone-objects🎜🎜저자: Luigi Nori 🎜🎜번역자: 프론트엔드 Xiaozhi🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

  위 내용은 한 기사에서 JavaScript로 개체를 병합하고 복제하는 방법을 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!