JS面试题中深拷贝的实现讲解

在面试中你是否遇到过如下场景：

Q：小朋友，你是否了解如何拷贝一个对象？

R：此时，机智的你可能会想到

Object.assign({}, obj);

Q：那如何深拷贝一个对象呢？

R：机智的你

JSON.parse(JSON.stringify(obj));

Q：使用stringify这种方式有何弊端？

  1. 性能问题，stringify再解析其实需要耗费较多时间，特别是数据量大的时候。
  2. 一些类型无法拷贝，例如函数(不输出)，正则(输出空对象)，时间对象(输出时间字符串)，Undefiend(不输出)
  3. 遇到循环引用的对象会出错
  4. 同层（非同层）同引用的问题，理论下两个key对应的val如果指向同一个对象，拷贝也应该指向一个相同新地址才对

Q：那你能自己实现个深拷贝函数？

R：如下：

const deepClone = (obj) => {
 // 非引用类型及函数将直接返回
 if (!obj || typeof obj !== 'object') return obj;

 // 特殊的引用类型处理
 switch(Object.prototype.toString.call(obj).slice(8, -1)) {
  case 'Date':
   return new Date(obj);
   break;
  case 'RegExp':
   return new RegExp(obj);
   break;
  case 'String':
   return new String(obj);
   break;
  case 'Number':
   return new Number(obj);
   break;
  case 'Boolean':
   return new Boolean(obj);
   break;
 }

 const result = obj instanceof Array ? [] : {};

 for (let propName in obj) {
  if (obj.hasOwnProperty(propName)) {
   result[propName] = deepClone(obj[propName]);
  }
 }

 return result;
}

优点：实现了大多数数据类型的拷贝，所有非引用类型及引用类型的String Number Boolean Function Array Date RegExp

缺点：未考虑一些特殊的引用类型如Error Math Symbol Map Set JSON，函数属于引用拷贝，未解决循环引用的问题

Q：如何解决循环引用？

R：将父层级的数据缓存对比（可以顺带解决同层（非同层）同引用的问题）

const deepClone = (obj) => {
 // 非引用类型及函数将直接返回
 if (!obj || typeof obj !== 'object') return obj;

 // 特殊的引用类型处理
 switch (Object.prototype.toString.call(obj).slice(8, -1)) {
  case 'Date':
   return new Date(obj);
   break;
  case 'RegExp':
   return new RegExp(obj);
   break;
  case 'String':
   return new String(obj);
   break;
  case 'Number':
   return new Number(obj);
   break;
  case 'Boolean':
   return new Boolean(obj);
   break;
 }

 const map = deepClone.map = deepClone.map || new Map();

 // 使用map结构可以不必循环缓存，提高效率
 if (map.get(obj)) {
  return map.get(obj);
 }

 const result = obj instanceof Array ? [] : {};

 // 如果仔细观察可以发现解决了同层同引用的问题
 map.set(obj, result);

 for (let propName in obj) {
  if (obj.hasOwnProperty(propName)) {
   result[propName] = deepClone(obj[propName]);
  }
 }

 return result;
}

Q：为什么函数还是指向原来的函数，而不创建新函数？

R：理论下函数也可以通过new Function(code)来创建新的函数，但是如果遇到闭包函数，我们无法得到原函数的外层定义的变量及其原有作用域链，这些在JS词法解析时完成的步骤我们无法得知，所有只能引用原函数比较好。

Sum: 上面实现的缺点主要是没有完全覆盖特殊引用类型，但其实我们平时应该不会遇到那些类型，所以可以凑合使用。如果还有其它的问题没有考虑到或者有出错的，希望大家可以帮忙指出。

以上就是JS面试题中深拷贝的实现讲解的详细内容，更多关于JS深拷贝的实现的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • javascript 关于赋值、浅拷贝、深拷贝的个人理解

    一.栈.堆.指针地址 栈内存:个人理解是,基本数据类型和引用数据类型都会用到的一个空间,这个空间以key-value形式存在,value本身不可修改,只能赋值替换: 堆内存:堆,就是堆积,每一个被开辟的空间可以想象成一个空纸盒子,纸盒子所在的纸盒子堆就是 "堆" .基本数据类型没有堆的概念.堆,只针对引用数据类型.存储方式应该是以对象(object)形式保存,对象内容包含key-value形式数据,value本身同样不可修改,只能赋值替换: 指针地址:针对引用数据类型在栈保存的值就是指

  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    本文实例讲述了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能.分享给大家供大家参考,具体如下: 根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系. 测试例子: var test={ a:"ss", b:"dd", c:[ {dd:"css",ee:"cdd"}, {mm:"ff",nn:

  • JS实现数组深拷贝的方法分析

    本文实例讲述了JS实现数组深拷贝的方法.分享给大家供大家参考,具体如下: 最近在网上看到一篇关于js数组复制最有效的方法是直接使用slice和concat方法.这2个方法的确是最快的把数组成功复制,而不是引用.可以运行实例: <script type="text/javascript"> <!-- var arr1=["1","2","3"],arr2; arr2=arr1.slice(0); arr1[0]

  • JS中实现浅拷贝和深拷贝的代码详解

    (一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. 基本类型值 在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种. 基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值

  • javascript二维数组和对象的深拷贝与浅拷贝实例分析

    本文实例讲述了javascript二维数组和对象的深拷贝与浅拷贝.分享给大家供大家参考,具体如下: 这篇文章主要为大家详细介绍了js实现数组和对象的深浅拷贝, 1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用 2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的"值"(数组的所有元素)拷贝过来,是"值"而不是"引用" JavaScript的数据类型分为原始数据类型和对象类型.二者在内存中存放的方式

  • JS面试题中深拷贝的实现讲解

    在面试中你是否遇到过如下场景: Q:小朋友,你是否了解如何拷贝一个对象? R:此时,机智的你可能会想到 Object.assign({}, obj); Q:那如何深拷贝一个对象呢? R:机智的你 JSON.parse(JSON.stringify(obj)); Q:使用stringify这种方式有何弊端? 性能问题,stringify再解析其实需要耗费较多时间,特别是数据量大的时候. 一些类型无法拷贝,例如函数(不输出),正则(输出空对象),时间对象(输出时间字符串),Undefiend(不输出

  • 基于js中的原型(全面讲解)

    基于js中的原型(全面讲解)

    在讲js的原型之前,必须先了解下Object和Function. Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是继承对方,也就是说Object和Function都既是函数也是对象. console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true Object 是 Function

  • 对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解

    对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解 列表赋值: >>> a = [1, 2, 3] >>> b = a >>> print b [1, 2, 3] >>> a[0] = 0 >>> print b [0, 2, 3] 解释:[1, 2, 3]被视作一个对象,a,b均为这个对象的引用,因此,改变a[0],b也随之改变 如果希望b不改变,可以用到切片 >>> b = a[:] &

  • js与jquery获取input输入框中的值实例讲解

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="text" name"username" id="user" placeholder="用户名" class="uusr"><br> 一.jquery获取input文本框中的值 通过 name: $('inp

  • jQuery中的AjaxSubmit使用讲解

    最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾. 1 ,引入依赖脚本 <script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本 <script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"

  • JS实现JSON.stringify的实例代码讲解

    JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符串的一个方法,不过再IE6下面,并不存在JSON这一对象,因此,用到此方法时,需要写一套兼容性的代码. JSON.stringify的一些规则以及注意点:当对象为数字,null,boolean的时候,直接转换为相应的字符串就可以了. 但是string,function,undefined,object,array等,需要特殊处理. 1.undefined,该类型使用JSON.stringify处理的时候

  • js的函数的按值传递参数(实例讲解)

    js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响.例如: 'use strict'; var list = [1, 2, 3]; list.forEach(function(item) { item ++; }); console.log(list); // [ 1, 2, 3 ] 这是因为js的函数在接收参数时,会生成一个副本变量,该副本变量等于参数的值,可以分析js这样运行的: 'use strict'; var list = [1, 2, 3];

  • JS面试题大坑之隐式类型转换实例代码

    1.1-隐式转换介绍 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算 这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换 例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小 1.2-隐式转换规则 转成string类型: +(字符串连接符) 2..转成number类型:++/--(自增自减运算符

  • 用Vue.js在浏览器中实现裁剪图像功能

    你是否写了一个需要接受用户上传图片的 Web 应用,后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题?在网络上处理图像很容易成为一种痛苦 -- 当然,除非你使用了正确的工具. 在本教程中,我们将探讨如何在浏览器中使用 JavaScript 库来操作图片,为服务器上的存储做准备,并在 Web 程序中使用.我们将使用 Vue.js 而不是原生 JavaScript来完成此操作. 要了本文想要完成的任务,请查看上面的图片.左侧是原始图像,右侧是新图像预览.我们可以移动裁剪框并调整其大小,

  • js面试题之异步问题的深入理解

    js中的宏任务与微任务 在面试过程中,基本面试官都会问你一些promise的问题,promise是es6的新内容,主要是用来优化异步的问题.笔试中经常会让你写一些promise和setTimeout的执行结果,这你就必须知道宏任务和微任务的概念了! 为什么要使用promise 如果你经历过以前的jquery开发项目,你会遇到以下问题:回调地狱 $.ajax({ ... success: function() { ... $.ajax({ ... success: function() { } }

随机推荐