js 对象合并的几种方法

最新推荐文章于 2024-09-20 16:24:46 发布

jlhejs

最新推荐文章于 2024-09-20 16:24:46 发布

阅读量9.5k

点赞数

分类专栏：前端开发 JavaScript 文章标签： webview elementui 拓扑学

本文链接：https://blog.csdn.net/kouhunzhe/article/details/122466328

版权

前端开发同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

24 篇文章 0 订阅

订阅专栏

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