JavaScript淺拷貝實作方式

在 JavaScript 開發中，我們經常需要處理物件或陣列的拷貝運算。在實際開發中，常常會遇到淺拷貝的需求，即將一個物件或陣列的內容複製到另一個物件或陣列中，複製後的新物件或陣列與原始物件或陣列共享一部分資料。本文將介紹 JavaScript 中淺拷貝的實作方式。

一、什麼是淺拷貝？

在 JavaScript 中，物件和陣列都是引用類型，當我們將一個物件或陣列賦值給一個新的變數時，實際上是將原始物件或陣列的引用賦值給了新變數。

例如，以下程式碼將一個物件賦值給一個新變數：

let obj1 = { name: '张三', age: 18 };
let 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() 方法只能用於類別數組物件或可迭代物件的淺拷貝，如果需要對物件進行淺拷貝，還需要使用其他方法。

三、總結

本文介紹了 JavaScript 中淺拷貝的實作方式，包括手動遍歷、Object.assign() 方法、擴充運算子和 Array.from() 方法。在實際開發中，我們可以根據實際需求選擇最適合的方式進行淺拷貝操作。需要注意的是，淺拷貝只是複製了物件或陣列的第一層資料結構，如果物件或陣列中包含引用類型的屬性，則淺拷貝複製後的新物件或陣列與原始物件或陣列將共用這些屬性。如果需要實現深拷貝，則需要使用其他方法進行操作。

以上是JavaScript淺拷貝實作方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！