摘要:深淺拷貝簡介中對于和這兩個類型,把一個變量賦值給另一個變量淺拷貝只是對拷貝對象的引用,深拷貝是徹底拷貝,生成一個新的屬性相同的對象淺拷貝淺拷貝只是對拷貝對的引用,兩者相互影響淺拷貝的實現簡單賦值實現例子拷貝了,改變,也會改變,改變之后者還是
深淺拷貝簡介
javascript中對于Object和Array這兩個類型,把一個變量賦值給另一個變量;淺拷貝只是對拷貝對象的引用,深拷貝是徹底拷貝,生成一個新的屬性相同的對象
淺拷貝(shallow copy)淺拷貝只是對拷貝對的引用,兩者相互影響
淺拷貝的實現 1.簡單賦值實現例子:obj2拷貝了obj1,obj2改變,obj1也會改變,改變之后2者還是相同的
var obj1 = {a: 1} var obj2 = obj1 obj2.b = 2 console.log(obj1) // {a: 1, b: 2} console.log(obj2) //{a: 1, b: 2} console.log(obj1 == obj2) // trueObject.assign()實現
例子:當第一個傳參是你需要拷貝的對象(PS:Object.assign()也可以實現深拷貝)
var obj1 = {a: 1} var obj2 = Object.assign(obj1) obj2.b = 2 console.log(obj1) // {a: 1, b: 2} console.log(obj2) // {a: 1, b: 2} console.log(obj1 == obj2) // true深拷貝(deep copy)
徹底拷貝,生成一個新的屬性相同的對象
深拷貝的實現 Object.assign()實現例子:拷貝對象不是第一個傳參
var obj1 = {a: 1} var obj2 = Object.assign({}, obj1) obj2.b = 2 console.log(obj1) // {a: 1} console.log(obj2) // {a: 1, b: 2} console.log(obj1 == obj2) // falseArray.slice()可以實現數組的深拷貝(數組中不能有Object和Array,Object和Array只是淺拷貝)
var arr1 = [1, [2]] var arr2 = arr1.slice() arr2[1].push(3) arr2.push(4) console.log(arr1) // [1, [2, 3]] console.log(arr2) // [1, [2, 3], 4] console.log(arr1 == arr2) // falseJSON.stringify()和JSON.parse()實現
var obj1 = {a: 1} var obj2 = JSON.parse(JSON.stringify(obj1)) console.log(obj1 == obj2) // false obj2.b = 2 console.log(obj1) // {a: 1} console.log(obj2) // {a: 1, b: 2}遞歸實現
var deepCopy = function(obj) { if (typeof obj !== "object") return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key]; } } return newObj; } var obj1 = {a: 1} var obj2 = deepCopy(obj1) console.log(obj1 == obj2) // false obj2.b = 2 console.log(obj1) // {a: 1} console.log(obj2) // {a: 1, b: 2}Object.create()實現
var deepCopy = function(obj) { if (typeof obj !== "object") return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === "object" ? Object.create(obj[key]) : obj[key]; } } return newObj; } var obj1 = {a: 1} var obj2 = deepCopy(obj1) console.log(obj1 == obj2) // false obj2.b = 2 console.log(obj1) // {a: 1} console.log(obj2) // {a: 1, b: 2}jQuery.extend()實現
var obj1 = {a: 1} var obj2 = $.extend(true, {}, obj1) console.log(obj1 == obj2) // false obj2.b = 2 console.log(obj1) // {a: 1} console.log(obj2) // {a: 1, b: 2}
jQuery.extend()源碼
jQuery.extend = jQuery.fn.extend = function() { var src, copyIsArray, copy, name, options, clone, target = arguments[0] || {}, // 默認取第一個參數賦值給target i = 1, length = arguments.length, // 獲取參數的個數 deep = false; // 默認淺拷貝 // Handle a deep copy situation if ( typeof target === "boolean" ) { // 如果第一個參數類型為boolean,那么把該參數賦值給局部變量deep deep = target; target = arguments[1] || {}; // 把第二個參數賦值給target // skip the boolean and the target i = 2; } // Handle case when target is a string or something (possible in deep copy) if ( typeof target !== "object" && !jQuery.isFunction(target) ) { // target不是object類型或者不是function,就賦值{} target = {}; } // extend jQuery itself if only one argument is passed if ( length === i ) { // 如果只有一個參數,這時候i就是1,length也就是1,那么把target設置為調用者,也就是jQuery對象本身!同時把i遞減為0 target = this; // this就是jQuery --i; } for ( ; i < length; i++ ) { // 循環參數 // Only deal with non-null/undefined values if ( (options = arguments[ i ]) != null ) { // Extend the base object for ( name in options ) { src = target[ name ]; copy = options[ name ]; // Prevent never-ending loop if ( target === copy ) { // 防止無休止循環 continue; } // Recurse if we"re merging plain objects or arrays // deep是否深拷貝,copy是參數屬性值 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { // 被拷貝的屬性值是數組 copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { // 不是數組 clone = src && jQuery.isPlainObject(src) ? src : {}; } // Never move original objects, clone them target[ name ] = jQuery.extend( deep, clone, copy ); // 遞歸~ // Don"t bring in undefined values } else if ( copy !== undefined ) { // 淺拷貝,且屬性值不為undefined target[ name ] = copy; } } } } // Return the modified object return target; };更多方法...敬請期待
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98026.html
摘要:開門見山,有人叫對象的復制為深復制淺復制,也有人叫深拷貝淺拷貝。高級屬性修改深拷貝滿足對象的復制,淺拷貝影響原數組。關于對象的深淺拷貝,暫且探索到這里,后續有新發現再進行補充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 開門見山,有人叫對象的復制為深復制淺復制,也有人叫深拷貝淺拷貝。其實都是copy。 ...
摘要:專題系列第六篇,講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶數組的淺拷貝如果是數組,我們可以利用數組的一些方法比如返回一個新數組的特性來實現拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇,講解深淺拷貝的技巧和以及實現深淺拷貝的思路 前言 拷貝也是面試經典吶! 數組的淺拷貝 如果是數組,我們可以利用數組的一些方法比如:slice、co...
摘要:什么是深淺概念深拷貝淺拷貝只針對像這樣的對象,對于基本類型而言,可以理解為是沒有深淺的區別的。和指向了同一塊內存深拷貝重新開辟了一個空間,修改對象的屬性,彼此不會影響。并不會更改使用遞歸適用于對象里面有對象 什么是深淺 概念 深拷貝、淺拷貝只針對像Object/Array這樣的對象,對于基本類型而言,可以理解為是沒有深淺的區別的。 淺拷貝復制的是引用,修改對象的屬性,會彼此影響。 ju...
摘要:為何寫最近在研究深淺拷貝,找了很多資料,感覺不是很滿意,所以自己就整理了一份。深拷貝如果給放到新的內存中,將的各個屬性都復制到新內存里,就是深拷貝。安全的值是指能夠呈現為有效格式的值。參考文檔冴羽的專題之深淺拷貝深拷貝與淺拷貝的實現 為何寫: 最近在研究深淺拷貝,找了很多資料,感覺不是很滿意,所以自己就整理了一份。廢話不多說,我們來一起復習一下吧,也希望留下您寶貴意見。 何為深淺拷貝?...
摘要:基本數據類型的復制很簡單,就是賦值操作,所以深淺拷貝也是針對,這類引用類型數據。它會拋棄對象的。另外,查資料過程中還看到這么一個詞結構化克隆算法還有這一篇資料也有參考,也寫得比較詳細了的深淺拷貝 基本數據類型的復制很簡單,就是賦值操作,所以深淺拷貝也是針對Object,Array這類引用類型數據。 淺拷貝對于字符串來說,是值的復制,而對于對象來說則是對對象地址的復制;而深拷貝的話,它不...
閱讀 1683·2021-10-13 09:39
閱讀 3154·2021-10-12 10:11
閱讀 549·2021-09-28 09:36
閱讀 2633·2019-08-30 15:55
閱讀 1384·2019-08-30 13:04
閱讀 621·2019-08-29 17:08
閱讀 1902·2019-08-29 14:14
閱讀 3399·2019-08-28 18:23