前端面试题整理——深拷贝

const obj = {
        a: 100,
        b: {
            b1: [1, 2, 3],
            b2: 'string'
        },
        c: ['a', 'b', 'c']
    }

    /*
    *  没做深拷贝的效果
    const obj2 = obj
    obj2.a = 200
    obj2.b.b2 = 'abc123'
    obj2.c[0] = 'aa'
    console.log(obj)
    console.log(obj2)

    obj2修改的内容会影响obj的内容,因为他们修改的都是同一个堆内容
    * */

    const obj2 = deepClone(obj);
    obj2.a = 200
    obj2.b.b2 = 'abc123'
    obj2.c[0] = 'aa'
    console.log(obj)
    console.log(obj2)

    /**
     * 深拷贝
     * @param {Object} obj 要深拷贝的对象
     * */
    function deepClone(obj = {}) {
        // obj如果不是引用类型,或者是null,直接返回
        if (typeof obj !== 'object' || obj == null) {
            return obj
        }
        // 初始化返回结果
        let result;
        if (obj instanceof Array) {
            result = []
        } else {
            result = {}
        }
        // 遍历obj
        for (let key in obj) {
            // 保证key不是原型的属性
            if (obj.hasOwnProperty(key)) {
                // 递归调用
                result[key] = deepClone(obj[key])
            }
        }
        return result
    }

考点:

不同类型使用内存堆栈的情况

(0)

相关推荐

  • JavaScript 奇怪又实用的知识又增加了 6 个

    来源 | 前端印象 作者 | 零一 今天给大家带来一些JavaScript的冷知识,可能你有所耳闻,但也有可能会让你大吃一惊.废话不多说,一起来看看吧! 一.解构小技巧 平常我们需要用到一个嵌套多层的 ...

  • 前端【JS】,深拷贝与浅拷贝的区别及详解!

    我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看. OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的: 两个对象A.B, A有数据B为空 ...

  • 4种JavaScript中不同迭代对象的方法

    WEB前端开发社区 2021-11-02 在今天这篇文章里,我将介绍了一些迭代对象并获取键值对的方法.这些技巧可以被视为小石头,最终将帮助您渡过 JavaScript 面试的一些小河流. 我知道每个独 ...

  • 对象(数组)的深克隆和浅克隆(头条)

    let obj = { a: 100, b: [10, 20, 30], c: { x: 10 }, d: /^\d $/ }; // 1.浅克隆,obj和obj2是没有关系的,第二级的对象还是引用的 ...

  • 前端面试题整理——Javascript基础

    常见值类型: let a; //undefined let s = 'abc'; let n = 100; let b = true; let sb = Symbol('s'); let nn = N ...

  • JavaScript 里三个点 ... 的用法

    Three dots ( - ) in JavaScript Rest Parameters 使用 rest 参数,我们可以将任意数量的参数收集到一个数组中,然后用它们做我们想做的事情. 引入了其余参 ...

  • es6 快速入门 系列 —— 解构

    解构 我们经常使用数组或对象存储数据,然后从中提取出相关数据信息 试图解决的问题 以前开发者为了从对象或数组中提取出特定数据并赋值给变量,编写了很多重复的代码,就像这样: function demo1 ...

  • Vue响应式系统如何操作运用?本文详解

    前言 之前学习 vue 的时候,一直没刨根问底过.在看到网上这类文章比较多,参差不齐的质量有时候看的一头雾水.当然也有不错的文章,但是终究是别人的理解.于是写一篇关于自己的理解记录下来,亲身实践才能收 ...

  • 前端面试题整理——手写简易jquery

    class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) console.lo ...

  • VUE3.0-手写实现组合API

    VUE3.0-手写实现组合API

  • 【web前端】数据响应式

    WEB前端开发社区 昨天 1.概念 数据响应式,可以说是一套能够侦测到数据变化,从而可以根据这个变化做一些跟变化数据相关处理的机制.比如有一个数据 var obj={a:3,b:6} obj.a 值改 ...

  • JS的赋值与深浅拷贝实例

    赋值 基本类型: 传值,在栈内存中的数据发生数据变化的时候,系统会自动为新的变量分配一个新的之值在栈内存中,两个变量相互独立,互不影响的 引用类型: 传址,只改变指针的指向,指向同一个对象,两个变量相 ...

  • 深拷贝学习笔记

    在开发过程中,我碰到了一个问题,让我找了好久问题在哪里,最后我发现是最开始赋值的时候没有深拷贝值,导致了原本值被覆盖污染,这里和大家分享下我的解决方法 var i = 5; var j = i; j= ...

  • lodash函数库 -- chunk

    loadsh函数库中的 chunk 函数采用 typescript 语法重写. chunk 函数 将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组. 如果array 无 ...