面试官:“请你说说深拷贝和浅拷贝”,如何脱颖而出

前言

请你说说深拷贝与浅拷贝

面试被这样突然问一个大方向的知识点,相信很多同学都会一下子懵逼,不知该如何下手如何阐述。今天就教大家面对这样的问题该如何回答。

面对这样一个问题不知道该从哪里入手。不妨就先试试先说一说是什么。比如先说一说什么是深拷贝与浅拷贝?

1. 什么是深拷贝和浅拷贝

复制代码
深浅拷贝通常只针对引用类型。

浅拷贝是直接复制引用地址,修改拷贝对象内部的值,会改变原本对象的值。就是只拷贝了一层对象中的原始值。如果内部有引用类型,就会直接复制他的指针。

2. 如何实现浅拷贝?

js 复制代码
const newObj = Object.assign(obj)
const newArr = [].concat(arr)
const newArr = [].slice
[...xxx]// 数组解构

浅拷贝主要就是上面这几种方法。

3. 手写一个浅拷贝

js 复制代码
function shallowCopy(obj){
    let newObj = {}
    for(const key in obj){
        if(obj.hasOwnProperty(key)){// 判断是否是对象的自有属性
            newObj[key] = obj[key]
            }
      }
    return newObj
}

4. 深拷贝

递归拷贝,是复制对象内部的所有值,如果有引用类型会递归拷贝下来,也就是层层拷贝,所有类型的属性值都会被复制。原对象的修改不会影响拷贝后的对象。

5. 如何实现深拷贝

js 复制代码
function foo() { }
obj = {
    a: 1,
    b: { n: c },
    c: b,
    d: undefined,
    e: Symbol(1),
    f: foo
}
const newObj = JSON.parse(JSON.stringify(obj))//对象转为字符串再转回对象

该方法无法处理对象内部的undefined,symbol,function,无法处理循环引用。使用该方法,面对undefined,symbol,function无法将值拷贝进新对象,面对循环调用会直接报错。

6.手写一个深拷贝

这里就是今天的重点了,一般也是面试官的重点。首先先介绍一种你一定要会的方法。

递归

递归 复制代码
function deepCopy(obj) {
    let newObj = {}
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] !== 'object' || obj[key] !== null) {//判断当前遍历元素是不是对象
                newObj[key] = obj[key];
            } else {// 不是就递归
                newObj[key] = deepCopy(obj[key]);
            }
        }
    }
    return newObj;
}

这种方法是大家一定要会的,因为深浅拷贝在面试中是个很简单的问题。但是虽然是送分题,只要我们回答的好,一样能变成一个加分项。人家只能回答出一种,你能回答出两种,三种,自然就是加分项了。接下来我就说说另外两种深拷贝的方法。

structuredClone(obj)

js 复制代码
const newObj = structuredClone(obj)

这个方法是一种很新的方法,估计有许多10年程序员也不知道这样一种方法。能回答出来一定能够让面试官惊奇,但是想要变成加分项还是不够的。需要注意的是他无法拷贝Symbol,function和循环调用,对象内部有其一时都会直接报错。

信息管道

js 复制代码
function deepCopy(obj) {
    return new Promise((resolve) => {
        const { port1, port2 } = new MessageChannel()// 信息管道
        port1.postMessage(obj)
        port2.onmessage = (msg) => {
            resolve(msg.data)
        }
    })
}

这个方法利用了通常用于聊天功能的信息管道,实现了一个十分完善的深拷贝,undefined,symbol,function,甚至循环引用他都能够实现深拷贝。

尾声

深浅拷贝这种问题,回答出来是不会加分的,但是回答不出来就会变成一个扣分项。但是像这样回答出这三种手写深拷贝的方法,那他就会变成一个加分项。让面试官对你印象深刻。希望我的文章能够帮到各位,为各位的面试助一点力。

如有问题欢迎各位大佬指正,也希望各位大佬动动发财的小手帮我点个赞,谢谢各位。

相关推荐
inksci10 分钟前
Vue 3 中通过 this. 调用 setup 暴露的函数
前端·javascript·vue.js
未来之窗软件服务33 分钟前
monaco-editor 微软开源本地WEB-IDE-自定义自己的开发工具
开发语言·前端·javascript·编辑器·仙盟创梦ide
白白糖1 小时前
二、HTML
前端·html
子燕若水1 小时前
continue dev 的配置
java·服务器·前端
学习HCIA的小白1 小时前
关于浏览器对于HTML实体编码,urlencode,Unicode解析
前端·html
向明天乄1 小时前
Vue3 后台管理系统模板
前端·vue.js
香蕉可乐荷包蛋2 小时前
vue 常见ui库对比(element、ant、antV等)
javascript·vue.js·ui
彩旗工作室2 小时前
Web应用开发指南
前端
孙俊熙3 小时前
react中封装一个预览.doc和.docx文件的组件
前端·react.js·前端框架
wuhen_n3 小时前
CSS元素动画篇:基于当前位置的变换动画(四)
前端·css·html·css3·html5