经典前端面试题: Object.assign 是浅拷贝还是深拷贝?实现深拷贝的方法有哪些?

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

  • 如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
  • Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
  • String类型和 Symbol 类型的属性都会被拷贝。
  • 在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。
  • Object.assign 不会在那些source对象值为 nullundefined 的时候抛出错误。
  • 针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。也就是说,如果对象的属性值为简单类型(如string, number),通过Object.assign({},srcObj);得到的新对象为深拷贝;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的。

深拷贝的几种实现方法

JSON.stringify 和 JSON.parse

用 JSON.stringify 把对象转换成字符串,再用 JSON.parse 把字符串转换成新的对象。

可以转成 JSON 格式的对象才能使用这种方法,如果对象中包含 function 或 RegExp 这些就不能用这种方法了。

//通过js的内置对象JSON来进行数组对象的深拷贝
function deepClone(obj) {
  let _obj = JSON.stringify(obj);
  let objClone = JSON.parse(_obj);
  return objClone;
}

Object.assign()拷贝

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

通过jQuery的extend方法实现深拷贝

let $ = require('jquery');
let obj1 = {
   a: 1,
   b: {
     f: {
       g: 1
     }
   },
   c: [1, 2, 3]
};
let obj2 = $.extend(true, {}, obj1);

lodash.cloneDeep()实现深拷贝

let _ = require('lodash');
let obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
let obj2 = _.cloneDeep(obj1);

使用递归的方式实现深拷贝

function _deepClone(source) {
  let target;
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = _deepClone(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}


更多经典前端面试题,请到github查看或参与讨论https://github.com/daily-interview/fe-interview



更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿

原文地址:https://www.cnblogs.com/LVBingo/p/11290637.html

时间: 2024-10-24 05:11:15

经典前端面试题: Object.assign 是浅拷贝还是深拷贝?实现深拷贝的方法有哪些?的相关文章

一份来自于全球的前端面试题清单,看看老外喜欢考哪些题(部分有答案)

方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案.搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂.题目旁边的方括号内, 简单记录了与此题相关的知识点.总共大概一千多道,包含国内的题目,如有错误,欢迎指正.有些原链可能已无法打开,有些可能需要代理才能查看. 一.HTML [HTML related interview questions] 1.What is doctype? Why do u need it? 2.What is the use of data-* at

Web前端面试题集锦

Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScript: 数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板

Web前端面试题-1

Web前端面试题 Web前端面试题 1 HTML/CSS部分 4 1.什么是盒子模型?有几种? 4 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 4 3.CSS实现垂直水平居中 4 4.简述一下src与href的区别 5 5.什么是CSS Hack? 5 6.简述同步和异步的区别 6 7.px和em的区别 6 8. 什么叫优雅降级和渐进增强? 6 9.浏览器的内核分别是什么? 7 10.XHTML和HTML有什么区别 7 12.前端页面有哪三层构成,分别是什么?作用是什么?

前端面试题 -- JS篇

前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数据类型. 原始数据类型: null,undefined, string,number,boolean 引用数据类型:object 两者的区别:1)值存储方式不同: 原始数据类型:将变量名和值都存储在栈内存中 引用数据类型:将变量名存储在栈内存中,将值存储在堆内存中,并在栈内存中存储值的地址,该地址指

各大互联网公司前端面试题(js)

对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Function) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方

前端面试题关于JavaScript 这些你都会吗?

昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个.不过我在努力的学习中. 本宝宝第一次面试的时候比这个还紧张呢!!! 1.介绍js的基本数据类型 Undefined.Null.Boolean.Number.String 2.js有哪些内置对象? 数据封装类对象:Object.Array.Boolean.Number 和 String 其他对象:Functi

前端面试题 之 JavaScript

原文:前端面试题 之 JavaScript 昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个.不过我在努力的学习中. 本宝宝第一次面试的时候比这个还紧张呢!!! 1.介绍js的基本数据类型 Undefined.Null.Boolean.Number.String 2.js有哪些内置对象? 数据封装类对象:Object.Array.Boolean.Numbe

前端面试题(JS篇)

原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~ 1.JS相关问题: 解释下事件代理(基础题) 解释下 JavaScript 中 this 是如何工作的(始终指向调用当前函数的对象) 解释下原型继承的原理. AMD vs. CommonJS? 什么是哈希表? 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):f

2017年-Web前端面试题(HTML至Nodejs)

[原]2017年-Web前端面试题(HTML → Nodejs)   出自作者小矮人Web前端,博文地址:http://www.cnblogs.com/itlkNote/  文中有少许重复问题! 第一阶段 HTML.CSS.HTML5.CSS3 1.XHTML与HTML的有何异同? 2.介绍一下CSS的盒子模型?弹性盒子模型是什么? 3.Doctype的作用?标准模式与兼容模式各有什么区别? 4.HTML5 为什么只需要写 <!DOCTYPE HTML>? 5.行内元素有哪些?块级元素有哪些?