【总结】深拷贝与浅拷贝

最新推荐文章于 2023-10-23 15:25:15 发布

原创最新推荐文章于 2023-10-23 15:25:15 发布 · 243 阅读

CC 4.0 BY-SA版权

本文详细介绍了JavaScript中的数据类型，包括基本数据类型和对象数据类型，并深入讲解了深拷贝和浅拷贝的概念。通过示例展示了JSON方法、Object.assign以及各种数组方法如slice、concat、Array.from和展开运算符在浅拷贝中的应用。同时，文章还探讨了这些拷贝方法在处理对象数据类型时如何影响原始数据。

在这里插入图片描述

数据类型

基本数据类型

数据直接存储在栈(stack)里面

String
Number
Boolean
Null
Undefined
Symbol

对象数据类型

变量保存在栈里面数据保存在堆里面

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

基本数据类型

		// 为video分配一个内存地址 并且值存储为 100
		let video1 = 100
		let video2 = 'Hello'
		let video3 = false

		// 把video的内容拷贝给了videoCopy 指向同一个内存地址
		let videoCopy1 = video1
        let videoCopy2 = video2
        let videoCopy3 = video3
        

        // 为videoCopy重新赋值 会开辟出一个新的内存地址 并且存储为 1000
		videoCopy1 = 1000
		videoCopy2 = 'Hello World'
		videoCopy3 = true

		console.log('video:1'+video1) // 100
        console.log('videoCopy1:'+videoCopy1)  // 1000

        console.log('video2:'+video2) // Hello
        console.log('videoCopy2:'+videoCopy2)  // Hello World

        console.log('video3:'+video3) // false
        console.log('videoCopy3:'+videoCopy3)  // true
	 	.......
	 	// 省略了一些其他的类型

深拷贝

数据互不影响

JSON方法

可以实现数组或对象深拷贝，但不能处理函数。
JSON数据格式
- { ' 键 ' : ' 值 '}
- 键值都需要引号
JSON.stringify
- 将 JavaScript 对象转换为字符串 (JSON数据)
- { 键 : ' 值 '} ===> { ' 键 ' : ' 值 '}
JSON.parse
- 将JSON数据转换为 JavaScript 对象
- { ' 键 ' : ' 值 '} ===> { 键 : ' 值 '}
对象

        var list = {
        	name:'zwj',
        	age:22
        }
      
        var listCopy = JSON.parse(JSON.stringify(list))

        console.log('list:'+list.name)  // list : zwj
        console.log('list:'+list.age)   // list : 22

        console.log('listCopy:'+listCopy.name)  // listCopy : zwj
        console.log('listCopy:'+listCopy.age)   // listCopy : 22   

        // 修改拷贝之后的数据
        listCopy.name="修改name"
        listCopy.age="修改age"

        // 打印原始数据
        console.log('list:'+list.name)  // list : zwj
        console.log('list:'+list.age)   // list : 22
        // 打印修改之后的拷贝的数据
        console.log('listCopy:'+listCopy.name)  // listCopy:修改name
        console.log('listCopy:'+listCopy.age)   // listCopy:修改age

数组

	var list = [1,2,3,4,5]
    var listCopy = JSON.parse(JSON.stringify(list))

    console.log('list:'+list)            // list:1,2,3,4,5
    console.log('listCopy:'+listCopy)    // listCopy:1,2,3,4,5

    // 修改拷贝之后的数据
    listCopy[0] = 100
    console.log('list:'+list)            // list:1,2,3,4,5
    console.log('listCopy:'+listCopy)    // listCopy:100,2,3,4,5

Object.assign

需要结合JSON方法实现深拷贝
将所有可枚举属性的值从一个或多个源对象复制到目标对象
如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖
Object.assign ( target , …sources )
- target：目标对象
- souce：源对象（可多个）

		var person = {
            name:"zwj",
            age:22,
            hobbies:{
                one:'sleep',
                two:'movie',
                three:'food'
            }
        }
 		var copyPerson = Object.assign({},person)
        var copyPeople = JSON.parse(JSON.stringify(copyPerson))
        
        console.log('修改拷贝数据之前')
        console.log(person.hobbies)
        console.log(copyPeople.hobbies)

        console.log('====================================')
		// 修改拷贝之后的数据
		copyPeople.hobbies.three="money"
        copyPeople.hobbies.three = 'Money'
        console.log('修改拷贝数据之后')
        console.log(person.hobbies)            
        console.log(copyPeople.hobbies)

浅拷贝

只复制某个对象的指针并不复制对象本身二者共用内存拷贝之后的对象修改数据会影响原始对象下的数据

slice方法
不带参数代表全部复制
将数组的一部分的浅拷贝返回到一个新的数组对象中
不会修改原始数组

        var list = ['one','two']
        var listCopy = list.slice()
        console.log('listCopy:'+listCopy)   // listCopy:one,two

        listCopy = ['three','four']

        console.log('list:'+list)           // list:one,two
        console.log('listCopy:'+listCopy)   // listCopy:three,four

concat方法
用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

 		var list = ['one','two']
        var listCopy = [].concat(list)
        console.log('listCopy:'+listCopy)   // listCopy:one,two

        listCopy = ['three','four']

        console.log('list:'+list)           // list:one,two
        console.log('listCopy:'+listCopy)   // listCopy:three,four

Araay.from( )
从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

	var list = ['one','two']
    var listCopy = Array.from(list)
    
    listCopy.push = ['three','four']

    // 打印原始数据和拷贝数据
    console.log('list:'+list)           // list:one,two
    console.log('listCopy:'+listCopy)   // listCopy:one,two

    // 修改拷贝之后的数据
    listCopy[1] = 'five'

    // 打印修改拷贝数据之后的数据
    console.log('list:'+list)           // list:one,two
    console.log('listCopy:'+listCopy)   // listCopy:one,five

展开运算符

		var list = ['one','two']
        var listCopy = [...list]
        // 打印原始数据和拷贝数据
        console.log('list:'+list)           // list:one,two
        console.log('listCopy:'+listCopy)   // listCopy:one,two

        // 修改拷贝之后的数据
        listCopy[1] = 'five'

        // 打印修改拷贝数据之后的数据
        console.log('list:'+list)           // list:one,two
        console.log('listCopy:'+listCopy)   // listCopy:one,five

Object.assign

将所有可枚举属性的值从一个或多个源对象复制到目标对象
如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖
Object.assign ( target , …sources )
- target：目标对象
- souce：源对象（可多个）

		var person = {
        name:"zwj",
        age:22,
        hobbies:{
            one:'sleep',
            two:'movie',
            three:'food'
        }
    } 

    var copyPerson = Object.assign({},person)
    console.log('修改拷贝数据之前')
    console.log(person.hobbies)
    console.log(copyPerson.hobbies)
    console.log('===================================')
    // 修改拷贝之后的数据
    copyPerson.hobbies.three = 'Money'
    console.log('修改拷贝数据之后')
    console.log(person.hobbies)            
    console.log(copyPerson.hobbies)

在这里插入图片描述

补充有关slice和concat的知识点

		var list = ['one','two',{name:'zwj',age:10}]
        var listCopy = list.slice()
        // var listCopy = [].concat(list)

        // 修改拷贝之后的基本数据类型 不会影响原数组中的数据       
        listCopy[0] = '修改one'

        // 修改拷贝之后的对象数据类型 会影响原数组中的数据        
        listCopy[2].age = 22

        console.log('list:'+list) // list:one,two    
        console.log('listCopy:'+listCopy) // listCopy:three,four


        console.log(list[0])        // one
        console.log(listCopy[0])    // 修改one

        console.log(list[2])        // {name: "zwj", age: 22}
        console.log(listCopy[2])    // {name: "zwj", age: 22}