JavaScript – Object 資料複製

關於淺層複製、深層複製。

淺層複製方法: Object.assign

複製到第一層物件的屬性，若有第二層以上的資料會與舊物件一起共用同一塊記憶體。

var dog = {
          name : '舒跑',
          like : {
              food : '雞胸肉',
              game : '你丟我撿',
              bed : '主人的床'
          }
      }

var newDog = Object.assign({}, dog);
newDog.name = '可爾必思';
      
console.log(dog.name);  // 舒跑
console.log(newDog.name);  // 可爾必思

newDog.like.bed = '地板';

console.log(dog.like.bed);  // 地板
console.log(newDog.like.bed);  // 地板

淺層複製方法: …其餘運算子

var dog = {
    name : '舒跑',
    like : {
        food : '雞胸肉',
        game : '你丟我撿',
        bed : '主人的床'
    }
}

var newDog = {...dog};
newDog.name = '可爾必思';

console.log(dog.name);  // 舒跑
console.log(newDog.name);  // 可爾必思

newDog.like.bed = '地板';

console.log(dog.like.bed);  // 地板
console.log(newDog.like.bed);  // 地板

深層複製方法: JSON

複製建立全新的物件。
JSON 方法限制:純資料的物件可行，有Function、Set、Map、undefined等型態會失效。

var dog = {
    name : '舒跑',
    like : {
        food : '雞胸肉',
        game : '你丟我撿',
        bed : '主人的床'
    }
}

var newDog = JSON.parse(JSON.stringify(dog));
newDog.name = '可爾必思';

console.log(dog.name);  // 舒跑
console.log(newDog.name);  // 可爾必思

newDog.like.bed = '地板';

console.log(dog.like.bed);  // 主人的床
console.log(newDog.like.bed);  // 地板

深層複製方法: $.extend

var newDog = $.extend(true,{},dog);
newDog.name = '可爾必思';

console.log(dog.name);  // 舒跑
console.log(newDog.name);  // 可爾必思

newDog.like.bed = '地板';

console.log(dog.like.bed);  // 主人的床
console.log(newDog.like.bed);  // 地板