JS對(duì)象復(fù)制(深拷貝和淺拷貝)
a、可支持多個(gè)對(duì)象復(fù)制
b、如果source和target屬性相同 source會(huì)復(fù)制target的屬性
c、target只能為Object對(duì)象
var obj = {a:1,b:2}undefinedObject.assign({c:3},obj){c: 3, a: 1, b: 2}obj{a: 1, b: 2} 兼容性寫法if(Object.assign){//兼容}else{//不兼容}2、擴(kuò)展運(yùn)算符(spread)
支持將多個(gè)對(duì)象復(fù)制到一個(gè)對(duì)象上“
var obj1 = { foo: 'foo' };var obj2 = { bar: 'bar' }; var copySpread = { ...obj1, ...obj2 }; // Object {foo: 'foo', bar: 'bar'}copySpread {foo: 'foo', bar: 'bar'}var obj = {a:1,b:2,c:3}var objs = {...obj}objs{a: 1, b: 2, c: 3}objs.a=1010objs{a: 10, b: 2, c: 3}obj{a: 1, b: 2, c: 3}二、深拷貝1、使用對(duì)象序列化 JSON.stringify()和JSON.parse()
注意:此方法僅在原對(duì)象包含可序列化值類型且沒有任何循環(huán)引用時(shí)才有效。不可序列化值類型的一個(gè)例子是Date對(duì)象 -JSON.parse只能將其解析為字符串而無法解析回其原始的Date對(duì)象 或者對(duì)象中屬性值為function
var obj = {a:1,b:[1,2,3],c:{e:3},bool:false}undefinedvar objs = JSON.parse(JSON.stringify(obj))undefinedobjs{a: 1, b: Array(3), c: {…}, bool: false}objs.bool = truetrueobjs{a: 1, b: Array(3), c: {…}, bool: true}obj{a: 1, b: Array(3), c: {…}, bool: false}2、使用遞歸,對(duì)對(duì)象屬性進(jìn)行判斷
function deepClone(obj) { var copy; // 如果 obj 是 null、undefined 或 不是對(duì)象,直接返回 obj // Handle the 3 simple types, and null or undefined if (null == obj || 'object' != typeof obj) return obj; // Handle Date if (obj instanceof Date) { copy = new Date(); copy.setTime(obj.getTime()); return copy; } // Handle Array if (obj instanceof Array) { copy = []; for (var i = 0, len = obj.length; i < len; i++) {copy[i] = clone(obj[i]); } return copy; } // Handle Function if (obj instanceof Function) { copy = function() { return obj.apply(this, arguments); } return copy; } // Handle Object if (obj instanceof Object) { copy = {}; for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]); } return copy; } throw new Error('Unable to copy obj as type isn’t supported ' + obj.constructor.name);}
以上就是JS對(duì)象復(fù)制(深拷貝和淺拷貝)的詳細(xì)內(nèi)容,更多關(guān)于JS的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 如何通過eclipse web項(xiàng)目導(dǎo)入itellij idea并啟動(dòng)2. jsp實(shí)現(xiàn)登錄界面3. PHP未來的一些可能4. IDEA 端口占用的解決方法(推薦)5. 刪除docker里建立容器的操作方法6. 關(guān)于在IDEA中SpringBoot項(xiàng)目中activiti工作流的使用詳解7. 使用vue寫一個(gè)翻頁的時(shí)間插件實(shí)例代碼8. python 服務(wù)器運(yùn)行代碼報(bào)錯(cuò)ModuleNotFoundError的解決辦法9. 使用IDEA編寫jsp時(shí)EL表達(dá)式不起作用的問題及解決方法10. 將Git存儲(chǔ)庫(kù)克隆到本地IntelliJ IDEA項(xiàng)目中的詳細(xì)教程
