jquery加载页面的几种方法(页面加载完成就执行)如何去掉css 渐变时的锯齿效果AJAX请求以及解决跨域的问题浅析Vue3动态组件怎么进行异常处理html+css+js写的AI五子棋游戏(附源码)基于jquery 实现导航条高亮显示的两种方法EasyUI使用DataGrid实现动态列数据绑定Vue怎么通过JSX动态渲染组件JS 获取当前日期、时间、星期聊一聊Node.js中的 GC(垃圾回收)机制Ajax 请求队列解决方案并结合elementUi做全局加载状态前端代码风格规范总结JS Generator函数yield表达式示例详解javascript子窗口父窗口相互操作 取值赋值的问题CSS如何实现波浪效果ECharts实现数据超出Y轴最大值max但不隐藏CSS样式穿透的几种方法JavaScript 类型转换CSS 设置页面缩放如何在Vue3+Vite中使用JSXlinux平台下node cnpm的安装方法vue中v-if和v-for的区别是什么详解Vue PC端如何实现扫码登录功能CSS 网格(Grid)布局JavaScript 请求服务端接口Angular开发问题记录:组件拿不到@Input输入属性聊一聊CSS中的盒模型和box-sizing属性vue3.0对服务端进行渲染Web 页面如何实现动画效果移动端 H5 实现拍照功能的几种方法CSS 样式优先级HTML 块级元素、行内元素和行内块级元素深入聊一聊vue3中的reactive()CSS 媒体查询Angular中的路由(Routing)原理怎么移除css的hover事件让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果Web页面的几种布局方式JavaScript 评测代码运行速度的几种方法优化jQuery性能的多种方法(整理总结)说一下Vue组件中的自定义事件和全局事件总线列举一下JavaScript中对数组进行合并的几种方法JavaScript 对象合并带你深入了解一下vue.js中的this.$nextTick!如何在JavaScript中对文件进行处理Vue.js 前端项目在常见 Web 服务器上的部署配置vue中$set的实现方法CSS 实现文本装饰效果JavaScript 高阶函数History 和 Hash 路由模式Vue3学习之深度剖析CSS Modules和ScopeCSS 清除浮动CSS 设置背景图片【整理分享】一些常见Vue面试题(附答案解析)CSS里面的transform 属性CSS中的几种尺寸单位总结JavaScript中的条件判断与比较运算uni-app 滚动通知组件的实现JavaScript 执行上下文与作用域前端兼容性问题总结前端性能优化——图片优化JS中数组去重的几种方法JavaScript里实现继承的几种方式JavaScript使用reduce方法实现简单的 i18n 功能JavaScript 日期和时间的格式化大汇总(收集)JS里的原始值与引用值JavaScript 文件处理检测js代码中可能导致内存泄漏的工具Angular学习之ControlValueAccessor接口详解uni-app 日历组件的实现Vue 组件之间传值JavaScript里的回调函数属于闭包吗?JavaScript 解决冒泡事件导致的性能问题总结一下JavaScript中的一些奇怪问题简单说一下JavaScript中的事件冒泡和事件捕获关于 WebpackJavaScript中的循环类型5个实用的TypeScript操作符,助你提升开发能力!HTML img 元素无法显示 base64 图片的可能原因jQuery 遍历方法总结前端性能优化——内存问题javascript中脚本加载和执行机制Web 页面之间传递参数的几种方法解释一下JavaScript中0.1+0.2不等于0.3的问题总结一下JavaScript 中apply、call、bind的使用方法什么是EventLoop?怎么测试Node或页面的性能JavaScript 中 new Date(time).getTime() 获取时间戳方法在 iOS 中的兼容性问题JS里数组合并的几种方法详解vue各种权限控制与管理的实现思路uni-app 弹出层组件的实现用JavaScript实现文件的上传与下载前端性能优化总结简单说一下JavaScript中的事件委托JavaScript如何删除css总结一下JS中的排序算法关于js中的作用域和闭包让页面元素居中的一些方法【javascript算法】二分查找法如何在前端实现上万行大量数据的秒级响应?CSS中父元素被子元素的margin-top影响的解决方法js使用splice方法删除数组元素可能导致的问题如何运行vue项目(超详细图解)js隐式类型转换的副作用了解js的原型和原型链js中的循环引用js判断变量类型的方法web页面最常用的正则校验规则总结js内存管理和垃圾回收js中this关键字的作用和如何改变其上下文JS中的操作符和运算符大总结Vue3 watch 监听对象数组中对象的特定属性总结一下js的浅拷贝和深拷贝JavaScript中的异步编程JavaScript使用一个数组对另一个对象数组进行过滤一个基于Vue3实现的简单日历组件CSS实现磨砂玻璃(毛玻璃)效果样式解决“Vue3调用本地服务接口失败,老是提示下载并安装本地服务”的办法vue3基于组合式API使异步获取的数据对象具有响应性ASP.NET给前端动态添加修改CSS样式JS 标题 关键字在js中如何获取对象的长度了解一下js中的函数式编程Vue框架中监测数组变化的方法VUE html里的文本框只允许输入数字的两种方法分享几种js格式化金额的方法JavaScript的Promise同步处理js中的简写语法JavaScript 面向切面编程(AOP,装饰者模式)了解一下js的跨域问题谈一谈Vue怎么用extend动态创建组件Vue3实现印章徽章组件js中断 forEach 循环的几种方法vue3组件间怎么通信?简述一下通信方式CSS 设置文字间距CSS 网格(Grid)布局Vue3 实现模态框组件js处理扁平数组和树结构相互转换使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?Vue.js与ASP.NET的结合,实现企业级应用的开发和部署检查js中的字符串是否可以成为回文Vue.nextTick函数的用法及在异步更新中的应用关于js中0.1+0.2不等于0.3的问题使用JavaScript开发网页地图导航js中如何使用可选函数参数Vue与js的融合,如何编写现代化的前端应用关于Vue与服务器端的通信:如何实现登录鉴权Vue.js的响应式原理如何使用 FabricJS 禁用椭圆的居中旋转?使用JavaScript实现页面滑动切换效果移动端H5页面的缓存问题js里base64与file之间的转换分享一下利用Vue表单处理实现复杂表单布局如何使用CSS创建渐变阴影?如何在 JavaScript 中查看结构体数组?css的弹性布局(Flex布局)Vue统计图表的数据标签和数值显示技巧js实用工具方法库大总结使用Angular和MongoDB来构建具有登录功能的博客应用程序如何在Vue表单处理中实现表单字段的文件下载使用js开发交互式地图应用Vue.component函数的使用及如何创建局部组件css实现三角形的几种方法移动端H5实现自定义拍照界面如何在js中遍历对象jquery如何修改选中状态如何使用js对图像进行压缩js如何计算base64编码图片的大小关于Vue双向数据绑定原理详解Vue.filter函数及如何自定义过滤器列举一下js数组的reduce方法的一些应用如何在Vue表单处理中实现表单的条件渲染vue中的canvas插件js数组的reduce方法的一些应用VUE里使用虚拟DOM来优化更新流程canvas对象有哪些方法js中URL查询字符串(query string)的序列与反序列化如何使用 JavaScript/jQuery 为网站创建暗/亮模式?总结html5中常见的选择器Vue组件开发:工具提示组件的实现方法总结js中常见的层次选择器利用Vue2实现印章徽章组件Vue组件实战:列表组件开发js中如何将对象转换为数组Vue组件开发:地图组件实现方法如何将数据存储到 DOM 中?Vue实战:图片上传组件开发如何使用Vue实现可视化界面设计?vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置Vue组件库推荐:Ant Design Vue深度解析使用Vue实现弹窗效果React Query 数据库插件:与分布式系统的协作指南如何使用vue ui创建vue项目使用CSS的Positions布局打造响应式网页无感刷新页面(附可运行的前后端源码,前端vue,后端node)Css Flex 弹性布局中的换行与溢出处理方法Vue组件库推荐:Element UI深度解析分享一个用HTML、CSS和jQuery构建的漂亮的登录注册界面如何利用React和Sass实现可定制的前端样式如何在Vue中实现拖拽上传文件vue3+TypeScript全局事件总线mitt分享一个Pinia存储的数据持久化插件HTML、CSS和jQuery:实现图片折叠展开的效果如何使用HTML和CSS创建动画条形图?如何利用React和Flutter构建跨平台移动应用用html、css和jQuery实现图片翻页的特效利用Promise优化Vue异步操作的方法CSS Positions布局与网页导航的优化技巧js多图合成一张图CSS3实现动态旋转加载样式使用Velocity.js将动画添加到网页使用FabricJS创建Image对象的JSON表示vue3递归组件---树形组件vue3+TypeScript全局事件总线mitt在Vue中实现可编辑的表格vue3+TypeScript自定义指令:长按触发绑定的函数Vue中如何处理表单数据的双向绑定和验证Vue 简介Vue 安装Vue 常用指令Vue 实例Vue 计算属性Vue 动态样式绑定Vue 事件处理Vue 侦听器Vue 数据双向绑定Vue过渡 & 动画Vue 实例生命周期Vue 插槽的使用Vue 组件基础Vue动态组件 & keep-aliveVue 组件间通信Vue 过滤器Vue 自定义指令Vue 混入 MixinsVue 插件Vue 渲染函数VueRouter 编程式导航VueRouter 路由嵌套VueRouter 基础应用VueRouter 命名视图VueRouter 命名路由Vuex 简介、安装VueRouter 路由传参VueRouter 路由别名、重定向Vuex GetterVuex StateVuex ActionVuex MutationVue-Cli & VueDevTools安装Vuex ModulesVue 第三方库的使用Vue-Cli 项目文件结构分析Vue 本地 Mock 数据Vue 项目打包部署Element 美化 TODO 项目

总结一下js的浅拷贝和深拷贝

js中对象的赋值是通过将一个对象的引用赋值给另一个变量,两个变量指向同一个内存地址。这意味着如果更改其中一个对象的值,另一个对象的值也会更改。

浅拷贝是将一个对象的值复制给另一个对象,但如果对象中包含对其他对象的引用,则这些引用仍然指向原来的对象。可以使用 Object.assign() 和 spread operator(扩展运算符 ...)等方法来实现浅拷贝。

深拷贝是完全复制一个对象及其中包含的所有对象。可以使用 JSON.parse(JSON.stringify()) 或 lodash.cloneDeep() 等方法来实现深拷贝。

一、浅拷贝

浅拷贝是将一个对象或数组的值复制给另一个对象或数组,但如果对象或数组中包含对其他对象或数组的引用,则这些引用仍然指向原来的对象或数组。

JavaScript 中浅拷贝可以通过如下几种方式实现:

  • 使用 Object.assign() 方法,该方法用于将一个或多个对象的属性复制到目标对象上。
let original = { a: 1,b: 2 };
let copied = Object.assign({},original);
console.log(copied); // { a: 1,b: 2 }
  • 使用 Spread operator(...),可以直接将一个对象或数组拷贝到另一个对象或数组上。
let original = { a: 1,b: 2 };
let copied = { ...original };
console.log(copied); // { a: 1,b: 2 }
  • 使用 slice() 和 concat() 方法,可以将一个数组拷贝到另一个数组上。
let original = [1,2,3];
let copied = original.slice();
console.log(copied); // [1,3]
  • 使用 for...in 循环和 Object.keys() 或 Object.getOwnPropertyNames() 或 Object.getOwnPropertySymbols() 方法。
let original = { a: 1,b: 2 };
let copied = {};
Object.keys(original).forEach(key => {
  copied[key] = original[key];
});
console.log(copied); // { a: 1,b: 2 }

注意:所有上述方法都是实现浅拷贝,如果原对象或数组中包含对其他对象或数组的引用,则这些引用仍然指向原来的对象或数组。

二、深拷贝

深拷贝是指在拷贝过程中,拷贝一个对象中的所有数据,并创建一个新对象,对新对象进行操作并不会影响到原对象。

1、常规场景

JavaScript 中深拷贝可以通过如下几种方式实现:

  • 使用 JSON.parse(JSON.stringify(object)) 方法

需要注意的是:该方法会忽略 undefined 以及正则表达式类型的属性。

const A = { a: 7788,b: undefined,c: new RegExp(/-/ig) },B = JSON.parse(JSON.stringify(A));

console.log('A',A);
console.log('B',B);

  • 使用递归的方式,手动拷贝对象的每一层
function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
        for (let i = 0; i < obj.length; i++) {
            copy[i] = deepCopy(obj[i]);
        }
    } else {
        copy = {};
        for (let key in obj) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

const objA = { a: 123 },objB = { b: 456 };

// 浅拷贝
const objC = {...objA};
console.log('objA.a',objA.a);  // objA.a 123
console.log('objC.a',objA.a);  // objC.a 123
objC.a = 788;
console.log('objA.a',objA.a);  // objA.a 788
console.log('objC.a',objC.a);  // objC.a 788

// 深拷贝
const objD = deepCopy(objB);
console.log('objB.b',objB.b);  // objB.b 456
console.log('objD.b',objD.b);  // objD.b 456
objD.b = 899;
console.log('objB.b',objD.b);  // objD.b 899

这个函数接受一个参数 obj,如果它不是对象或者是 null,那么直接返回该参数。如果它是数组,则创建一个新数组并递归复制每一项。否则,创建一个新对象并递归复制每一个属性。

  • 使用 lodash 类库的_.cloneDeep函数、 underscore 中的 _.clone() 函数等第三方库

2、特定场景一:内置对象类型的深拷贝

JavaScript 中复制内置对象类型(例如 Date,RegExp 等)的深拷贝可以使用特定的构造函数来重新创建该对象。

例如,对于 Date 对象,可以使用 new Date(originalDate.getTime()) 来创建一个新的日期对象,其中 originalDate.getTime() 返回原始日期对象的时间戳。

对于 RegExp 对象,可以使用 new RegExp(originalRegExp) 或 new RegExp(originalRegExp.source,originalRegExp.flags) 来创建一个新的正则表达式对象。

下面是一个使用构造函数来复制内置对象类型的深拷贝示例:


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof Date) {
        copy = new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
        copy = new RegExp(obj);
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj,copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key],copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

这个示例的深拷贝函数首先检查当前对象是否为内置对象类型,如果是,则使用相应的构造函数重新创建该对象,否则创建一个普通对象或数组。然后进行递归复制每一个属性。

需要注意的是,使用构造函数复制内置对象类型只适用于部分内置对象类型,对于其他的内置对象类型,可能需要使用其他的方法来进行复制,或者使用第三方库来进行复制。

总之,深拷贝复制内置对象类型需要考虑使用构造函数来重新创建对象,如果需要对这些对象进行深拷贝操作,可以使用上述方法或其他库来实现。

3、特定场景二:自定义对象类型的深拷贝

JavaScript 中自定义对象的深拷贝可以使用同样的递归方式实现,可以使用 WeakMap 方法。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof MyCustomObject) {
        copy = new MyCustomObject();
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj,copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

这个函数首先检查当前对象是否为自定义对象,如果是,则创建一个新的自定义对象,否则创建一个普通对象或数组。然后进行递归复制每一个属性。

注意,如果自定义对象中包含循环引用,需要使用 WeakMap 来避免出现死循环。

4、特定场景三:对象中存在函数或循环引用

对于函数,通常会忽略它们,因为函数不能被复制,而是需要重新定义。

对于循环引用,可以使用 WeakMap 来存储已经复制过的对象。每次遇到循环引用时,可以检查 WeakMap 中是否已经有该对象的副本,如果有,则直接使用副本,而不是重新创建。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj,copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

这是使用 WeakMap 的一种示例,这个示例的深拷贝函数递归地复制对象,但检查 WeakMap 中是否已经存在该对象的副本,如果存在则直接使用副本,而不是重新创建。

此外,使用 JSON.parse(JSON.stringify(obj)) 方法会自动忽略函数和循环引用,但是会忽略 undefined 以及正则表达式类型的属性。

还有,还可以使用第三方库,如 lodash 中的 _.cloneDeep() 函数、 underscore 中的 _.clone() 函数等来实现对象中存在函数或循环引用的深拷贝。

5、特定场景四:对象中有对其他对象的引用或者包含 Symbol 属性的对象

对于对象中有对其他对象的引用,可以使用 WeakMap 来存储已经复制过的对象。每次遇到对其他对象的引用时,可以检查 WeakMap 中是否已经有该对象的副本,如果有,则直接使用副本,而不是重新创建。

对于对象中包含 Symbol 属性的对象,可以使用 Object.getOwnPropertySymbols() 方法来获取该对象所有的 Symbol 属性,然后使用 Object.getOwnPropertyDescriptor() 方法来获取这些 Symbol 属性的值,最后将这些值赋给新对象。


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj,copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    let symbols = Object.getOwnPropertySymbols(obj);
    symbols.forEach(symbol => {
        let descriptor = Object.getOwnPropertyDescriptor(obj,symbol);
        Object.defineProperty(copy,symbol,descriptor);
    });
    return copy;
}

这是使用 WeakMap 和 Symbol 属性的一种示例,这个示例的深拷贝函数首先检查 WeakMap 中是否已经存在该对象的副本,如果存在则直接使用副本,而不是重新创建。然后使用 Object.getOwnPropertySymbols() 方法获取该对象所有的 Symbol 属性,最后使用 Object.getOwnPropertyDescriptor() 方法获取这些 Symbol 属性的值,并将这些值赋给新对象。

这种方法可以保证深拷贝对象中包含的所有属性,包括对其他对象的引用和 Symbol 属性,但还是不能复制内置对象类型,这些对象类型是不可枚举的。

三、循环引用

JavaScript 中的循环引用指的是两个或多个对象之间相互引用的情况。这种情况通常发生在将一个对象赋给另一个对象的属性时,同时还将另一个对象赋给第一个对象的属性。

以下是一个示例:

let obj1 = {};
let obj2 = {};

obj1.prop = obj2;
obj2.prop = obj1;

这样就会产生一个循环引用,因为 obj1 和 obj2 相互引用。

循环引用可能导致 JavaScript 引擎无法正确处理内存,并导致内存泄漏。因此,在编写 JavaScript 代码时需要特别注意避免循环引用。如果您需要在两个对象之间建立关系,可以使用弱引用来避免循环引用。

在深拷贝中遇到循环引用就会导致死循环,因此需要使用特殊的算法来解决这个问题。可以使用递归算法和深度优先遍历来实现深拷贝,在遍历过程中跟踪已经遍历过的对象,如果遇到循环引用就直接返回已经遍历过的对象的引用。

总的来说,在使用浅拷贝和深拷贝时,需要根据需求和对象的结构来进行选择。通常来说,如果需要对对象进行修改并且不希望对原对象造成影响,那么应该使用深拷贝。如果只是需要读取对象中的数据而不需要修改,那么可以使用浅拷贝。在实现深拷贝时,需要特别注意循环引用和特殊属性问题。