<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 浅拷贝
// 1、基本的赋值 =
let a = [0, 1, 2, 3, 4],
b = a;
console.log(a === b); //true
a[0] = 1;
console.log(a, b); //[1,1,2,3,4]
// 2、Object.assing()
let obj = {
name: 'chen',
age: '18'
}
let obj2 = {
hobby: 'music'
}
let obj3 = Object.assign(obj2, obj)
console.log(obj3)
console.log(Object.assign({}, obj))
// 深拷贝
let test = {
name: 'chen',
message: {
age: '18',
}
}
let test2 = {}
// 1、封装函数
function deepClone(newObj, oldObj) {
for (var k in oldObj) {
let item = oldObj[k];
if (item instanceof Array) {
// 先判断是否是数组
newObj[k] = [];
deepClone(newObj[k], item)
} else if (item instanceof Object) {
// 再判断是否是对象
newObj[k] = {};
deepClone(newObj[k], item)
} else {
// 基本的数据类型就直接赋值即可
newObj[k] = item
}
}
}
deepClone(test2, test)
console.log(test2)
test2.message.age = '20'
console.log('--', test);
console.log('--', test2);
// 2、除了递归，我们还可以借用JSON对象的parse和stringify
let o1 = {
name: 'chen',
message: {
age: '18',
}
}
let o2 = JSON.parse(JSON.stringify(test))
o2.message.age = '20'
console.log('o2--', o2);
console.log('o1--', o1);
// 3.除了上面两种方法之外，我们还可以借用JQ的extend方法。 需要依赖JQ库。
$.extend([deep], target, object1[, objectN])
// deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
// target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
// object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
let a = [0, 1, [2, 3], 4];
b = $.extend(true, [], a);
a[0] = 1;
a[2][0] = 1;
console.log(a, b);
// 4、slice
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice(); //没有参数表示从头截取到尾部
console.log(aCopy); // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
console.log(aCopy === arr); // false
arr[0] = 'a'
aCopy[0]='1'
console.log(arr); // false
console.log(aCopy); // false
</script>
</body>
</html>
