jquery $.extend() 对象内容合并

我不是女神ヾ 2021-07-28 19:19 324阅读 0赞

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：

1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。  
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

实例分析如下：

常见的用户输入数据时的设置

function getPeople(obj){
    var default={
    	name: 'hunger',
    	age: 20,
    	sex: 'male'
    }
    var opts={}
    $.extend(obj,default,obj)
    console.log(opts);
    }

目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);

function getPeople(obj){
    	var def={
    		name: 'hunger',
    		age: 20,
    		sex: 'male'
    	}
    	var opts=$.extend({},def,obj)
    	console.log(opts)
    }
    
    obj2={
    	  name: 'valley',
    	  age: 30
    }
    getPeople(obj2);	//最后输出Object {name: "valley", age: 30, sex: "male"}

**$.extend()方法默认是浅拷贝**  
我们来看一下一个例子

var obj={}
    var obj1={
    	name: 'hunger',
    	sex: 'male',
    	friends: [1,2,3]
    };
    var obj2={
    	name: 'valley',
    	age: 30
    }
    $.extend(obj,obj1)   //得到obj={ name: 'hunger', sex: 'male', friends: [1,2,3]}
    
    //这个时候我们再进行以下操作
    obj.friends[0]=100;   //此时obj={name: 'hunger', sex: 'male', friends: [100,2,3]}
    
    obj1.friends   //输出[100,2,3]  obj1也会随之改变   这就是浅拷贝

要想实现深拷贝，则需要设置布尔值，这样写：$.extend(true,obj,obj1)  
当改成这样写的时候，

$.extend(true,obj,obj1)
    obj.friends[0]=100;		//此时obj={name: 'hunger', sex: 'male', friends: [100,2,3]}
    obj1.friends			//输出[1,2,3]  obj1不会改变，实现浅拷贝