【学习笔记66】JavaScript的深浅拷贝
创始人
2024-03-02 02:48:48

一、赋值

  •  只要是引用数据类型, 那么在赋值的时候, 就是引用地址的传递
        // 赋值:字符串const s1 = '123';let s2 = s1;     // 赋值console.log(s2 === s1);  // trues2 = '456';console.log(s1); // 123console.log(s2); // 456

        let o1 = { a: 1 };let o2 = o1;          // 赋值console.log(o2 == o1);o2.a = 999;console.log(o1);console.log(o2);

        let a1 = [1, 2, 3];let a2 = a1;       // 赋值console.log(a2 == a1);a2[0] = 999;console.log(a1);console.log(a2);

二、浅拷贝

  •  遍历对象拿到对象的每一个keyvalue,然后赋值给另外一个对象
  •  如果所有的value都是基本数据类型, 那么浅拷贝完成之后, 修改新对象不会影响到老对象
  • 如果 value 有引用数据类型(出现了多层数据结构), 那么浅拷贝只能拷走第一层数据结构, 多层的没有办法处理
  • 注意:深浅拷贝一定是引用数据类型对象, 数组, 函数(基本只有对象和数组)

1、浅拷贝的实现

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}for (let key in o1) {// 遍历o1对象所有的key, 然后赋值给对象o2// console.log(key, o1[key]);o2[key] = o1[key];}console.log(o1); // {a: 1, b: 2, c: 3}console.log(o2); // {a: 1, b: 2, c: 3}console.log(o1 === o2); // false

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}for (let key in o1) {// 遍历o1对象所有的key, 然后赋值给对象o2// console.log(key, o1[key]);o2[key] = o1[key];}o2.b = 999;console.log(o1 === o2); // falseconsole.log(o1); // {a: 1, b: 2, c: 3}console.log(o2); // {a: 1, b: 999, c: 3}

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}for (let key in o1) {// 遍历o1对象所有的key, 然后赋值给对象o2// console.log(key, o1[key]);o2[key] = o1[key];}o2.d.d1 = 'QF666'console.log(o1 === o2); console.log(o1); console.log(o2); 

 2、JS提供的浅拷贝

  • Object.assign(新对象, 原始对象)
  • 将原始对象中所有的key,全部浅拷贝到新对象中, 然后返回一个对象
        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = Object.assign({}, o1);console.log(o1);console.log(o2);

三、深拷贝

  • 不管数据有多少层数据结构, 百分百复制出来一份,一摸一样但是毫不相关的数据
        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}function deepClone(target, origin) {// 将origin完全百分百的复制出来一份, 到target中for (let k in origin) {// console.log(k, origin[k])if (origin[k].constructor === Object) {target[k] = {}deepClone(target[k], origin[k])} else if (origin[k].constructor === Array) {target[k] = []deepClone(target[k], origin[k])} else {target[k] = origin[k]}}}deepClone(o2, o1);console.log(o1  === o2);console.log(o1);console.log(o2);

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}function deepClone(target, origin) {// 将origin完全百分百的复制出来一份, 到target中for (let k in origin) {// console.log(k, origin[k])if (origin[k].constructor === Object) {target[k] = {}deepClone(target[k], origin[k])} else if (origin[k].constructor === Array) {target[k] = []deepClone(target[k], origin[k])} else {target[k] = origin[k]}}}deepClone(o2, o1);o2.d.d2 = 'QF666';console.log(o2);console.log(o1);

2、JS中提供的方法

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = JSON.parse(JSON.stringify(o1));o2.d.d3 = '9999999';console.log(o1);console.log(o2);

相关内容

热门资讯

北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...