資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中使用擴充套件運算子克隆物件？
擴充套件運算子最早在 ES6 中引入，用於解包可迭代物件（如陣列）的元素。由於擴充套件運算子，克隆和合並陣列變得很簡單。擴充套件運算子在 ES6 最初引入時不能用於物件。擴充套件運算子最終在 ES2018 中擴充套件到物件。
您將在本文中學習如何使用 JavaScript 物件擴充套件運算子 (...) 克隆物件或將兩個物件合併為一個。在預期 0+ 個引數的區域，擴充套件運算子允許可迭代物件擴充套件。
這在需要多個值的變數陣列中最常使用。它使我們能夠從陣列中獲取引數列表。擴充套件運算子與剩餘引數具有相同的語法，但效果完全相反。
當必須將物件或陣列中的所有元素包含在某種列表中時，可以使用擴充套件語法。
語法
以下是擴充套件運算子的語法
var myVariable = [...value];
示例 1
在本例中，您使用擴充套件運算子 (...) 解包陣列的元素。克隆陣列時，擴充套件運算子非常有用。
<!DOCTYPE html> <html> <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"> </div> <script> let team = ['India', 'Australia', 'England', 'New Zealand']; let cricket = [...team]; document.getElementById("result").innerHTML =cricket; </script> </body> </html>
示例 2
在本例中，擴充套件運算子 (...) 解包 team 陣列中的元素，並將它們設定在本例中的新陣列 cricket 中。要將兩個或多個數組合併為一個，請使用擴充套件運算子 (...)。
<!DOCTYPE html> <html> <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"> </div> <script> let cricket = ['India', 'Australia', 'England', 'New Zealand']; let bcci= ['West Indies', 'Ireland', 'Kenya', 'Bangladesh']; let merge = [...cricket, ...bcci]; document.getElementById("result").innerHTML =merge; </script> </body> </html>
示例 3
在本例中，您將學習如何利用 JavaScript 物件擴充套件運算子來克隆物件的自身可列舉屬性 -
<!DOCTYPE html> <html> <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script> const cricket = { team: 14 }; const clonedCricket = {...cricket}; document.write(clonedCricket.team); </script> </body> </html>
示例 4
合併物件：在本例中，您將學習如何使用擴充套件運算子 (...) 以類似於陣列的方式合併兩個物件。
<!DOCTYPE html> <html> <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result1"></div> <div id="result2"></div> <script> const cricket = { team: 12 }; const style = { backgroundColor: "blue" }; const solidCircle = { ...cricket, ...style }; document.getElementById("result1").innerHTML =solidCircle.team; document.getElementById("result2").innerHTML =solidCircle.backgroundColor; console.log(solidCircle); </script> </body> </html>
示例 5
正在共享 tutpoint1 物件。tutpoint1 物件的鍵值對被複制到 clonedUser 物件。讓我們再看一個使用擴充套件運算符合並兩個物件的示例 - mergedUsers 是 tutpoint1 和 tutpoint2 的克隆。實際上，物件上的每個無數屬性都將被複制到 mergedUsers 物件。擴充套件運算子實際上是 Object.assign() 函式的快捷方式，但有一些變化。
<!DOCTYPE html> <html> <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script> const tutpoint1 = { country: 'India', tutorial: 'Tutorialspoint', }; const tutpoint2 = { name: "JavaScript", framework: "React JS" }; const mergedUsers = {...tutpoint1, ...tutpoint2}; console.log(mergedUsers) </script> </body> </html>
簡而言之
擴充套件運算子、剩餘運算子和 Object.assign() 函式都是克隆 JavaScript 中物件的有效方法。除了克隆物件之外，物件擴充套件和 Object.assign() 還允許您在建立克隆時新增或編輯屬性。
您可以透過在同一行中組合物件擴充套件和剩餘來克隆物件，同時新增、更新或跳過要克隆的屬性。擴充套件運算子建立新屬性，而 Object.assign() 在合併物件時分配它們。
1K+ 次檢視
