<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>对象合并</title>
</head>
<body>
<script>
defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: { id: "123456", password: "******", nickname: "sunny", email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: { id: "111111", password: "*****", nickname: "dfghk", phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
var mergeObj = {}
defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: { id: "123456", password: "******", nickname: "sunny", email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: { id: "111111", password: "*****", nickname: "dfghk", phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
mergeObj = {}
console.group("------初始值------");
console.log("defaultObj", JSON.stringify(defaultObj));
console.log("optionsObj", JSON.stringify(optionsObj));
console.log("mergeObj", JSON.stringify(mergeObj));
console.groupEnd("------end------");
mergeObj = {}
defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: { id: "123456", password: "******", nickname: "sunny", email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: { id: "111111", password: "*****", nickname: "dfghk", phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
mergeObj = { ...defaultObj, ...optionsObj };
console.group("------使用...合并对象|||mergeObj = { ...defaultObj, ...optionsObj }------");
console.log("defaultObj", JSON.stringify(defaultObj));
console.log("optionsObj", JSON.stringify(optionsObj));
console.log("mergeObj", JSON.stringify(mergeObj));
console.groupEnd("------end------");
mergeObj = {}
defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: { id: "123456", password: "******", nickname: "sunny", email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: { id: "111111", password: "*****", nickname: "dfghk", phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
mergeObj = Object.assign(defaultObj, optionsObj);
console.group("------使用Object.assign合并对象|||mergeObj = Object.assign(optionsObj, defaultObj);------");
console.log("defaultObj", JSON.stringify(defaultObj));
console.log("optionsObj", JSON.stringify(optionsObj));
console.log("mergeObj", JSON.stringify(mergeObj));
console.groupEnd("------end------");
// 遍历赋值法
// 代码逻辑：
// 循环对象n中的每一个对应属性。
// 确认对象n中存在该属性
// 确认对象o中不存在该属性
var extend=function(o,n){
for (var p in n){
if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) ))
o[p]=n[p];
}
return o
};
mergeObj = {}
defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: { id: "123456", password: "******", nickname: "sunny", email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: { id: "111111", password: "*****", nickname: "dfghk", phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
mergeObj = extend(optionsObj, defaultObj);
console.group("------使用遍历赋值法合并对象------");
console.log("defaultObj", JSON.stringify(defaultObj));
console.log("optionsObj", JSON.stringify(optionsObj));
console.log("mergeObj", JSON.stringify(mergeObj));
console.groupEnd("------end------");
function deepMerge(obj1, obj2) {
let key;
for (key in obj2) {
// 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
obj1[key] =
obj1[key] && obj1[key].toString() === "[object Object]"
? deepMerge(obj1[key], obj2[key])
: (obj1[key] = obj2[key]);
}
return obj1;
}
mergeObj = {}
defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: { id: "123456", password: "******", nickname: "sunny", email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: { id: "111111", password: "*****", nickname: "dfghk", phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
mergeObj = deepMerge(defaultObj, optionsObj);
console.group("------使用deepMerge合并对象------");
console.log("defaultObj", JSON.stringify(defaultObj));
console.log("optionsObj", JSON.stringify(optionsObj));
console.log("mergeObj", JSON.stringify(mergeObj));
console.groupEnd("------end------");
</script>
</body>
</html>
浏览量： 1,098
