Logo

js 对象合并 的几种方法

photo

2022年05月26日

<!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>

 

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!

热门文章

WordPress 后台编辑器样式实现直接预览 在WordPress3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样...WordPress后台编辑器样式实现直接预览 作者:Pastore Antonio
1531 浏览量
【干货】Chrome插件(扩展)开发全攻略 写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的...【干货】Chrome插件(扩展)开发全攻略 作者:Pastore Antonio
1486 浏览量
memcached 处理 多端口:https://blog.csdn.net/Erica_1230/article/deta...memcached处理 作者:Pastore Antonio
1480 浏览量
使用Nginx+WordPress搭建个人网站 背景很多研究技术的朋友喜欢写博客。如果希望搭建一个完全属于自己的网站,也并不困难。这里简要分享一下...使用Nginx+WordPress搭建个人网站 作者:Pastore Antonio
1452 浏览量
C#图片处理 通常对一幅图片的处理包括:格式变换,缩放(Scale),翻转(Rotate),截取(Clip),滤镜...C#图片处理 作者:Pastore Antonio
1443 浏览量