js深浅拷贝
Javascript深浅拷贝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--Javascript有六种基本数据类型（也就是简单数据类型），
它们分别是：Undefined，Null，Boolean，Symbol，Number和String。
还含有一种复杂数据类型，就是对象-->
<!--注意Undefined和Null的区别，Undefined类型只有一个值，
就是undefined，Null类型也只有一个值，也就是null
Undefined其实就是已声明未赋值的变量输出的结果
null其实就是一个不存在的对象的结果-->
<script type="text/javascript">
// 浅拷贝
var obj = {
name:'wsscat',
age:0
}
var obj2 = obj;
obj2['c'] = 5;
console.log(obj);//Object {name: "wsscat", age: 0, c: 5}
console.log(obj2);////Object {name: "wsscat", age: 0, c: 5}
// 深拷贝
//对于数组我们可以使用slice()和concat()方法来解决上面的问题
//slice方法
var arr = ['wsscat', 'autumns', 'winds'];
var arrCopy = arr.slice(0);
arrCopy[0] = 'tacssw'
console.log(arr)//['wsscat', 'autumns', 'winds']
console.log(arrCopy)//['tacssw', 'autumns', 'winds']
// concat方法
var arr = ['wsscat', 'autumns', 'winds'];
var arrCopy = arr.concat();
arrCopy[0] = 'tacssw'
console.log(arr)//['wsscat', 'autumns', 'winds']
console.log(arrCopy)//['tacssw', 'autumns', 'winds']
// 对象我们可以定义一个新的对象并遍历新的属性上去实现深拷贝
var obj = {
name:'wsscat',
age:0
}
var obj2 = new Object();
obj2.name = obj.name;
obj2.age = obj.age
obj.name = 'autumns';
console.log(obj);//Object {name: "autumns", age: 0}
console.log(obj2);//Object {name: "wsscat", age: 0}
// 当然我们可以封装好一个方法来处理对象的深拷贝，代码如下
var obj = {
name: 'wsscat',
age: 0
}
var deepCopy = function(source) {
var result = {};
for(var key in source) {
if(typeof source[key] === 'object') {
result[key] = deepCopy(source[key])
} else {
result[key] = source[key]
}
}
return result;
}
var obj3 = deepCopy(obj)
obj.name = 'autumns';
console.log(obj);//Object {name: "autumns", age: 0}
console.log(obj3);//Object {name: "wsscat", age: 0}
</script>
</html>
数组中存放函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--在javascript中函数也是一种数据，能够像操作一个对象对它进行操作。
并且javascript不进行数据类型检查，数组可以存放任何东西，
在下面代码中我们不但在数组中存放了函数，并且也可以在存放一个执行函数的返回值，
所以数组前两个数据存放都是函数执行返回值-->
<script type="text/javascript">
var funcA = function() {
console.log("funcA");
return "hello funA";
}
var funcB = function() {
console.log("funcB");
return "hello funB";
}
var funcC = function() {
console.log("funcC");
return "hello funC";
}
var arr = [funcA(), funcB(), funcC];
console.log(arr);
arr[2]();
</script>
</html>
数组对象的深拷贝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
Object.prototype.deepCopy = function() {
var obj = null; //用于最后返回一个对象，这个对象是深复制的结果
for(var attr in this) { //遍历这个对象的每一个属性
if(this.hasOwnProperty(attr)) { //主要是递归自有属性
if(typeof(this[attr] === 'object')) { //如果对象的属性是一个对象，就递归复制它的每一个属性
if(this[attr] === null) { //如果对象为null
obj[attr] = null;
} else if(Object.prototype.toString(this[attr]) === '[object Array]') { //如果是个数组
obj[attr] = [];
for(var i = 0; i < this[attr].length; i++) {
obj[attr].push(this[attr][i].deepCopy());
}
} else { //object
obj[attr] = this[attr].deepCopy();
}
} else {
obj[attr] = this[attr];
}
}
}
return obj;
}
</script>
</html>
