1. 程式人生 > >js物件拷貝

js物件拷貝

1、萬能的for迴圈實現物件的淺拷貝

僅僅複製物件的引用,而不是物件本身。

給子物件的陣列型別的屬性新增一個新值,父物件的該屬性值也被篡改。

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = copyObj(obj)

    function copyObj(obj) {
      let res = {}
      for (var key in obj) {
        res[key] = obj[key]
      }
      return res
    }

2、轉換成json再轉換成物件實現物件的深拷貝

把複製的物件所引用的全部物件都複製一遍,能夠實現真正意義上的陣列和物件的拷貝。

淺拷貝的問題:如果父物件的屬性值為一個數組或另一個物件,那麼實際上子物件獲得的只是一個記憶體地址,而不是對父物件的真正拷貝,因此存在父物件被篡改的可能

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = JSON.parse(JSON.stringify(obj))

3、擴充套件運算子實現物件的深拷貝

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var { ...obj2
    } = obj
    obj.old = '22'
    console.log(obj)
    console.log(obj2)

4、Object.assign淺拷貝

Object.assign方法的第一個引數是目標物件,後面的引數都是源物件。

注意,如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

相關推薦

[log] js物件拷貝

js物件拷貝 深拷貝 var clone = function (obj) { if(obj === null) return null if(typeof obj !== 'object') return obj; if(obj.c

js物件拷貝的方法

 物件拷貝的方法是一個難點,尤其是深拷貝。建議把程式碼都執行下,幫助理解拷貝。 一. json方法 1. 適合情況:  JSON物件的深度克隆。方法是先JSON.stringify() 轉為json字串, 再JSON.parse() 轉為json陣列 2. 缺點:   a. 如果你的物件裡有函式, 函式

js物件拷貝遇到的坑

問題:通過拷貝賦值後,所有的物件的name居然都是C   test(){ let person = [{'name':'danny'}] let names = ['A','B','C'] let temp = [] names.forEach(name

js物件拷貝

1、萬能的for迴圈實現物件的淺拷貝 僅僅複製物件的引用,而不是物件本身。 給子物件的陣列型別的屬性新增一個新值,父物件的該屬性值也被篡改。 var obj = { name: 'FungLeo', sex: 'man', o

js物件的深拷貝及其的幾種方法

深拷貝和淺拷貝是javascript中一個比較複雜的問題,也是面試官最喜歡問的問題之一,通過這個為可以看出是否入門,深拷貝和淺拷貝也是初學者經常犯錯一個點。 簡單來說深拷貝是拷貝儲存在棧中的物件,而淺拷貝是從記憶體中拷貝,這就涉及到資料存放位置了,總所周知,資料大體可以分為兩種資料型別,一種是基

關於 js 物件 轉 字串 和 深拷貝 的探討

隨著更多語言的支援 **json** 作為資料傳輸和儲存的媒體,已經非常成熟且應用廣泛。卻存在致命硬傷,不攜帶 **物件方法** 。在資料傳輸和儲存中,這是恰當的和合理的。 但是在更多的應用場景中,又是無奈的。 專案需要,簡單的提了個思路,將物件轉換為顯示宣告形式的字串例如: var person

JS物件陣列的深度拷貝

直接=是淺拷貝,對於想完全複製可以這樣: 途徑1  let arrObj2=JSON.parse(JSON.stringify(arrObj1)); 途徑2  var objDeepCopy = function (source) {     var sourceCop

vue 爬坑 之js 物件/陣列 賦值/拷貝 解決VUE中賦值引用後資料雙向改變的問題

淺拷貝這裡就不講了,我們直接講深拷貝 正常的陣列/物件拷貝可以直接用 const cloneObj = JSON.parse(JSON.stringify(Obj)); 這種方式可以解決相當多一部分的賦值問題,但是一些特殊屬性除外(undefined/function)

JS物件的引用,物件拷貝

一、場景 除了基本型別跟null,物件之間的賦值,只是將地址指向同一個,而不是真正意義上的拷貝 將一個物件賦值給另外一個物件。 var a = [1,2,3]; var b = a; b.push(4); // b中添加了一個4 alert(a); // a變成了[1,2,3,4]

js物件的淺拷貝和深拷貝

物件複製分為深拷貝和淺拷貝。 淺拷貝只會將物件中的各個屬性依次複製,而不會遞迴複製,因為js儲存物件是存地址的,所以會造成複製物件和原物件指向同一記憶體地址。 淺拷貝的程式碼簡單實現: var

js物件的深拷貝與淺拷貝詳解

一、淺拷貝例子:var Chinese = {     nation: '中國',     arr: [ 1, 2, 3],     obj: { name: 'yzs', age: 18     } }; function extendCopy (p) {     va

一行程式碼完成js物件陣列的深拷貝

1、對於普通陣列(陣列元素為數字或者字串),深拷貝很簡單,拷貝之後兩個陣列指標指向的儲存地址不同,從而完成深拷貝 var _test = [1,2,3];//原陣列 var _testCopy = [].concat(_test);//拷貝陣列 _testCopy[0]=4

js物件拷貝

前置知識 基本型別和引用型別   基本型別:存放在棧記憶體中的簡單資料段,資料大小確定,記憶體空間大小可以分配。   5種基本資料型別有Undefined、Null、Boolean、Number 和 String,它們是直接按值存放的,所以可以直接訪問。

js 中的物件拷貝

js 中物件的拷貝很常見,特別是在面試中很常見 一: 物件淺拷貝與深拷貝和物件引用的區別 var a= {name:'anikin'} var b = jsons a == b // true b.name == 'jack' a.name //

js物件的深層 拷貝

//物件的深層 拷貝 function deepCopy(src,dist){ dist = dist || {}; for(var i in src){ if(typeof src[i] == 'object'){ //這裡一定要初始化物

js深度拷貝物件-ES7

ES7深度拷貝物件 Object.getOwnPropertyDescriptors 該函式返回一個物件所有的屬性,甚至包括get/set函式。ES2017加入這個函式的主要動機在於方便將一個物件深度拷貝給另一個物件,同時可以將getter/setter

原生js物件合併物件拷貝Object.assign()方法的es5、es6實現

實現思路:支援es6的瀏覽器,可以直接用Object.assign()合併物件,只支援es5的瀏覽器,我們用pollyfill的方法。 作用 Object.assign() 方法用於把一個或多個源物件的可列舉屬性值複製到目標物件中,返回值為目標物件。 語法 Obj

js物件的直接賦值、淺拷貝與深拷貝

  最近Vue專案中寫到一個業務,就是需要把對話方塊的表單中的資料,每次點選提交之後,就存進一個el-table表格中,待多次需要的表單資料都提交進表格之後,再將這個表格提交,實現多個表單資料的同時提交,期間還可以用表格進行預覽、修改等其他操作。將每個表單資料存進表格的程式碼大致程式碼如下:     let&

關於js拷貝拷貝 以及賦值操作。

進行 deep 都是 包括 是否 個數 實現 拷貝 return 最近同事又碰到關於深淺拷貝以及賦值的問題,今天我也研究一下記錄一下,加深一下記憶。   舉一個簡單的例子:   var people = {     age:10,     name:"小華",     ar

js拷貝引起的對內存空間的一些思考

typeof pro 應該 ack RR -c IT init webp 數據類型 js常用數據類型分為基本類型和引用類型 基本類型:null、undefined、數值型、字符串型、布爾型 引用類型:數組、對象 內存空間 var a = [1, 2, 3]; var