1. js中的深拷贝（值拷贝）：深拷贝与浅拷贝是针对
对象属性为对象的，因为基本数据类型在进行赋值 *** 作时（也就是深拷贝（值拷贝）），是直接将值赋给了新的变量，也就是该变量是原变量的一个副本，这时，你修改两个中的任意一个都不会影响另一个；而对于对象或引用数据在进行浅拷贝时，只是将对象的引用复制了一份，也就是内存地址，即两个不同的变量指向了同一个内存地址，那么在改变任意一个变量的值都是改变内存地址所存储的值，因此两个变量的值都会改变。
js 中的基本数据类型：String，Number，Boolean，Null，Undefined，在赋值的过程中都是值拷贝。
例如，let a = 10; b = a ，修改其中一个变量的值，不会影响到另一个变量的值。
js 中的对象数据类型：Object，Array，Function，Map，Set，在赋值过程中都是引用拷贝。
let obj = {
name:'静如秋叶',
age: 3,
height:100
}
let obj2 = obj
obj2.name = '小花';
console.log(obj) // {name:'小花',age: 3,height:100}
console.log(obj2) // {name:'小花',age: 3,height:100}
当修改obj2的name属性时，也会修改obj的name，因为他们指向同一块内存地址。
3. 将浅拷贝转换为深拷贝在实际的项目开发中，我们在多数情况下不希望将对象进行浅拷贝，因为值会相互影响，容易出错。
3.1 Array的深拷贝 1. 通过slice方法slice() *** 作数组时，不会对原数组有影响，会产出一个新的数组。
let arr1 = [1,42,5,6]
let arr2 = arr1.slice()
arr2[0] = 100
console.log(arr1) // [1,42,5,6]
console.log(arr2) // [100,42,5,6]
数组arr2的改变未引起arr1的变化。
2. 通过concat方法数组的concat() 方法，能够连接两个数组，同样不会改变原来的数组。
用一个空数组[ ] 连接另一个数组，即可实现深拷贝。
let arr3 = ['cat','dog','pig']
let arr4 = [].concat(arr3)
arr3[2] = 'big pig'
console.log(arr3) // ['cat','dog','big pig']
console.log(arr4) // ['cat','dog','pig']
ES6中的 … ，我们经常在数组的深拷贝中用到。
let arr5 = [0,0,1]
let arr6 = [...arr5]
arr5[0] = 10000
console.log(arr5) // [10000,0,1]
console.log(arr6) // [0,0,1]
Array.from() 方法能从一个类似数组或可迭代对象中返回一个新的数组实例。通过Array.from() 方法能获取到一个数组的深拷贝。
let arr7 = [1,2,3]
let arr8 = Array.from(arr7)
arr7[1] = 1000
console.log(arr7) // [1,1000,3]
console.log(arr8) // [1,2,3]
ES6的Object.assign(target,…sources) 用于对象的合并，将源对象的所有可枚举属性，复制到目标对象中，并返回合并后的目标对象。后来的源对象的属性值，将会覆盖它之前的对象的属性。
let person = {
name: 'xia',
age: 25,
height: 160
}
let otherPerson = Object.assign({},person)
person.age = 30
console.log(person) // {name: "xia", age: 30, height: 160}
console.log(otherPerson) // {name: "xia", age: 25, height: 160}
前面讲了Array和Object的深拷贝方法，但是对于有更深层次的结构关系（数组套数组，数组套对象，对象套对象等），上面的方法就失灵了，可以看下面的例子。
let personArr = [{name: 'xia'}, {name: 'zhang'}]
let otherPersonArr2 = [...personArr]
personArr[0].name = 'xia xia'
console.log(personArr)
console.log(otherPersonArr2)
万能转换器JSON.parse(JSON.stringify(obj)) 深拷贝已对象，它可以深拷贝多层级的，不同担心嵌套问题。
JSON.stringify(obj) 将js中的对象转化为json字符串
let jack = {
name: 'jack'
}
console.log(jack)
console.log(JSON.stringify(jack))
它们在格式上有区别。下图中的第一个是对象，name没有双引号括起来。第二个是json字符串，其中，name用双引号括起来了。
JSON.parse() 将json字符串解析成对象
let obj = {
name: '静茹秋叶'
}
console.log('obj: ', obj)
console.log('json string: ', JSON.stringify(obj))
let str = JSON.stringify(obj)
console.log('--------------')
console.log(str)
console.log('str to obj: ', JSON.parse(str))
两个button-counter 共用同一个jack对象，用同一块地址，当其中一个实例改变时，会影响另一个实例的值。（浅拷贝）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的data选项title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
div>
<script>
let jack = {
counter: 0
}
// 子组件
Vue.component('button-counter', {
data() {
// 函数类型
return jack
},
template: ``
})
let vm = new Vue({
el: '#app' // mount到DOM上
})
script>
body>
html>
采用深拷贝，重新创建一块内存。这样，vue的button-counter组件中的counter值互不影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的data选项</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
let jack = {
counter: 0
}
// 子组件
Vue.component('button-counter', {
data() {
// 函数类型
return JSON.parse(JSON.stringify(jack))
},
template: ``
})
let vm = new Vue({
el: '#app' // mount到DOM上
})
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）