当前位置:首页 > vue.js > 正文内容

最全的数据深度拷贝方法-vue版

自由小鸟4周前 (07-13)vue.js57
judgeType(obj) {
  // tostring会返回对应不同的标签的构造函数
    const toString = Object.prototype.toString;
    const map = {
      '[object Boolean]': 'boolean',
      '[object Number]': 'number',
      '[object String]': 'string',
      '[object Function]': 'function',
      '[object Array]': 'array',
      '[object Date]': 'date',
      '[object RegExp]': 'regExp',
      '[object Undefined]': 'undefined',
      '[object Null]': 'null',
      '[object Object]': 'object',
    };
    if (obj instanceof Element) {
      return 'element';
    }
    return map[toString.call(obj)];
  },
  deepClone(data) {
      const type = this.judgeType(data);
      let obj;
      if (type === 'array'){
        obj = [];
      } else if (type === 'object') {
        obj = {};
      } else {
    // 不再具有下一层次
        return data;
      }
      if (type === 'array'){
        for (let i = 0, len = data.length; i < len; i++) {
          obj.push(this.deepClone(data[i]));
        }
      } else if (type === 'object') {
        // 对原型上的方法也拷贝了....
        for (const key in data) {
          obj[key] = this.deepClone(data[key]);
        }
      }
      return obj;
    }
  }

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=140

返回列表

上一篇:vue 滑入滑出效果动画

没有最新的文章了...

“最全的数据深度拷贝方法-vue版” 的相关文章

vue-router 路由的配置

vue-router 路由的配置

最好定义一个专门的路由配置文件来管理路由地址  接下来在点击的元素上开始设置路由path接收的 链接地址 例如以下...

十个常用的自定义过滤器

//去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格 function trim(value, trim) {     ...

vuex刷新状态消失的解决办法

vuex做数据管理非常好,但是唯一美中不足的地方,就是当页面刷新的时候状态保存不下来,但是工作业务中,常常会遇到,可能需要把状态保留下来的情况那在这种情况下可以使用方案:在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以//在页面加载时...

vue3

vue3

安装vite?-Vite是vue作者开发的一款意图取代webpack的工具,其实原理是利用ES6的import会发送请求加载文件的特性,拦截这些请求,做一些预编译,省去webapck沉长的打包时间安装:npm install -D create-vite-app利用vite创建 vue3项目cre...

watch监听的几种写法

var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...