美文网首页
前端对象合并方法

前端对象合并方法

作者: 摸爬打滚 | 来源:发表于2019-07-16 10:03 被阅读0次

假设需求: 设有对象 obj1 ,obj2,需要得到对象 obj3

let obj1 = { a :'a' }, obj2 = { b :'b' };  →  let obj3 = { a :'a', b :'b' }

一、JavaScript原生对象合并方法

  • 1、Object.assign()方法,返回合并后的对象,且第一个目标对象自身也会改变为合并对象后的值。

      注:该方法是浅拷贝
    
    let obj1 = {a : 'a'};
    let obj2 = {b : 'b'};
    let obj3 = {};
    obj3 = Object.assign(obj1, obj2);
    console.log(obj3);    //{a: "a", b: "b"}
    console.log(obj1);    //注意目标对象自身也会改变{a: "a", b: "b"}
    console.log(obj2);    //{b: "b"}
    //尽量不改变原对象的值
    obj3 = {};
    Object.assign(obj3, obj1, obj2);
    console.log(obj3);    //{a: "a", b: "b"}
    
    //浅拷贝演示 
    //(拷贝完之后,仅仅只是拷贝了对象的指引,一但所值位置的对象值有所改变,则指向该地址的值都会影响而改变)
    let obj4 = {'a':1};
    let obj5 = {'b':{'b1':22,'b2':33}};
    let obj6 = Object.assign(obj4, obj5);
    console.log(obj4.b.b1) // 22
    obj5.b.b1 = 44;
    console.log(obj4.b.b1); //44 obj4.b仅拷贝了对象的指引,所以受原obj5的影响
    console.log(obj6.b.b1); //44
    obj6.b.b2 = 66;
    console.log(obj4.b.b2); //66
    console.log(obj5.b.b2); //66
    obj4.b.b1 = 55;
    console.log(obj5.b.b1); //55
    console.log(obj6.b.b1); //55
    
  • 2、遍历赋值

    原生代码

    let obj1={'a':1};
    let obj2={'b':2,'c':3};
    for(var key in obj2){
        //hasOwnProperty是判断自有属性,确认对象obj1中不存在该属性
        //使用 for in循环遍历对象的属性时,原型链上的所有属性都将被访问会避免型对象扩展带来的干扰
        if(obj2.hasOwnProperty(key) && (!obj1.hasOwnProperty(p)){  
            obj1[key]=obj2[key];
        } 
    }
    console.log(obj1);//{'a':1,'b':2,'c':3};
    

二、JQuery对象合并方法

  • 1、使用JQuery的extend方法(引入JQuery;重命名$;使用JQuery的extend方法),

      可以进行深拷贝
    
    console.log(typeof [1,3,4] === 'object')  //true,数组也为对象
     
    //第一个参数为:是否进行深拷贝(true为深拷贝)
    //同bject.assign一样会修改第一个目标对象的值,
    obj3 = jQuery.extend([deep], obj1, obj2)
    
    //深拷贝演示 
    //(拷贝完之后,是拷贝了对象的所有属性以及值,后面修改原对象值,不会对新生成的对象有影响)
    let obj1={'a':1};
    let obj2={'b':{'b1':22,'b2':33}};
    $.extend(true, obj1, obj2);  //第一个参数设为true表示深复制
    console.log(obj1.b.b1) // 22
    obj2.b.b1 = 44;  //obj2重新赋值
    console.log(obj1.b.b1) // 22   obj1拷贝了obj2的所有属性以及值,并不受obj2的影响
    

三、lodash对象合并方法

//下载loadsh
npm i --save lodash
//在项目中引入
let lodash = require("lodash");
//使用别名
window.lodash = window._ = lodash;
1、assign 方法。分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右,随后的下一个对象的属性会覆盖上一个对象的属性。
    
    注意: 这方法会改变 object本身
    
    参数:
         object (Object): 目标对象。
         [sources] (...Object): 来源对象。
         
    返回: (Object): 返回 object.
let obj1 = {a : 'a'};
let obj2 = {b : 'b'};
_.assign(obj1, obj2);
console.log(obj1);   //{a: "a", b: "b"}
2、extend 方法。这个方法类似 _.assign, 除了它会遍历并继承来源对象的属性。 

    注意: 这方法会改变 object本身
    
    参数:
         object (Object): 目标对象。
         [sources] (...Object): 来源对象。
         
    返回: (Object): 返回 object.
let obj3 = {a : 'a', c : 'c'};
let obj4 = {a :'q', b : 'b'};
_.extend(obj3, obj4);
console.log(obj3);   //{a: "q", c: "c", b: "b"}
console.log(obj4);   //{a: "q", b: "b"}
3、merge 方法。该方法类似_.assign, 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在,被解析为undefined的sources 来源对象属性将被跳过。数组和普通对象会递归合并,其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。

    注意: 这方法会改变 object本身
    
    参数:
         object (Object): 目标对象。
         [sources] (...Object): 来源对象。
         
    返回: (Object): 返回 object.
var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
_.merge(object, other);  // {'a':[{b: 2, c: 3},{d: 4, e: 5}]}

相关文章

  • 前端对象合并方法

    假设需求: 设有对象 obj1 ,obj2,需要得到对象 obj3 一、JavaScript原生对象合并方法 1、...

  • ES6 - 吃鸡入门系列 ~ Object对象

    对比 全写 方法简写 属性引用简写 对象合并 合并后的对象

  • day8 Object.assign()方法

    合并多个对象 克隆对象(浅); 为对象添加多个方法

  • JavaScript对象深浅拷贝

    首先对象属性和方法的简写方法。 Object.assign()Object.assign方法用于对象的合并。当对象...

  • object.assign()

    Object.assign()方法的用法 合并多个对象 克隆对象(浅); 为对象添加多个方法 http://blo...

  • Category实现原理

    依赖runtime 动态的将分类的方法和类方法合并到类对象和元类对象的方法列表中 (对实例对象 类对象 元类对...

  • jQuery扩展类

    一、JS合并对象的方法 *JQuery方法$.extend()的使用 [if !supportLists]1、[e...

  • iOS底层学习5 -- 分类底层原理

    分类中的方法是通过runtime动态的将分类的方法合并到类对象,元类对象中的。也就是在程序运行过程中合并的,不是编...

  • Category 分类

    1 通过Runtime动态将分类的方法合并到类对象,元类对象中。 2 扩展在编译的时候就已经合并的到类对象中 if...

  • js对象以及常用 方法

    1.class定义 2.Object.assign() 复制对象,合并对象 Object.assign() 方法用...

网友评论

      本文标题:前端对象合并方法

      本文链接:https://www.haomeiwen.com/subject/hbczkctx.html