js的数据类型分为两种
- 一种是基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）
- 一种是引用数据类型：对象(Object)、数组(Array)、函数(Function)
基本类型的变量是存放在栈内存，引用数据类型是放在堆内存中的，基本数据类型保存的是值，而引用数据类型一般保存的是对象的地址。
如果我们单纯的复制的话，可能就只是复制对象的地址，那么这就是浅拷贝，如果是克隆了对象，改变了引用对象的地址，那么就是深拷贝。
- 浅拷贝就是拷贝指向对象的指针
- 深拷贝就是克隆了对象，并重新在堆中指向了一个新的地址
- 只有引用数据类型才存在浅拷贝和深拷贝，基本数据类型就是赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
// 浅拷贝
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = Object.assign({}, a);
b.child.name = "小李";
console.log(a);
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = { ...a };
b.child.name = "小李";
console.log(a);
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = $.extend({}, a);
b.child.name = "小李";
console.log(a);
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = _.clone(a);
b.child.name = "小李";
console.log(a);
// 深拷贝
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = JSON.parse(JSON.stringify(a)); //不能拷贝方法
b.child.name = "小李";
console.log(a);
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = $.extend(true, {}, a);
b.child.name = "小李";
console.log(a);
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = _.cloneDeep(a); //可以拷贝方法
b.child.name = "小李";
console.log(a);
// 手写实现浅拷贝
function myClone(target) {
let obj = Array.isArray(target) ? [] : {};
let keys = Object.keys(target);
for (k of keys) {
obj[k] = target[k];
}
return obj;
}
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = myClone(a);
b.child.name = "小李";
console.log(a);
// 手写实现深拷贝
function myCloneDeep(target) {
let obj = Array.isArray(target) ? [] : {};
let keys = Object.keys(target);
for (k of keys) {
obj[k] =
typeof target[k] === "object" ? myCloneDeep(target[k]) : target[k];
}
return obj;
}
console.log("------------------");
var a = { name: "蔡徐坤", child: { name: "小周", age: "18" } };
var b = myCloneDeep(a);
b.child.name = "小李";
console.log(a);
</script>
</body>
</html>
标签：console,name,实现,JavaScript,child,var,拷贝,log From： https://www.cnblogs.com/qianduanLamp/p/16619779.html