jQuery.extend() 的含义及用法

最新推荐文章于 2021-10-02 16:05:05 发布

认真的荣荣

最新推荐文章于 2021-10-02 16:05:05 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/lurr88/article/details/79583768

版权

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这
种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果 多个对象具有相同的属性，则 后者会覆盖前者的属性值。
/* object2 合并到 object1 中 */

$.extend(object1, object2);

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
	<div id="log"></div>
	<script>
	$(function () { 
	    var object1 = {
	        fruit: [{apple: '0', pear: 1},{apple: 2, pear: 3},123,"abc",true],
	        banana: {weight: 52, price: 100},
	        cherry: false
	    };
	    var object2 = {
	        banana: {price: '200'},
	        durian: 100
	    };
	    /* object2 合并到 object1 中 */
	    $.extend(object1, object2);
	    var array = function(obj){//如果val不是常规对象（可能为数组、字符串）
	    	var sub = [];
	    	var type = Object.prototype.toString.call(obj);
	    	switch (type){
	    		case '[object Array]': //数组类型
	    			$.each(obj,function(){
	    				var subS = '';
	    				subS += $.isPlainObject(this) ? printObj(this) : array(this);
	    				sub.push(subS); 
	    			});
    				return "[" +  sub.join(',') + "]";
	    			break;
	    		case '[object String]': //字符串类型
	    			return '"' + obj +'"'; break;
	    		default: return obj;
	    	}
	    }
	    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {//json序列化，如果浏览器不支持JSON，则通过下面的代码模拟
	        var arr = [];
	        $.each(obj, function(key, val) {
	            var next = '"' + key +'"' + ":";
	            next += $.isPlainObject(val) ? printObj(val) : array(val);
	            arr.push( next );
	        });
	        return "{" +  arr.join(",") + "}";
	    };
	    $("#log").append( printObj(object1) );
	})
	</script>
</body>
</html>

运行结果：

{"fruit":[{"apple":"0","pear":1},{"apple":2,"pear":3},123,"abc",true],"banana":{"price":"200"},"cherry":false,"durian":100}

另：为什么不直接用typeof方法测试是否为字符串string类型和array类型呢？

今天小编给大家整理些关于javascript判断变量是否是数组(Array)的相关知识，主要通过以下四点给大家展开话题，具体内容如下所示：

1. typeof真的那么厉害吗？？

 
         //首先看代码  
        
         var 
         ary = [1,23,4];  
        
         console.log( 
         typeof 
         ary);  
         //输出结果是Object

上面的办法并不能实时的检测出是否是数组，只能判断其类型，所以说typeof判断基本类型数据还是挺好的，但是不能准确测试出是否是数组（typeof的具体用法以后提及，现在回归正题）

2.instanceof 判断

1 2	`var` `ary = [1,23,4];` `console.log(ary` `instanceof` `Array)` `//true;`

从输出的效果来看，还是挺令人满意的，能准确的检测出数据类型是否是数组，不要高兴的太早，大家先想想这个的缺点，我们接着说第三种方法

3.原型链方法

 
         var 
         ary = [1,23,4];  
        
         console.log(ary.__proto__.constructor==Array); 
         //true  
        
         console.log(ary.constructor==Array) 
         //true 这两段代码是一样的

这个办法开起来好高大上哦~~，利用了原型链的方法，但是但是，这个是有兼容的哦，在IE早期版本里面__proto__是没有定义的哦~而且，这个仍然有局限性，我们现在就来总结一下第2种方法和第3种方法局限性

总结一下第2种方法和第3种方法局限性

instanceof 和constructor 判断的变量，必须在当前页面声明的，比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个ary，并将其赋值给父页面的一个变量，这时判断该变量，Array == object.constructor;会返回false；

原因：

1、array属于引用型数据，在传递过程中，仅仅是引用地址的传递。

2、每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array；切记，不然很难跟踪问题！

4.通用的方法

 
         var 
         ary = [1,23,4];  
        
         function 
         isArray(o){  
        
         return 
         Object.prototype.toString.call(o)== 
         '[object Array]' 
         ;  
        
         }  
        
         console.log(isArray(ary));

具体Object.prototype.toString 的用法，请参照 Object.prototype.toString的用法

认真的荣荣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.extend() 的含义及用法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。/* object2 合并到 object1 中 */$.extend(...
复制链接

扫一扫