JavaScript模拟实现深拷贝

最新推荐文章于 2024-07-26 11:41:15 发布

ayzq

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量504

点赞数

文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/qq_42529941/article/details/121575194

版权

1.通过递归

<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.girlfrend.name">
      <button>添加</button>
    </form>

    <ul>
      <li v-for="item in list">
        姓名:{{item.name}}--
        年龄:{{item.age}}--
        女朋友:{{item.girlfrend.name}}
      </li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        student: {
          name: '',
          age: '',
          girlfrend: {
            name: ''
          }
        },
        list: []
      },
      methods: {
        insert() {
          let object = this.copy(this.student)
          this.list.push(object)
        },
        copy(obj) {
          let newObj = {};
          for (let i in obj) {
            if (obj[i] instanceof Object) {
              newObj[i] = this.copy(obj[i])
            } else {
              newObj[i] = obj[i]
            }
          }
          return newObj
        }
      }
    })
  </script>
</body>

2.通过JSON

  <script>
    const student1 = {
      name: '小明',
      age: 2,
      friend: {
        name: '小张',
        age: 3,
        relative:{
          father:'老张',
          age:33
        }
      }
    }

    function copy(obj){
      let str = JSON.stringify(obj);
      let newOj = JSON.parse(str)
      return newOj
    }

    const student2 = copy(student1);
    console.log(student2);
  </script>

在这里插入图片描述

ayzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript模拟实现深拷贝

<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.girlfrend.name">
复制链接

扫一扫