1.js内存结构
// js的原始类型和引用类型
// 原始类型：数值，字符串，布尔，null，undefined
// 引用类型:对象
// let a = 10;
// let b = a;
// a = 20;
// console.log(a);
// console.log(b);
let a = { name: "小明" };
let b = a;
a.name = "小红";
console.log(a.name);
console.log(b.name);
2.浅拷贝（原始类型）
<body>
<div id="app">
<form @submit.prevent="insert">
<input type="text" v-model="student.name">
<input type="text" v-model="student.age">
<button>添加</button>
</form>
<ul>
<li v-for="item in list">
姓名:{{item.name}}
年龄:{{item.age}}
</li>
</ul>
</div>
</body>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
student: {
name: "",
age: ""
},
list: []
},
methods: {
insert () {
this.list.push(this.copy(this.student))
}, copy (obj) {
let newObj = {};
for (let i in obj) {
newObj[i] = obj[i];
}
return newObj;
}
}
})
3.深拷贝（浅拷贝＋递归）
const student1 = {
name: "小明",
age: 2,
girlfriend: {
name: "小红"
}
}
// 浅拷贝
function copy (obj) {
let newObj = {};
for (let i in obj) {
if (obj[i] instanceof Object) {
newObj[i] = copy(obj[i])
} else {
newObj[i] = obj[i]
}
};
return newObj;
}
const student2 = copy(student1);
student1.girlfriend.name = "小花"
console.log(student1);
console.log(student2);
4.深拷贝（json数据格式）
// json 数据格式 JavaScript对象表示法
const student1 = {
name: "小明",
age: 2,
girlfriend: {
name: "小红"
}
}
let str = JSON.stringify(student1);
// console.log(str);
let obj = JSON.parse(str)
// console.log(obj);
function copy (obj) {
let str = JSON.stringify(obj);
let newObj = JSON.parse(str)
return newObj
}
const student2 = copy(student1);
student1.girlfriend.name = "小花"
console.log(student1);
console.log(student2);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
