1. 程式人生 > >ES6(JavaScript)的深複製和淺複製

ES6(JavaScript)的深複製和淺複製

React中,我們會遇到一個有趣的問題,那就是物件的複製,為什麼說有趣,是因為直覺和結果差距很大。

我們看一下這個例子:

let a={tile:'深複製'};
let b=a;
a.title='淺複製';

那麼我們會獲得兩個物件,一個a,一個b,a的title是淺複製,b的title是深複製。

但結果真是這樣嗎?

我們console.log一下


咦,為啥嘞!!!!!!為啥兩個都是輸出"淺複製"。。。。

其實,a,b是共用同一個地址,所以雖然看起來是兩個物件,其實就是一個物件,a===b,這就是深複製,複製的不僅僅是資料,而且連地址一起復制過來了,相當於Windows的快捷方式,表面上看起來一個在C盤,一個在D盤,其實都是一個檔案。

那麼,如果我們僅僅想複製”深複製“這三個字呢?a的title和b的title要不同,我們如何來做。

let a={title:'深複製'};
let b={...a,content:"一個教程"};
a.title='淺複製';
console.log(a.title);
console.log(b.title);

我們再來看列印結果

這樣我們雖然複製了a的所有資料,但是a和b是不同的物件,更改任意一個的資料,不會影響到第二個,而且b還可以對a 進行拓展,比如加了content一個欄位。

相關推薦

ES6(JavaScript)的複製複製

React中,我們會遇到一個有趣的問題,那就是物件的複製,為什麼說有趣,是因為直覺和結果差距很大。 我們看一下這個例子: let a={tile:'深複製'}; let b=a; a.title='淺複製'; 那麼我們會獲得兩個物件,一個a,一個b,a的title是淺複製,

javascript複製複製(深度拷貝拷貝)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>js深度複製淺顯複製</title> </head>

C 複製複製

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

談物件的複製複製的區別。

  場景   當你的元件裡需要用到同一個資料,但身負不同的責任。   舉個例子:vue的雙向繫結   你在與後端的互動中請求回來的資料,res,  let a = res; let b = res;  因為是會用到checkbox,在外層的列表裡選中資

題目筆記(閉包,複製複製,原生js實現Promise)

就面試筆試題的一些筆記: 閉包( 實現add(2)(5) ) 深複製和淺複製 原生js實現Promise △ –>閉包知識: 實現add(2)(5) function add (x) { return functio

Java物件的複製複製

原文連結 我們在編碼過程經常會碰到將一個物件傳遞給另一個物件,java中對於基本型變數採用的是值傳遞,而對於物件比如bean傳遞時採用的引用傳遞也就是地址傳遞,而很多時候對於物件傳遞我們也希望能夠象值傳遞一樣,使得傳遞之前和之後有不同的記憶體地址,在這種情況下

如何理解原型模式中的複製複製

    找工作之前製作簡歷時,需要做很多份簡歷,而且簡歷的格式是一樣的,也就意味著要做很多重複性的工作。在程式設計過程中,遇到重複性工作多的時候,貼上複製是最快的解決辦法。但是一旦這些程式碼需要修改時

Java中clone方法以及複製複製

Java中處理基本資料型別(如:int , char , double等),都是採用按值傳遞的方式執行,除此之外的其他型別都是按照引用傳遞(傳遞的是一個物件的引用)的方式執行。物件在函式呼叫時和使用“=”賦值時都是引用傳遞。 Java中clone方法的作用是為了在現實程式

面試:C++的複製複製(轉)

物件的構造,也可以由複製建構函式完成,即用一個物件的內容去初始化另一個物件的內容。此時,若物件使用了堆空間(注意和“堆物件”區分),就有深、淺複製的問題,不清楚則很容易出錯。 什麼是淺複製 預設複製建構函式:用一個物件的內容初始化另一個同類物件,也稱為預設的

C 複製複製

                物件的複製   對於普通型別的物件來說,它們之間的複製是很簡單的,例如:int a=88;int b=a;double f=3.12;double d(f);  而類物件與普通物件不同,類物件內部結構一般較為複雜,存在各種資料成員。下面看一個類物件複製的簡單例子。#includ

C++複製複製

物件的複製   對於普通型別的物件來說,它們之間的複製是很簡單的,例如:int a=88; int b=a; double f=3.12; double d(f);  而類物件與普通物件不同,類物件內部結構一般較為複雜,存在各種資料成員。下面看一個類物件複製的簡單例子。#in

python的複製複製

# -*- coding:UTF-8 -*- #此次練習主要是討論物件的淺複製和深複製 import copy #淺複製一個object有三種方式:1、slice操作; # 2、copy模組的copy函式; #

JavaScript拷貝拷貝

摘要: 不知深淺很危險吶。物件和陣列的拷貝對我來說一直都是一個比較模糊的概念,一直有點一知半解,但是在實際工作中又偶爾會涉及到,有時候還會一不小心掉坑裡,不知道大家有沒有同樣的感受,因此,準備對js物件和陣列拷貝一探究竟。提到js的物件和陣列拷貝,大家一定會想深拷貝和淺拷貝,但是為什麼會有深拷貝和淺拷貝呢?下

寥寥數筆帶你洞悉JavaScript拷貝拷貝

(內容同步自小鄒的頭條號:滬漂程式設計師的生活史) 物件和陣列的拷貝對小鄒來說一直都是一個比較模糊的概念,一直有點一知半解,但是在實際工作中又偶爾會涉及到,有時候還會一不小心掉坑裡,不知道大家有沒有同樣的感受,因此,準備對js物件和陣列拷貝一探究竟。提到js的物件和陣列拷貝,大家一定會想深拷貝和

python的複製拷貝拷貝的區別

在python中,物件賦值實際上是物件的引用。當建立一個物件,然後把它賦給另一個變數的時候,python並沒有拷貝這個物件,而只是拷貝了這個物件的引用 一般有三種方法, alist=[1,2,3,[“a”,“b”]] (1)直接賦值,傳遞物件的引用而已,原始列表

陣列複製拷貝拷貝

深淺拷貝針對如物件、陣列之類的複雜型別。 就陣列而言。 深拷貝 拷貝的陣列變數和原來的陣列變數是指向兩塊不同的空間,二者的操作互相不影響。 int[] a = new int[]{1,2

值型別引用型別,深層複製複製拷貝拷貝)最詳細了

要知道深層複製淺層複製的區別,首先要了解值型別和引用型別。變數分值型別和引用型別,深層複製和淺層複製都是針對引用型別變數的操作。值型別: 比如數值,字串,布林,undifined引用型別 : 比如陣列,物件,函式來張圖(手抖,有點醜):var num = 77;var id

小碼哥-(知其所以然二)從底層分析OC中ARC非ARC下複製...

今天,在坊間聽到有人在爭論OC中關於NSString的深淺複製,聽了下,感覺很有必要來一個分析總結,讓我們從底層去了解OC中深淺複製的運作機制. 所謂copy就是在原有物件的基礎上產生一個副本物件,遵循最關鍵的兩點原則: 改變原物件的屬性和行為不會對副本物件產生任何影響 改

初探python物件複製問題的拷貝拷貝

前階段學習python時遇到物件拷貝的問題,感覺有個不小的坑,於是乎搜了一下網上相關部落格的介紹,然而總覺得敘述太長,不夠簡潔。本文通過總結前人經驗,並根據自己的理解,簡單談一談python中的拷貝小坑。 python中實現物件複製的方法大致有3種:簡單粗暴直

類物件的拷貝拷貝(複製複製

淺拷貝(淺複製)        在C++中經常隱式或顯式的出現物件的複製。當兩個物件之間進行復制時,若複製完成後,它們還共享某些資源(記憶體空間),其中一個物件的銷燬會影響另一物件,這種物件之間的複製稱為物件的淺拷貝。C++中採用賦值運算子進行物件複製是預設的是淺拷貝。 #