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>

 

橙子主题打折出售

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

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

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1973 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1918 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,799 作者:Pastore Antonio
1642 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1606 浏览量
Swagger2 接口多级分组方法 swagger无疑是Java开发的最佳伴侣,接口非常方便调试;当然也有用Postman,因人而异吧...Swagger2接口多级分组方法 作者:Pastore Antonio
1522 浏览量