vue 封装对象深拷贝方法

vue 封装对象深拷贝方法

  1. 在 src/ utils文件夹下面新建index.js
javascript 复制代码
// index.js

// 深拷贝对象
export function deepClone(obj) {
    const _toString = Object.prototype.toString
  
    // null, undefined, non-object, function
    if (!obj || typeof obj !== 'object') {
      return obj
    }
  
    // DOM Node
    if (obj.nodeType && 'cloneNode' in obj) {
      return obj.cloneNode(true)
    }
  
    // Date
    if (_toString.call(obj) === '[object Date]') {
      return new Date(obj.getTime())
    }
  
    // RegExp
    if (_toString.call(obj) === '[object RegExp]') {
      const flags = []
      if (obj.global) { flags.push('g') }
      if (obj.multiline) { flags.push('m') }
      if (obj.ignoreCase) { flags.push('i') }
  
      return new RegExp(obj.source, flags.join(''))
    }
  
    const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
  
    for (const key in obj) {
      result[key] = deepClone(obj[key])
    }
  
    return result
  }
  1. 使用
javascript 复制代码
// 简单使用

<script>
import { deepClone } from '@/utils/index'
export default {
  name: "HomeView",
  data() {
    return {
      obj: {
        a: 1,
        b: 2,
        c: 3,
      },
    };
  },
  mounted(){
    let newObj = deepClone(this.obj)   // 方法使用
    // 方法验证
    console.log(newObj)  // {a: 1, b: 2, c: 3}
    newObj.c = 4
    console.log(newObj) // {a: 1, b: 2, c: 4}
    console.log(this.obj)  // {a: 1, b: 2, c: 3}
  }
};
</script>
  1. 搞定 复制可直接用!
相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
前端君3 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite