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. 搞定 复制可直接用!
相关推荐
恋猫de小郭2 小时前
Flutter 正在计划提供 Packaged AI Assets 的支持,让你的包/插件可以更好被 AI 理解和选择
android·前端·flutter
小小前端--可笑可笑2 小时前
Vue / React 单页应用刷新 /login 无法访问问题分析
运维·前端·javascript·vue.js·nginx·react.js
小林敲代码77882 小时前
记一次 Vue 项目首屏优化:从 7.1s 到 0.9s,深挖 Gzip 的力量
前端·javascript·vue.js
前端大卫2 小时前
写给年轻程序员的几点小建议
前端
Highcharts.js3 小时前
什么是向量图表?如何用 Highcharts 快速创建一个笛卡尔坐标图/矢量图?
javascript·开发文档·highcharts·图表开发·向量图·矢量图表·笛卡尔坐标图
NEXT063 小时前
React 闭包陷阱深度解析:从词法作用域到快照渲染
前端·react.js·面试
脱离语言3 小时前
Jeecg3.8.2 前端经验汇总
开发语言·前端·javascript
NEXT064 小时前
useMemo 与 useCallback 的原理与最佳实践
前端·javascript·react.js
小爱丨同学4 小时前
React-Context用法汇总 +注意点
前端·javascript·react.js
徐同保5 小时前
python如何手动抛出异常
java·前端·python