Skip to content
Menu
Yuuk的博客
  • 首页
  • 前端技术
    • JavaScript
    • HTML & CSS
  • SEO
  • 设计
    • 素材分享
    • 设计教程
  • 随笔
Yuuk的博客

js深复制和浅复制的理解

Posted on 2017年6月23日2018年10月31日 by yuuk

js中的深复制和浅复制也被叫作深拷贝和浅拷贝,它们的功能都是像一个对象复制成另一个新对象。
下来我们用代码解释一下深复制和浅复制的实现和差异:

基础对象:

var obj = {
  name: 'yuuk',
  age: '23',
  favorite: ['basketball', 'swimming', { a: 1, b: 2 }, null],
  skill: function() {
    console.log(this.name);
  },
};

浅复制:

var shallowCopy = function(src) {
    var result = {};
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            result[prop] = src[prop];
        }
    }
    return result;
};

var newObj = deepCopy(obj);
newObj.favorite[0] = 'football';
console.log(newObj.favorite[0]);  // football
console.log(obj.favorite[0]);  // football

打印数据发现,修改了newObj的value也会改变obj的value

深复制:

var deepCopy = function(src) {
    var result, prop;
    if (src instanceof Array ) {
        result = [];
    } else {
        result = {};
    }
    for (prop in src) {
        if (typeof src[prop] === 'object' && src[prop] !== null) {
            result[prop] = arguments.callee(src[prop]); // 降低耦合
        } else {
            if (src.hasOwnProperty(prop)) {
                result[prop] = src[prop];
            }
        }
    }
    return result;
};

var newObj = deepCopy(obj);
newObj.favorite[0] = 'football';
console.log(newObj.favorite[0]); // football
console.log(obj.favorite[0]); // basketball 区别就在这里

打印数据发现,修改了newObj的value不会改变obj的value

由此发现它们的区别在于浅复制仅仅复制第一层对象,而深复制就利用递归循环的方式复制了所有层级。

打赏赞(1)分享

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

搜索

近期文章

  • 宝塔面板中使用docker部署nodejs应用
  • 如何将docker镜像上传到阿里云
  • React Native 报错 No bundle URL present 解决方法
  • axios 给每一个请求添加耗时统计
  • css filter属性导致fixed失效

标签

addEventListener ajax ajax跨域 chatAt css居中 DNS缓存 docker gulp ie7 json jsonp margin memcache mysql nodejs ps技巧 typescript void vpn vuejs wampserver webpack win10 XMLHttpRequest z-index 事件冒泡 事件绑定 内容发布时间 图片加载 大写 字符串 封装ajax 广告屏蔽 批量修改图层名称 水平垂直居中 注册码 特殊符号 百度 空元素 站长平台 网页快照 负边界 递减 随机数 首字母

友情链接

  • 蔡甸新闻网
©2025 Yuuk的博客 | 鄂ICP备13014750号-9