JavaScript中的Copy操作|极客笔记

JavaScript中的Copy操作

简介

在JavaScript中，Copy操作是指通过复制一个变量的内容或一个对象的属性，并创建一个新的副本。它在编程过程中非常常见，并且在处理数据或对象时非常有用。本文将详细介绍JavaScript中Copy的不同方式和应用场景，并提供示例代码和相关的运行结果。

浅拷贝 vs 深拷贝

在讨论Copy操作之前，首先需要了解两种常见的拷贝方式：浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。浅拷贝是指创建一个新对象，但它只是原始对象的一个引用，因此改变新对象会影响到原始对象。而深拷贝则是创建一个全新的对象，两个对象完全独立，互不影响。

浅拷贝

浅拷贝非常简单，可以通过以下几种方式进行实现：

扩展运算符(…)

let originalArray = ['a', 'b', 'c'];
let newArray = [...originalArray];
console.log(newArray);

运行结果:

[ 'a', 'b', 'c' ]

Array.from()

let originalArray = ['a', 'b', 'c'];
let newArray = Array.from(originalArray);
console.log(newArray);

运行结果:

[ 'a', 'b', 'c' ]

Object.assign()

let originalObj = { a: 1, b: 2 };
let newObj = Object.assign({}, originalObj);
console.log(newObj);

运行结果:

{ a: 1, b: 2 }

浅拷贝存在的问题

浅拷贝的问题在于，如果被拷贝的对象或数组中包含了引用类型的属性，那么拷贝结果中的这些属性仍然是原始对象的引用，改变新对象中这些属性的值会影响到原始对象。

let originalObj = { a: 1, b: { c: 2 } };
let newObj = Object.assign({}, originalObj);

newObj.b.c = 3;
console.log(originalObj.b.c);  // 输出3

深拷贝

在JavaScript中，实现深拷贝有多种方式，以下是其中几种常见的方法：

JSON.parse(JSON.stringify())

let originalObj = { a: 1, b: { c: 2 } };
let newObj = JSON.parse(JSON.stringify(originalObj));

newObj.b.c = 3;
console.log(originalObj.b.c);  // 输出2

递归复制

function deepCopy(obj) {
  let newObj = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      newObj[key] = deepCopy(obj[key]);
    } else {
      newObj[key] = obj[key];
    }
  }

  return newObj;
}

let originalObj = { a: 1, b: { c: 2 } };
let newObj = deepCopy(originalObj);

newObj.b.c = 3;
console.log(originalObj.b.c);  // 输出2

应用场景

Copy操作在JavaScript中有多种应用场景。以下是其中一些常见的示例：

复制数组

let originalArray = [1, 2, 3];
let newArray = originalArray.slice();

newArray.push(4);
console.log(originalArray);  // 输出[1, 2, 3]

复制对象

let originalObj = { a: 1, b: 2 };
let newObj = Object.assign({}, originalObj);

newObj.b = 3;
console.log(originalObj.b);  // 输出2

创建对象副本

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

let john = new Person('John');
let johnCopy = Object.assign({}, john);

johnCopy.sayHello();  // 输出 "Hello, my name is John."

避免副作用

在某些情况下，我们需要对某个变量进行修改或处理，但又不希望影响到原始变量。Copy操作可以帮助我们避免副作用的产生。

function processArray(array) {
  let newArray = array.slice();

  newArray.push(0);
  newArray.sort();

  return newArray;
}

let originalArray = [3, 1, 2];
let processedArray = processArray(originalArray);

console.log(originalArray);     // 输出 [3, 1, 2]
console.log(processedArray);    // 输出 [0, 1, 2, 3]