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. 搞定 复制可直接用!
相关推荐
小桥风满袖25 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang36 分钟前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户730870117930837 分钟前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学38 分钟前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼38 分钟前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu41 分钟前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz1 小时前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构