Javascriptでオブジェクトをコピーする方法

藏色散人
リリース: 2023-01-05 16:14:12
オリジナル
16198 人が閲覧しました

JavaScript でオブジェクトをコピーする方法: 1. 元のオブジェクトのプロパティを調べて、それらを新しいオブジェクトに割り当てます; 2. オブジェクトを文字列に変更してから、json オブジェクトに変更します; 3. オブジェクトを連結します空のオブジェクト配列; 4. 展開演算子を使用してオブジェクトのディープ コピーを実装します; 5. ES6 展開演算子を使用して配列のディープ コピーを実装します。

Javascriptでオブジェクトをコピーする方法

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

js でオブジェクトをコピーするには?

方法 1:

元のオブジェクトのプロパティを調べて、それらを新しいオブジェクトに割り当てます。

//深复制对象方法    
var cloneObj = function (obj) {  
    var newObj = {};  
    if (obj instanceof Array) {  
        newObj = [];  
    }  
    for (var key in obj) {  
        var val = obj[key];  
        //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行,它就代表哪个函数, 一般用在匿名函数中。  
        newObj[key] = typeof val === 'object' ? cloneObj(val): val;  
    }  
    return newObj;  
};  
//测试    
var obj = {a:function(){console.log(this.b.c)},b:{c:1}},//设置一个对象  
newObj = cloneObj(obj);//复制对象  
newObj.b.c=2;//给新对象赋新值  
obj.a();//1,不受影响  
newObj.a();//2
ログイン後にコピー

方法 2:

1) まずオブジェクトを文字列に変更し、次にオブジェクト ポインタが問題を指すのを防ぐため、ディープ コピーである json オブジェクトに変更します

2). 未定義および関数型のプロパティは無視されますが、Date 型のプロパティは文字列に変換されます

var obj = {a:1,b:2}  
var newObj = JSON.parse(JSON.stringify(obj));  
newObj.a=3;  
console.log(obj);  
console.log(newObj);
ログイン後にコピー

メソッド 3:

配列のメソッドオブジェクトの場合、配列メソッドを使用して空の配列を連結します。

var a=[1,2,3];  
var b=a;  
var c=[].concat(a);  
a.push(4);  
console.log(b);  
console.log(c);
ログイン後にコピー

方法 4:

オブジェクトのディープ コピーを実装する拡張演算子

var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'}var { ...obj2 } = obj
obj.old = '22'console.log(obj)
console.log(obj2)
ログイン後にコピー

方法 5:

ES6 展開演算子は配列のディープ コピーを実装します

var arr = [1,2,3,4,5]var [ ...arr2 ] = arr
arr[2] = 5console.log(arr)
console.log(arr2)
ログイン後にコピー


##推奨調査: "

JavaScript 上級チュートリアル

以上がJavascriptでオブジェクトをコピーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート