ホームページ > 記事 > ウェブフロントエンド > js でオブジェクトのディープ コピーが失敗する理由と解決策 (コード)
js でオブジェクトのディープ コピーが失敗する理由と解決策 (コード)
- 不言オリジナル
- 2018-08-21 15:44:321333ブラウズ
この記事では、js でオブジェクトをディープコピーする理由と解決策 (コード) を紹介します。必要な方は参考にしていただければ幸いです。
私は js を経験したことがありますが、実際には少し複雑であることを知っています
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script type="text/javascript">
// 排序算法
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j+1]) { //相邻元素两两对比
var temp = arr[j+1]; //元素交换
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
// 定义一个json ab
var ab = {a:[2,1,3,9,4],b:[8,5,3]}
// 定义一个json bc
var bc = {};
// 将json ab 深拷贝给json bc
for(var i in ab){
bc[i]=ab[i];
}
// 对json bc 排序
bubbleSort(bc['a'])
bubbleSort(bc['b'])
// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后，
// json ab也被排序，此时意味着深层拷贝失败
document.write('-----------------------'+'<br/>');
document.write(JSON.stringify(ab));
document.write('<br/>'+'-----------------------'+'<br/>');
document.write(JSON.stringify(bc));
</script>
</head>
<body>
</body>
</html>その時の私の結果は次のとおりです:
元のオブジェクトは次のとおりです: {a:[2,1,3,9,4] ,b:[ 8,5,3]}
あらゆる種類の頭を悩ませた後、私はついにその理由を見つけました:
このディープコピー、コピーされたオブジェクトがソートされている場合、コピーが無効になります。コピーされたオブジェクトの並べ替え後の変更は、以前の初期オブジェクトにコピーされます
したがって、オブジェクトのコピー (コピー) メソッドを変更するだけです。例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script type="text/javascript">
// 排序算法
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j+1]) { //相邻元素两两对比
var temp = arr[j+1]; //元素交换
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
// 定义一个json ab
var ab = {a:[2,1,3,9,4],b:[8,5,3]}
// 定义一个json bc
var bc = {};
// 将json ab 深拷贝给json bc
/*for(var i in ab){
bc[i]=ab[i];
}*/
function clone(obj) {
// Handle the 3 simple types, and null or undefined or function
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array or Object
if (obj instanceof Array | obj instanceof Object) {
var copy = (obj instanceof Array)?[]:{};
for (var attr in obj) {
if (obj.hasOwnProperty(attr))
copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to clone obj! Its type isn't supported.");
}
bc = clone(ab);
// 对json bc 排序
bubbleSort(bc['a'])
bubbleSort(bc['b'])
// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后， json ab也被排序，此时意味着深层拷贝失败
document.write('-----------------------'+'<br/>');
document.write(JSON.stringify(ab));
document.write('<br/>'+'-----------------------'+'<br/>');
document.write(JSON.stringify(bc));
</script>
</head>
<body>
</body>
</html>
今回も完璧でした！
関連する推奨事項:
php ci フレームワークで css および js ファイルの読み込みに失敗する理由と解決策、
JavaScript オブジェクトの深いコピーと浅いコピーの例の詳細な説明
以上がjs でオブジェクトのディープ コピーが失敗する理由と解決策 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。