ホームページ > 記事 > ウェブフロントエンド > JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?
JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?
- 藏色散人オリジナル
- 2019-04-02 09:54:102487ブラウズ
各プロパティをループし、新しいオブジェクトに複製します。 JSON メソッドをソース オブジェクトとして使用する場合は、JSON が安全である必要があります。したがって、ソース オブジェクトを JSON に変換できない場合に安全に保つために、例外処理が必要です。 object.assign メソッドは浅いクローン作成のみを実行します。これは、ネストされたプロパティが引き続き参照によって複製されることを意味します。
注意: 浅いクローン作成: 単純型は値によって渡され、オブジェクト型は参照によって渡されます。ディープ クローン作成: すべての要素または属性が完全にコピーされ、元のオブジェクトから完全に分離されます。つまり、新しいオブジェクトに対する変更はすべて元のオブジェクトに反映されません。
JavaScript オブジェクトのクローンを作成するには、次のようにいくつかの方法があります。
例 1: 1 つの方法は、ソース オブジェクトのプロパティを反復処理し、すべてのプロパティをコピーすることです。対象オブジェクトに 1 つずつ追加します。シンプルですが、あまり使用されません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
js克隆对象
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
function fun(){
const sourceObject = {a:1, b:2, c:3};
let tO = {};
for (let prop in sourceObject) {
if (sourceObject.hasOwnProperty(prop)) {
tO[prop] = sourceObject[prop];
}
}
document.getElementById("demo").innerHTML =
"targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
}
</script>
</body>
</html>出力:
ボタンをクリックする前
: この例では JSON を使用します。このメソッドを使用する場合、ソース オブジェクトは JSON で安全である必要があります。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
js克隆对象
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
function fun(){
const sourceObject = {a:1, b:2, c:3};
let tO = {};
tO = JSON.parse(JSON.stringify(sourceObject));
document.getElementById("demo").innerHTML =
"targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
}
</script>
</body>
</html>
: このメソッドは、Object.assign メソッドを使用します。 <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
js克隆对象
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
function fun(){
const sourceObject = {a:1, b:2, c:3};
let tO = {};
tO = Object.assign({}, sourceObject);
document.getElementById("demo").innerHTML =
"targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
}
</script>
</body>
</html></pre>関連する推奨事項: "
"この記事は、JavaScript でオブジェクトのクローンを作成する方法についてです。困っている友人の役に立てば幸いです。
以上がJavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。