对象拷贝，深拷贝、浅拷贝、JSON拷贝

前端-JC

已于 2022-10-11 09:45:01 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： json javascript java

于 2022-08-12 15:37:40 首次发布

本文链接：https://blog.csdn.net/qq_57334853/article/details/126303707

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

深拷贝，浅拷贝？

一、JavaScript的内存结构

二、Vue.js的对象列表

三、浅拷贝

四、递归

五、深度拷贝（包括JSON拷贝）

什么是对象拷贝, 为什么要对象拷贝？想知道深，浅拷贝那必须要了解JS的内存结构

一、JavaScript的内存结构

js内存结构，分为js原始类型和引用类型。扩展：什么是堆什么是栈？

原始数据类型：Undefined、String、Symbol、Object、Null、Number、Boolean、Bigint

引用数据类型：对象、数组、日期、正则和函数

示例：

//原始数据类型,放在栈里
let a = 10;
let b = 20;
a = 20;
console.log(a); //20 
console.log(b); //20
//引用数据类型,放在堆里
let a = { name: "小明" };
let b = a;
a.name = "小美";
console.log(a.name); //输出小美
console.log(b.name); //输出小美

二、Vue.js的对象列表

实现表单，想列表里添加数据，在这里添加姓名时，添加了6个，但是在表单里重新输入姓名时，6个名字都改变了？怎么解决请往下看

Vue.js通用模板

<body>
  <div id="app">
    <form @submit.prevent="insert">
      <input type="text" v-model="student.name">
      <input type="text" v-model="student.age">
      <input type="text" v-model="student.girlfriend.name">
      <button>添加</button>
    </form>
    <ul>
      <li v-for="item in list" :key="item.id">
        姓名:{{ item.name }}
        性别:{{ item.age }}
        女朋友:{{ item.girlfriend.name }}
      </li>
    </ul>
  </div>
</body>

 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        student: {
          name: "",
          age: "",
        },
        list: []
      }
    },
    methods: {
      insert() {
        this.list.push(this.student)
      },
    }

  })

</script>

三、浅拷贝

基础模板

let obj = {
  name: "小明",
  age: 4
}

function copy(obj) {
  let newObj = {}
  for (let i in obj) {
    // console.log(obj[i]);
    newObj[i] = obj[i]
  }
  return newObj
}
let newObject = copy(obj)
obj.name = "JC"
console.log(obj);
console.log(newObject);

复杂模板

const student1 = {
  name: "JC",
  age: 2,
  girlfriend: {
    name: "小美"
  }
}
// 浅拷贝
function copy(obj) {
  let newObj = {};
  for (let i in obj) {
    newObj[i] = obj[i]

  }
  return newObj
}
const student2 = copy(student1)
student1.name = "小黑"//直接修改
student1.girlfriend.name = "白鹿"//直接修改

console.log(student1);
console.log(student2);

Vue.js浅拷贝

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        student: {
          name: "",
          age: "",
          girlfriend: {
            name: ""
          }
        },
        list: []
      }
    },
    methods: {
      insert() {
        this.list.push(
          this.copy(this.student)
        )
      },
      copy(obj) {
        let newObj = {};
        for (let i in obj) {
          newObj[i] = obj[i] //递归
        }
        return newObj
      }
    }

  })
</script>

四、递归

递归：自己调用自己,想明白深拷贝，必须理解递归概念

基础模板

function fun() {
  fun()
}
fun()

计算累加(典型递归)

function fun(n) {
  if (n === 1) {
    return 1
  } else {
    return n + fun(n - 1)
  }
}
let result = fun(3)
console.log(result);//传3输出6
/*
  fun(1) : 1
  fun(2) : 2 + fun(1) = 3
  fun(3) : 3 + fun(2) = 6
*/

五、深拷贝

复杂模板

const student1 = {
  name: "JC",
  age: 2,
  girlfriend: {
    name: "小美"
  }
}
// 深拷贝
function copy(obj) {
  let newObj = {};
  for (let i in obj) {
    if (obj[i] instanceof Object) {
      newObj[i] = copy(obj[i]) //递归
    } else {
      newObj[i] = obj[i]
    }
  }
  return newObj
}
const student2 = copy(student1)
student1.name = "小黑"//直接修改
student1.girlfriend.name = "白鹿"//直接修改

console.log(student1);
console.log(student2);

json数据格式全称：JavaScript对象表示法（清爽的实现拷贝）强烈推荐

JSON.stringify 将对象转成字符串，JSON.parse字符串转对象

const student1 = {
  name: "JC",
  age: 2,
  girlfriend: {
    name: "小美"
  }
}
function copy(obj) {
let str = JSON.stringify(student1)
let obj1 = JSON.parse(str)
return obj1
}
const student2 = copy(student1)
student1.name = "小黑"//直接修改
student1.girlfriend.name = "白鹿"//直接修改

console.log(student1);
console.log(student2);

Vue.js使用JSON实现深拷贝

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        student: {
          name: "",
          age: "",
          girlfriend: {
            name: ""
          }
        },
        list: []
      }
    },
    methods: {
      insert() {
        this.list.push(
          this.copy(this.student)
        )
      },
      copy(obj) {

        //深度克隆/拷贝 强烈推荐
        //JSON.stringify 将对象转成字符串，JSON.parse
        let str = JSON.stringify(obj)
        let obj1 = JSON.parse(str)
        return obj1

      }
    }

  })

</script>

总结

深拷贝：拷贝的是内容，相当于开辟了一个新的内容空间，将原数组美容重新复制，无论怎么修改都不会改变原内容，比如基础数据类型都是深拷贝

浅拷贝：拷贝的只是地址，内容被修改，改的是地址，原数组也会跟着改变,比如Object Array Function 都是浅拷贝

前端-JC

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
对象拷贝，深拷贝、浅拷贝、JSON拷贝

总结：深拷贝：拷贝的是内容，相当于开辟了一个新的内容空间，将原数组美容重新复制，无论怎么修改都不会改变原内容，比如基础数据类型都是深拷贝浅拷贝：拷贝的只是地址，内容被修改，改的是地址，原数组也会跟着改变,比如Object Array Function 都是浅拷贝.........
复制链接

扫一扫