JavaScript对象的合并以及深拷贝

文章目录

一、将下列对象合并：
- 方式一：Object.assign()
- 方式二：扩展运算符（...）
- 方式三：自己封装方法
二、深拷贝
- 方式一：结合使用JSON.parse()和JSON.stringify()
- 方式二：手写遍历递归赋值
- 感谢您的过目！

一、将下列对象合并：

const a = {a: 1, b:2};
const b = {b: 3, c:4};

方式一：Object.assign()

let foo = Object.assign(a, b);//{a: 1, b: 3, c: 4}

可用于vue项目批量清空数据（this.$options.data）

方式二：扩展运算符（…）

let bar = {...a, ...b};//{a: 1, b: 3, c: 4}

方式三：自己封装方法

function merge(foo, bar) {for (let key in bar) {foo[key] = bar[key];}return foo;
}
merge(a, b);//{a: 1, b: 3, c: 4}

如需对重复项保留foo中的值，用hasOwnProperty

二、深拷贝

// 勇士总冠军！！！
const gsw = {name: 'Golden State Warriors',establishmentYear: '1946',stadium: 'Chase Center',location: 'San Francisco',boss: 'Joe Lacob',generalManager: 'Bob Myers',coach: 'Steve Kerr',startingLineups: {guard: ['Stephen Curry', 'Klay Thompson'],forward: ['Draymond Green', 'Andrew Wiggins', 'Kevon Looney']},allPlayers: {guard: ['Stephen Curry', 'Klay Thompson', 'Jordan Poole', 'Gary Payton Ⅱ', 'Chris Chiozza', 'Moses Moody', 'Quinndary Weatherspoon'],forward: ['Draymond Green', 'Andrew Wiggins', 'Kevon Looney', 'Otto Porter Jr.', 'Nemanja Bjelica', 'Jonathan Kuminga', 'Juan Toscano-Anderson'],guardForward: ['Andre Iguodala', 'Damion Lee'],center: ['James Wiseman']},champions: [{season: '1946-1947',name: 'Philadelphia Warriors',starInCharge: 'Joe Fulks',opponent: 'Chicago Stags',score: '4:1'}, {season: '1955-1956',name: 'Philadelphia Warriors',starInCharge: 'Paul Arizin',opponent: 'Ford Wayne Bullets',score: '4:1'}, {season: '1974-1975',name: 'Golden State Warriors',starInCharge: 'Rick Barry',opponent: 'Washington Bullets',score: '4:0'}, {season: '2014-2015',name: 'Golden State Warriors',starInCharge: 'Stephen Curry',opponent: 'Cleveland Cavaliers',score: '4:2'}, {season: '2016-2017',name: 'Golden State Warriors',starInCharge: 'Stephen Curry',opponent: 'Cleveland Cavaliers',score: '4:1'}, {season: '2017-2018',name: 'Golden State Warriors',starInCharge: 'Stephen Curry',opponent: 'Cleveland Cavaliers',score: '4:0'}, {season: '2021-2022',name: 'Golden State Warriors',starInCharge: 'Stephen Curry',opponent: 'Boston Celtics',score: '4:2'}]
}

方式一：结合使用JSON.parse()和JSON.stringify()

let baz = JSON.parse(JSON.stringify(gsw));

缺点： 1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式； 2、如果obj里面有RegExp，则打印出来是空对象； 3、如果对象中有函数或者undefined，则会直接被丢掉； 4、如果json里有对象是由构造函数生成的，则会丢掉对象的construction； 5、如果对象中存在循环引用的情况也无法正确实现深拷贝； 6、如果对象中存在NaN，则序列化后会变成null。

方式二：手写遍历递归赋值

function isObject(obj) {return typeof(obj) === 'object' && typeof obj !== 'null';
}function deepClone(obj) {let result = Array.isArray(obj) ? [] : {};if (obj instanceof Object) {for (let key in obj) {// 只拷贝自身属性，原型上的不拷贝if (obj.hasOwnProperty(key)) {result[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];}}} else {return obj;}return result;
}deepClone(gsw);

感谢您的过目！

JavaScript对象的合并以及深拷贝相关推荐

如何动态合并两个JavaScript对象的属性？
我需要能够在运行时合并两个(非常简单的)JavaScript对象. 例如,我想: var obj1 = { food: 'pizza', car: 'ford' } var obj2 = { anim ...
JavaScript对象深拷贝
JavaScript对象深拷贝引言在JavaScript中对对象拷贝复制通常是使用循环遍历的方式: var obj = {x:1,y:[1,2,3] }var obj2 = {}; for(let ...
详解JavaScript对象深拷贝
详解JavaScript对象深拷贝在几乎所有编程语言中,对象都以引用形式保存给变量.复制给其他变量.JavaScript语言也是如此.因此简单的进行赋值操作进行复制仅仅是对对象数据的引用地址进行一个 ...
javascript 两个对象深度合并
对象深度合并,使用到递归两个对象有时需要合并成一个对象并传递给后端,那要如何合并? 两个a, b对象将b对象合并到a对象中 deepMerge方法使用如下: let form = {a:1,b:2 ...
android两个数组对象去重合并,JS 两个对象数组合并并去重
JS两个对象数组合并并去重 let jsonArr = [ { "ID": "", "NO": "1", "N ...
javascript对象操作总结
2019独角兽企业重金招聘Python工程师标准>>> <script type="text/javascript" >/***对象声明和赋值操作** ...
JavaScript 对象所有API解析【2020版】
写于 2017年08月20日,虽然是2017年写的文章,但现在即将2020年依旧不过时,现在补充了2019年新增的ES10 Object.fromEntries().发到公众号申明原创.若川顺便在此提 ...
前端必须学会的5个原生JavaScript对象方法
前端必须学会的5个原生JavaScript对象方法 JavaScript 随着node.js和基于JavaScript的各种框架的诞生,JavaScript在当今的互联网越来越受到人们的重视,今天我们 ...
es6 javascript对象方法Object.assign()
1 基本用法 Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ). var target = { a: 1 }; var ...