JavaScript >> Javascript 文檔 >  >> Tags >> object

以正確的方式在 JavaScript 中復制/克隆數組或對象 [示例]

本教程將向您展示如何在 JavaScript 中正確複製/克隆數組或對象 - 它並不像看起來那麼簡單!

複製一個數組或對象可能看起來很簡單——但 JavaScript 在工作中拋出了一個扳手——事實上,當你將一個變量的值分配給另一個變量時,它引用 原變量。 這意味著如果原始變量的值發生變化,副本的值也會發生變化!

要解決此問題,您需要克隆 數組——確保在新數組中創建具有自己值的新變量。 JavaScript 包含一個內置的方法來做到這一點,但當然有多種方法可以實現。

如何不這樣做!

你的第一直覺可能是做以下事情:

var pets = ['fish', 'parrot', 'cat'];
var petsClone = pets;

這行不通!

寵物克隆 將簡單地成為對變量 pets 的引用 – 不是副本。 寵物petsClone 不會是彼此的副本,它們都是指向相同的名稱 變量。

如果一個被更新,另一個會改變,如果你正在復制一個數組,這可能不是你想要的行為。

淺拷貝與深拷貝——在 JavaScript 中安全地克隆數組中的所有值

在 JavaScript 中克隆數組時,您會看到對 shallow 的引用 和 克隆或複制。

克隆只會克隆數組第一級中的值。任何嵌套值都不會被克隆,因此如果您使用多維數組,請注意這一點! 當您使用二維數組並希望專注於性能和代碼簡單性時,淺克隆仍然很有用。

使用 ES6 擴展語法的淺克隆數組 (...)

這可能是使用 JavaScript 擴展語法淺拷貝/克隆數組的最簡單方法:

var pets = ['fish', 'parrot', 'cat'];
var petsClone = [...pets];

spread 語法擴展了數組中的值,因此在新聲明的數組中調用它會將另一個數組的內容克隆到新數組中。

使用 JSON 函數深度克隆數組

下面是一個多維嵌套 數組被聲明。數組寵物 包含兩個子數組,每個子數組都包含自己的值。嘗試使用上述擴展語法將不會 克隆這些子數組中的值,它們將被引用。

可以 編寫一個複雜的循環來深入每個子數組並克隆值,但是有一個更好的解決方案,雖然有點 hacky —— 將原始數組轉換為 JSON,然後將其解碼為新數組。

var pets = [['dog', 'cat'], ['fish', 'frog']];
var petsCopy = JSON.parse(JSON.stringify(pets));

Hacky 解決方案通常是最好的解決方案。 JSON.stringify() 用於將原始數組轉換為 JSON 字符串,JSON.parse() 用於將該字符串解碼回一個 JavaScript 數組,它是原始數組的完全獨立克隆,然後分配給一個新變量。

注意自定義類/對象

如果您正在深度克隆包含自定義對像類的數組,它們將被轉換為通用對象,並且其中的任何引用都將丟失!

這是否是一個問題完全取決於您要完成的工作。您可能需要遍歷克隆的數組並使用 Object.assign() 來確保克隆的對象屬於正確的類。

測試,測試,測試

如果您正在構建關鍵任務或涉及金錢的東西(如在線商店),並且您正在復制數組,請確保您測試您的代碼並確保您的代碼按照您的預期方式運行!

JavaScript 引用變量而不是複制它們的行為是新 JavaScript 開發人員的常見障礙。養成測試代碼的習慣將確保您在之前發現任何問題 它們成為您的用戶的問題。


下一篇
No
Tutorial JavaScript 教程
  1. React.js 中的 TIL 道具

  2. React JS 2022 路線圖

  3. Web 現狀:捆綁器和構建工具

  4. #30DaysOfCJS:觀察 Node.js

  5. 使用 Open Graph 和 NextJS 生成可共享的內容圖像

  6. 使用 Red Hat OpenShift Application Runtimes 和 Istio 構建容器原生 Node.js 應用程序

  7. 基本的 Javascript 面試問題

  1. 延遲加載圖片 - [1/2]

  2. 我的全棧 Web 開發人員資源

  3. 在 vanilla JS 中獲取多個 API 請求

  4. React Native Firebase AdMob |在您的下一個 iOS 或 Android 移動應用程序上使用 Google Ads

  5. 像 create-react-app 一樣生成你的 web-app 樣板。

  6. 如何檢查數組是否在javascript中增加?

  7. React 應用程序的多功能 Webpack 配置

  1. 使用 jQuery/AJAX/PHP 輕鬆設置驗證碼

  2. 功能反應中的反應性道具

  3. [GitHub Actions] 完整的 CI-CD Javascript 工作流程

  4. 使用 useReducer、memo 和 useCallback 優化重新渲染的長列表。