關(guān)于Javascript的深拷貝和淺拷貝

js里面有一個數(shù)據(jù)類型為object(如json和數(shù)組),它創(chuàng)建的是一塊內(nèi)存區(qū)域且叁,存放的是一個地址都哭,所以當(dāng)你直接將一個對象=另一個對象時,會發(fā)生引用谴古。而深拷貝和淺拷貝的區(qū)別是深拷貝不會發(fā)生引用质涛。
最最簡單的淺拷貝稠歉,適用于json和數(shù)組的方法是借助JSON全局對象的parse和stringify來實(shí)現(xiàn)

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });

就數(shù)組而言還有一些其他的方法:
1.Array.from() 方法從一個ArrayLike或Iterable對象中創(chuàng)建一個新的數(shù)組實(shí)例掰担。這是一種深拷貝的方法

備注:所謂 ArrayLike 對象指具有數(shù)組某些行為的對象,表現(xiàn)出來的特征就是具有 length 屬性怒炸,但是這一類對象不能調(diào)用數(shù)組所具有的方法(push/forEach/map之類)带饱。最常見的有兩種:DOM中的 NodeList 和函數(shù)中的 arguments 。

在平時開發(fā)中經(jīng)常遇到會遇到這樣的情形阅羹,譬如將ArrayLike轉(zhuǎn)化為數(shù)組從而用使用數(shù)組的方法勺疼,這時我們可以利用Array.from()

var args = Array.from(arguments);
var imgs = Array.from(document.querySelectorAll('img'));

在我之前的博客中還遇到了這樣的情形,就是創(chuàng)建0-99的連續(xù)數(shù)組捏鱼,你會發(fā)現(xiàn)new Array(100)在谷歌下顯示的是[undefined × 100]执庐,而且此時你是不能使用數(shù)組的方法,原因很簡單导梆,這時其實(shí)只有長度,故而不能使用map等方法轨淌,當(dāng)時我的解決辦法是fill(1)之后再使用map迂烁,這里其實(shí)有更簡單的辦法

var arr = Array.from({length:100}).map((item,index)  => index);

備注:這個方法的效率很低,反而for循環(huán)一個一個寫效率更高

2.copyWithin()方法
這是一種淺拷貝的方法递鹉,會發(fā)生引用盟步,看如下案例

var a=[1,2]                      //a為[1,2]
var b=a.copyWithin(0)    //b為[1,2]
b[2]=3                             //此時b為[1,2,3]
console.log(a)                 //a為[1,2,3]

3.slice
slice方法之前用了很多,大多知道的是創(chuàng)建一個新的數(shù)組躏结,但不知道的是它其實(shí)一種淺拷貝却盘。
對于字符串、數(shù)字及布爾值來說媳拴,slice會拷貝這些值到新的數(shù)組里黄橘。在別的數(shù)組里修改這些字符串或數(shù)字或是布爾值,將不會影響另一個數(shù)組屈溉。但如果該元素是對象旬陡,是會發(fā)生引用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市语婴,隨后出現(xiàn)的幾起案子描孟,更是在濱河造成了極大的恐慌,老刑警劉巖砰左,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匿醒,死亡現(xiàn)場離奇詭異,居然都是意外死亡缠导,警方通過查閱死者的電腦和手機(jī)廉羔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來僻造,“玉大人憋他,你說我怎么就攤上這事∷柘鳎” “怎么了竹挡?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長立膛。 經(jīng)常有香客問我揪罕,道長,這世上最難降的妖魔是什么宝泵? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任好啰,我火速辦了婚禮,結(jié)果婚禮上儿奶,老公的妹妹穿的比我還像新娘框往。我一直安慰自己,他們只是感情好闯捎,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布椰弊。 她就那樣靜靜地躺著嘁酿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪男应。 梳的紋絲不亂的頭發(fā)上闹司,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天,我揣著相機(jī)與錄音沐飘,去河邊找鬼游桩。 笑死,一個胖子當(dāng)著我的面吹牛耐朴,可吹牛的內(nèi)容都是我干的借卧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼筛峭,長吁一口氣:“原來是場噩夢啊……” “哼铐刘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起影晓,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤镰吵,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后挂签,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體疤祭,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年饵婆,在試婚紗的時候發(fā)現(xiàn)自己被綠了勺馆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煞赢。...
    茶點(diǎn)故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡先朦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出雕旨,到底是詐尸還是另有隱情搓译,我是刑警寧澤悲柱,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站侥衬,受9級特大地震影響诗祸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜轴总,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望博个。 院中可真熱鬧怀樟,春花似錦、人聲如沸盆佣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至虑灰,卻和暖如春吨瞎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背穆咐。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工颤诀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人对湃。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓崖叫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親拍柒。 傳聞我的和親對象是個殘疾皇子心傀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內(nèi)容