js深拷贝与浅拷贝

本是古典何须时尚 2022-02-04 13:19 274阅读 0赞

**基础扩展**  
js的数据类型可分为两种：基本类型 引用类型  
\- 基本类型 ： Undefined Null Boolean Number String  
\- 引用类型 ： Object Array Function date regexp err

基本类型的数据是以键值对的形式存在栈中的  给新参数赋值时是直接复制过去了，不存在深拷贝和浅拷贝的问题
    
    引用类型的数据的值是保存在堆中的，对象的引用被保存在栈内存中，而且我们不可以直接访问堆内存，只能访问栈内存。所以我们操作引用类型时实际操作的是对象的引用
    let obj = { name:zly }
    let a = obj ; =>指向的堆是obj的堆
    let b = obj ; =>指向的堆是obj的堆

比如我们想要对 a 和 b进行不同的操作，那么因为他们引用的堆是同一个，改变 a的值b的值也会相应的改变，这样问题就来了，这样达不到我们预想的要求！

***浅拷贝***：（在堆里面引用值赋给新值） 就是 =（等于号）赋值的方法喽  
***深拷贝***：（要新建一个新的堆）【对象，数组】  
以下都是当前级别的深拷贝！！！！！

- 数组
    	| -1. for循环赋值
    	
    
    
    	
    
    		let arrData = [1, 2, 3]
    		let arrCopy = []
    		for (let i = 0; i < arrData.length; i++) {
    			arrCopy[i] = arrData[i]
    		}
    		console.log(arrCopy) // =>[1, 2, 3]
    		arrCopy[1] = "copy"
    		console.log(arrCopy) // =>[1, 'copy', 3]
    		console.log(arrData)  // =>[1, 2, 3]

| -2.concat方法

let arrData = [1, 2, 3]
    		let arrCopy = []
    		arrCopy = arrCopy.concat(arrData)
    		console.log(arrCopy) //=>[1, 2, 3]
    		arrCopy[1] = "copy"
    		console.log(arrCopy) //=>[1, "copy", 3]
    		console.log(arrData) //=>[1, 2, 3]

| -3.slice方法

let arrData = [1, 2, 3]
    		let arrCopy = []
            arrCopy = arrData.slice(0, 3) 
            //顺便写一下 slice(start,length) 不会改变原数组 splice(start,end) //返回截取的数组，会改变原数组
    		console.log(arrCopy) //=>[1, 2, 3]
    		arrCopy[1] = "copy"
    		console.log(arrCopy) //=>[1, "copy", 3]
    		console.log(arrData) //=>[1, 2, 3]

| -4.ES6扩展运算符实现数组 方法

let arrData = [1, 2, 3]
    		let [...arrCopy] = arrData
    		console.log(arrCopy) //=>[1, 2, 3]
    		arrCopy[1] = "copy"
    		console.log(arrCopy) //=>[1, "copy", 3]
    		console.log(arrData) //=>[1, 2, 3]

– 对象  
| -1. JSON.parse(JSON.stringify( )) 方法  
排除 ： undefined、function、symbol

let obj = {name:'zly'}
    		let copyObj = JSON.parse(JSON.stringify(obj))
    		console.log(copyObj) // => {name:'zly'}
    		copyObj.name = 'hzz'
    		console.log(copyObj)// => {name:'hzz'}
    		console.log(obj) // => {name:'zly'}

| -2. for循环赋值

let obj = {name:'zly'}
    		let copyObj = {}
    		 for (var key in obj) {
    			 copyObj[key] = obj[key]
    		 }
    		console.log(copyObj) // => {name:'zly'}
    		copyObj.name = 'hzz'
    		console.log(copyObj)// => {name:'hzz'}
    		console.log(obj) // => {name:'zly'}

| -3. Object.assgin()

let obj = {name:'zly'}
    		let copyObj = {}
    		copyObj = Object.assign(copyObj,obj)
    		console.log(copyObj) // => {name:'zly'}
    		copyObj.name = 'hzz'
    		console.log(copyObj)// => {name:'hzz'}
    		console.log(obj) // => {name:'zly'}