Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでオブジェクトのクローンを作成するにはどうすればよいですか？

クローン作成

javascriptでのクローン作成は、既存のオブジェクトの作成を回避するために、オブジェクトのプロパティを別のオブジェクトにコピーすることに他なりません。

javascriptオブジェクトのクローンを作成する方法はいくつかあります。

1）各プロパティを繰り返し処理し、それらを新しいオブジェクトにコピーします。

2）JSONメソッドを使用します。

3）object.assign（）メソッドを使用します。

それぞれの方法を個別に説明しましょう

a）各プロパティを繰り返し処理し、それらを新しいオブジェクトにコピーします。

これは、各プロパティが繰り返されて新しいオブジェクトにコピーされるjavascriptオブジェクトを複製するための古いメソッドです。これは単純なメソッドですが、ほとんど使用されません。

例

<html>
<body>
<p id="cloning-1"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   for (let pro in sourceObject) {
      if (sourceObject.hasOwnProperty(pro)) {
      requiredObj[pro] = sourceObject[pro];
      }
   }
   document.getElementById("cloning-1").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary =                      "+requiredObj.salary;
</script>
</body>
</html>

出力

targetObject name = salman, age = 23, salary = 25000

b）JSONメソッド

これは、JavaScriptオブジェクトのクローンを作成する最新のメソッドの1つです。このメソッドでは、ソースオブジェクトはJSONセーフである必要があります。

例

<html>
<body>
<p id="cloning-2"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   requiredObj = JSON.parse(JSON.stringify(sourceObject));
   document.getElementById("cloning-2").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary =                     "+requiredObj.salary;
</script>
</body>
</html>

出力

targetObject name = salman, age = 23, salary = 25000

c）Object.assign（）

これは、JavaScriptオブジェクトのクローンを作成するために現在非常に頻繁に使用されている高度なメソッドです。このメソッドは浅いコピーのみを実行します。つまり、ネストされたプロパティは引き続き参照によってコピーされます。

例

<html>
<body>
<p id="cloning-3"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   requiredObj = Object.assign({}, sourceObject);
   document.getElementById("cloning-3").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+",salary"+requiredObj.salary;
</script>
</body>
</html>

出力

targetObject name = salman, age = 23, salary = 25000

  1. JavaScriptでインポートされたオブジェクトを非構造化するにはどうすればよいですか？

    以下は、JavaScriptでインポートされたオブジェクトを非構造化するコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g

  2. 多次元JavaScriptオブジェクトを作成するにはどうすればよいですか？

    以下は、多次元JavaScriptオブジェクトを作成するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> &n