JS 数据拷贝

浅拷贝

拷贝引用:如果对象的属性也是一个引用类型,拷贝的时候不重新创建一个新的对象来实现该属性的拷贝,那么就是浅拷贝
对象的直接赋值就是浅拷贝

1.引用数据类型的赋值

eg:引用数据类型拷贝

var arr1 = [1,2,3]
var arr2 = arr1				//浅拷贝

var obj1 = {name:'张三'}
var obj2 = obg1				//浅拷贝

2.ES6拓展运算

…拓展运算符,遍历当前对象能访问以及能遍历的所有属性,并将当前的属性放入一个新的集合中。
如果当前属性的属性值为基本数据类型,该拷贝为深拷贝,
如果为引用数据类型,拷贝的这是处于栈内存中保存的地址,即为浅拷贝
var obj2 = {…obj1}

3.Object.assign(空对象或者想被覆盖的对象,要复制的对象)

assign将的所有可枚举的自身属性(静态属性)从一个或多个源对象复制到目标对象,返回修改后的对象
var obj2 = Object.assign(obj2,obj1)

深拷贝

拷贝数据:将两个对象完全从内存中隔离开,就是深拷贝。即每一个引用属性,以及引用属性的引用属性,全部拷贝出来.
遍历对象的每一项数据,实现复制就是深拷贝

1.基本数据类型拷贝

eg:基本数据类型拷贝

var num1 = 1
var num2 = num1		//深拷贝

2.使用JSON,但不能拷贝函数、属性值为undefined的属性

var obj1 = {
	name:'张三',
	age:18,
	say:function(){
		console.log(this.name)
	}
}

var obj2 = JSON.parse(JSON.stringify(obj1))
return 0bj
console.log(obj2.say())											//j2.say is not a function
 

var arr1 = [1,2,3]
var arr2 = JSON.parse(JSON.stringify(arr1))

3.for in遍历拷贝,不能拷贝对象

        var obj1 = {
            name: '张三',
            age: 18,
            f1: {
                f2: {
                    f8: 'f8',
                    f9: 'f9',
                },
                f3: {
                    f13: 'f13',
                    f14: 'f14'
                }
            },
            say: function () {
                console.log(this.name)
            }
        }

        var obj2 = {}
        for (const key in obj1) {
            obj2[key] = obj1[key]
        }
        console.log(obj1, obj2)			//{name: '张三', age: 18, f1: {…}, say: ƒ} {name: '张三', age: 18, f1: {…}, say: ƒ}
        
        obj1.say = function () {
            console.log('obj1..........')
        }
        obj2.say()								//张三
        obj1.f1.f2.f8 = 'f88888888'
        console.log(obj2.f1.f2.f8)			//f88888888

4.递归实现深拷贝,完美实现对象深拷贝

        var obj1 = {
            name: "张三",
            age: 18,
            f1: {
                f2: {
                    f8: "f8",
                    f9: "f9",
                },
                f3: {
                    f13: "f13",
                    f14: "f14",
                },
            },
            say: function () {
                console.log(this.name);
            },
        };

        function deepClone(obj) {
            //var objClone = {}
            //判断要深拷贝的对象是否为数组,是则给objClone赋空数组
            var objClone = Array.isArray(obj) ? [] : {};
            for (const key in obj) {
                //判断key是否为自身属性,是:拷贝
                if (obj.hasOwnProperty(key)) {
                    if (typeof obj[key] === "object") {
                        //如果是对象就递归
                        objClone[key] = deepClone(obj[key]);
                    } else {
                        objClone[key] = obj[key];
                    }
                }
            }
            return objClone;
        }
        let obj2 = deepClone(obj1);
        console.log(obj2);					//{name: '张三', age: 18, f1: {f2: {f8: 'f8', f9: 'f9'}, f3: {f13: 'f13', f14: 'f14'}}, say: ƒ}
		
		obj1.f1.f2.f8="f88888"
		console.log(obj2.f1.f2.f8);		//f8

5.lodash 第三方插件 https://www.lodashjs.com/

let arr=[
            { pid: 101, pname: '华为nova10 128g', address: '深圳', price: 2688, num: 50001 },
            { pid: 102, pname: '华为nova10 256g', address: '深圳', price: 2999, num: 30001 },
            { pid: 103, pname: '华为nova10 pro 128g', address: '深圳', price: 3600, num: 40001 },
            { pid: 104, pname: '华为nova10 pro 256g', address: '广州', price: 3968, num: 20001 },
            { pid: 105, pname: '华为p50 Pocket 8+512g', address: '武汉', price: 9988, num: 10001 },
            { pid: 106, pname: '华为p50 Pocket 8+256g', address: '深圳', price: 8800, num: 35001 },
            { pid: 107, pname: '华为畅享50 6+128g', address: '武汉', price: 1249, num: 92501 },
            { pid: 108, pname: '华为畅享50 8+128g', address: '广州', price: 1499, num: 50001 },
            { pid: 109, pname: '华为畅享50 8+256g', address: '深圳', price: 1699, num: 88000 },
            { pid: 110, pname: '华为Mate 40 RS保时捷设计 5+512g', address: '深圳', price: 12000, num: 5000 }
        ]

		
var obj1 = {
	name:'张三',
	age:18,
	say:function(){
		console.log(this.name)
	}
}

var obj2 = _.cloneDeep(obj1)
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值