JS对象和数组的深浅拷贝(最全)


// 对象拷贝
let objA = {
	a:1,
	b:function () {
		console.log(this.a)
	},
	c:{
		c1:undefined,
		c2:Symbol('c2')
	},
	d:null
}
// console.log(objA)
let objB = Object.assign({},objA)			//浅拷贝
console.log(objB.c === objA.c) // true

let argObj = {}
for(let item in objA){
	argObj[item] = Object.getOwnPropertyDescriptor(objA, item)
}
let objC = Object.create((objA.prototype || null),argObj)		// 浅拷贝 -- value指向
console.log(objC.c === objA.c) // true


let objD = JSON.parse(JSON.stringify(objA))						// 深拷贝 -- 不能拷贝symbol,undefined,function
console.log(objD.c === objA.c) // false

// 数组拷贝
let arrA = [objA,objB,objC]
// console.log(arrA)
let arrB = arrA.slice(0)										// 浅拷贝
console.log(arrB[0] === arrA[0]) // true

let arrC = arrA.concat()										// 浅拷贝
console.log(arrC[0] === arrA[0]) // true

let arrD = [...arrA]											// 浅拷贝
console.log(arrD[0] === arrA[0]) // true

let arrE = JSON.parse(JSON.stringify(arrA))						// 深拷贝(不能拷贝symbol,undefined,function)
console.log(arrE[0] === arrA[0]) // false

// 克隆函数
function deepClone(target) {										// 对象和数组的深拷贝函数
    if (typeof target !== 'object' || target == null) return target
    var newData = target instanceof Array ? [] : {}
    for (var key in target) {
        newData[key] = typeof target[key] === 'object' ? (target[key] === null ? null : deepClone(target[key])) : target[key]
    }
    return newData
}

let arrF = deepClone(arrA)
console.log(arrF[0].c === arrA[0].c)	// false
console.log(arrF[0].b === arrA[0].b)	// true
arrF[0].a = 15
arrA[0].a = 10
arrF[0].b()	// 15
arrA[0].b()	// 10
arrA[0].b = function (){
	console.log(13)
}
arrF[0].b()	// 15
arrA[0].b()	// 13
arrF[1].b()	// 1
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于JavaScript中数组浅拷贝的问题,我可以为你做一个简要的介绍并举个例子。 首先来看浅拷贝,它会创建一个新的数组,这个新数组中的元素是对原始数组中对应元素的引用。这意味着如果修改原始数组中的元素,新数组中对应的元素也会受到影响。下面是一个浅拷贝的例子: ```javascript var originalArray = [1, 2, 3, 4]; var newArray = originalArray.slice(); originalArray[2] = 'changed'; console.log(originalArray); // [1, 2, "changed", 4] console.log(newArray); // [1, 2, 3, 4] ``` 上面代码中使用了 `slice()` 方法进行了拷贝操作。我们修改了原始数组中的第三个元素,发现新的数组并没有发生变化。 接下来再看深拷贝,它会创建一个新的数组,并且完全复制原始数组中的所有元素,这意味着即使修改原始数组中的元素,新数组中对应的元素也不会受到影响。由于JavaScript中没有原生的深拷贝方法,我们通常需要使用递归函数或第三方库来实现。下面是一个使用 JSON 序列化和反序列化实现深拷贝的例子: ```javascript var originalArray = [1, 2, [3, 4]]; var newArray = JSON.parse(JSON.stringify(originalArray)); originalArray[2][0] = 'changed'; console.log(originalArray); // [1, 2, ["changed", 4]] console.log(newArray); // [1, 2, [3, 4]] ``` 注意,使用 `JSON.stringify()` 和 `JSON.parse()` 实现深拷贝的时候,要确保原始数组仅包含可以被 JSON 序列化的数据类型,例如数字、字符串、布尔值、null 以及包含这些类型的数组对象。如果原始数组中包含了函数、undefined、Symbol 等类型,这种方法就会出现问题了。 希望这个简单的例子能够帮助你理解 JavaScript 中数组浅拷贝的概念。如果你还有其他问题,请随时向我提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值