JS基礎——深コピーと浅いコピー

2454 ワード

javascript コピー

浅いコピー
オブジェクトの浅いコピー

Object.assign()方法は、エニュメレート・属性のすべての値を1つまたは複数のソースオブジェクトから対象オブジェクトにコピーするために使用され、対象オブジェクトに戻る.

var target = { name:"rlxu",borth: {year: "1991"}};
var obj = Object.assign(target);
obj.name = "xuriliang";
console.log(target.name);
obj.borth.year = "1990"; //     
console.log(target.borth.year);

...拡張演算子.

var target = { name:"rlxu",borth: {year: "1991"}};
var obj = {...target};
obj.name = "xuriliang";
console.log(target.name);
obj.borth.year = "1990"; //     
console.log(target.borth.year);

Object.defineProperties

const source = {name: "rlxu",borth: {year: "1991"}}
const obj = {}
Object.defineProperties(obj,Object.getOwnPropertyDescriptors(source))

配列の浅いコピー

concact方法は、既存の配列を変更することなく、接続された配列のコピーを返すだけである.配列の浅いコピーは、[].contact()によって実現され得る.

var arr = [1,2,3,4];
var copyArr = [].concat(arr);
copyArr[0] = "5"
console.log(arr[0])

slice方法は、選択された要素を既存の配列から返すことができ、この方法は、配列を変更することなく、サブアレイを返す.

var arr = [1,2,3,4];
var copyArr = arr.slice(0);
copyArr[0] = "5"
console.log(arr[0])

Object.defineProperties

var arr = [1,{name: "rlxu"}]
var cloneArr = [];
Object.defineProperties(cloneArr,Object.getOwnPropertyDescriptors(arr))

コピー

JSON.stringifyは、JSON.parse(JSON.stringify(data))を使用することによって、深くコピーすることができる.

var target = {name:"rlxu",borth: { year: "1991"} };
var obj = JSON.parse(JSON.stringify(target));
obj.name = "xuriliang";
console.log(target.name);
obj.borth.year = "1990";
console.log(target.borth.year)

for

function deepClone(obj) {
    var target = {};
    for(var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === 'object') {
                target[key] = deepClone(obj[key]); 
            } else {
                target[key] = obj[key];
            }
        }
    }
    return target;
}
var target = { name:"rlxu",borth: {year: "1991"}};
var obj = deepClone(target);
obj.borth.year = "1990";
console.log(target.borth.year)

js衝突検出