如何在 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() 在合并对象时分配它们。

更新于： 2022 年 8 月 4 日

1K+ 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告