最近开发的时候发现一个js的问题:如果用“=”将变量A(如JSON)的值赋给变量B,对变量B操作之后,变量A中的内容也改变了,即“=”采用的不是深度拷贝,这样会导致,如果我还需要使用变量A之前的数据的时候会出错,在处理这个问题的时候,接触到了$.extend方法,这里就整理到一起。
1、JSON字符串和数组的深度拷贝
<html>
<head>
<meta charset="UTF-8">
</head>
<script src="jquery-1.11.3.min.js"></script>
<script>
window.onload = function(){
var a0 = [{a:1},{b:2}];
var b0 = a0;
b0.splice(0,1);
console.log("a0"+"---"+JSON.stringify(a0));
console.log("b0"+"---"+JSON.stringify(b0));
var c0 = [{a:1},{b:2}];
var d0 = jQuery.parseJSON(JSON.stringify(c0));
d0.splice(0,1);
console.log("c0"+"---"+JSON.stringify(c0));
console.log("d0"+"---"+JSON.stringify(d0));
}
</script>
</html>
结果对比:
2、$.extend方法简要笔记
$.extend(boolean,{},Object ... objs);第一个参数代表是否深度拷贝,第二个参数代表返回到哪个对象,后面代表多个参数。第一个参数一般选择true,第二个参数为“{}”则需要用新的变量接收,下面将一些测试的例子列出来,供大家参考:
<html>
<head>
<meta charset="UTF-8">
</head>
<script src="jquery-1.11.3.min.js"></script>
<script>
window.onload = function(){
var a1 = [{a:1,b:2}];
var b1 = [{c:3,d:4}];
var c1 = $.extend(true,{},a1,b1);
console.log("a1"+"---"+JSON.stringify(a1));
console.log("b1"+"---"+JSON.stringify(b1));
console.log("c1"+"---"+JSON.stringify(c1));
var a2 = [{a:1,b:2}];
var b2 = [{c:3,d:4}];
var c2 = $.extend(true,a2,b2);
console.log("a2"+"---"+JSON.stringify(a2));
console.log("b2"+"---"+JSON.stringify(b2));
console.log("c2"+"---"+JSON.stringify(c2));
var a3 = [{a:1}];
var b3 = [{c:3}];
var c3 = {"0":{x:1},"1":{y:2}};
var d3 = $.extend(true,{},a3,b3,c3);
console.log("a3"+"---"+JSON.stringify(a3));
console.log("b3"+"---"+JSON.stringify(b3));
console.log("c3"+"---"+JSON.stringify(c3));
console.log("d3"+"---"+JSON.stringify(d3));
}
</script>
</html>
结果对比: