网站开发需要用到哪些技术百度云资源搜索引擎入口

网站开发需要用到哪些技术,百度云资源搜索引擎入口,500m网站空间,云南省建设教育协会网站在前端开发中#xff0c;“拷贝对象 / 数组” 是高频操作 —— 比如修改表单数据时保留原始值、状态管理中避免副作用、处理接口返回数据时隔离修改。但很多开发者只知 “浅拷贝” 和 “深拷贝” 之名#xff0c;却踩遍引用传递的坑#xff1a;修改新对象#xff0c;原对象…在前端开发中“拷贝对象 / 数组” 是高频操作 —— 比如修改表单数据时保留原始值、状态管理中避免副作用、处理接口返回数据时隔离修改。但很多开发者只知 “浅拷贝” 和 “深拷贝” 之名却踩遍引用传递的坑修改新对象原对象莫名被篡改用 JSON.parse (JSON.stringify ()) 拷贝函数、正则直接丢失…本文将从 JS 数据存储的底层逻辑出发拆解深浅拷贝的本质手把手实现可靠的深浅拷贝函数梳理不同场景下的最优方案帮你彻底避开拷贝的那些 “坑”。一、先搞懂为什么会有深浅拷贝深浅拷贝的核心差异源于 JS 对基本类型和引用类型的不同存储机制 —— 这是理解拷贝的 “根”绕开这个讲拷贝都是空谈。1. 数据类型的存储规则类型分类包含类型存储位置访问方式基本类型String/Number/Boolean/Null/Undefined/Symbol/BigInt栈内存Stack直接访问值赋值时拷贝 “值本身”引用类型Object/Array/Function/RegExp/Date 等堆内存Heap栈中存 “引用地址”指向堆中数据赋值时拷贝 “地址” 而非 “数据”2. 举个例子赋值≠拷贝先看一段简单代码理解 “引用传递” 的坑javascript运行// 基本类型赋值即拷贝值 let a 10; let b a; b 20; console.log(a); // 10b修改不影响a // 引用类型赋值仅拷贝地址 let obj1 { name: 张三, age: 20 }; let obj2 obj1; obj2.name 李四; console.log(obj1.name); // 李四obj2和obj1指向同一个堆内存地址正是因为引用类型的 “地址拷贝” 特性才需要专门的 “浅拷贝” 和 “深拷贝” 来实现真正的 “数据隔离”。二、浅拷贝只拷贝 “第一层” 的表面功夫1. 浅拷贝的定义浅拷贝会创建一个新对象 / 数组但仅拷贝第一层属性若第一层属性是基本类型拷贝 “值本身”若第一层属性是引用类型拷贝 “引用地址”新、旧对象共享深层数据。2. 浅拷贝的实现方式1原生 API 实现简单场景首选① Object.assign()javascript运行const obj1 { name: 张三, hobby: [篮球, 游戏] }; const obj2 Object.assign({}, obj1); // 基本类型属性修改不影响原对象 obj2.name 李四; console.log(obj1.name); // 张三 // 引用类型属性修改会影响原对象 obj2.hobby.push(读书); console.log(obj1.hobby); // [篮球, 游戏, 读书]⚠️ 注意Object.assign () 会忽略原型链上的属性且只拷贝可枚举属性。② 展开运算符...语法更简洁效果与 Object.assign () 一致javascript运行const obj1 { name: 张三, hobby: [篮球, 游戏] }; const obj2 { ...obj1 }; obj2.hobby.push(跑步); console.log(obj1.hobby); // [篮球, 游戏, 跑步] // 数组浅拷贝同理 const arr1 [1, 2, [3, 4]]; const arr2 [...arr1]; arr2[2].push(5); console.log(arr1[2]); // [3, 4, 5]③ 数组专用slice ()/concat ()javascript运行const arr1 [1, 2, [3, 4]]; const arr2 arr1.slice(); // 无参数时拷贝整个数组 const arr3 arr1.concat(); arr2[2].push(5); console.log(arr1[2]); // [3, 4, 5] console.log(arr3[2]); // [3, 4, 5]2手动实现浅拷贝函数理解原理javascript运行function shallowClone(target) { // 排除非引用类型基本类型直接返回值 if (typeof target ! object || target null) { return target; } // 判断是数组还是对象创建新容器 const cloneTarget Array.isArray(target) ? [] : {}; // 遍历第一层属性赋值仅拷贝地址/基本值 for (let key in target) { // 只拷贝自身属性排除原型链属性 if (target.hasOwnProperty(key)) { cloneTarget[key] target[key]; } } return cloneTarget; } // 测试 const obj { a: 1, b: [2, 3] }; const cloneObj shallowClone(obj); cloneObj.b.push(4); console.log(obj.b); // [2, 3, 4]验证浅拷贝特性3. 浅拷贝的适用场景仅需拷贝 “单层结构” 的对象 / 数组如 { name: 张三, age: 20 }性能优先无需隔离深层数据如临时修改表层属性数组 / 对象的 “快速复制”如避免直接赋值导致的引用关联。三、深拷贝彻底隔离数据的 “终极方案”1. 深拷贝的定义深拷贝会创建一个全新的对象 / 数组递归拷贝所有层级的属性无论是基本类型还是引用类型新对象与原对象完全隔离修改新对象不会影响原对象。2. 深拷贝的实现方式1简易方案JSON.parse (JSON.stringify ())这是最常用的 “快捷方案”但有明显局限性javascript运行const obj1 { name: 张三, age: 20, hobby: [篮球, 游戏], birthday: new Date(2000-01-01), sayHi: () console.log(hi), reg: /^1[3-9]\d{9}$/, symbol: Symbol(test) }; const obj2 JSON.parse(JSON.stringify(obj1)); console.log(obj2); // 输出结果 // { // name: 张三, // age: 20, // hobby: [篮球, 游戏], // birthday: 2000-01-01T00:00:00.000Z, // Date被转为字符串 // // sayHi、reg、symbol 直接丢失 // }⚠️ JSON 方案的核心缺陷无法拷贝函数、正则、Symbol、BigInt 等特殊类型Date 对象会被转为字符串失去 Date 类型特性无法处理循环引用如 obj.self obj 会直接报错忽略原型链上的属性无法拷贝不可枚举属性。2手动实现深拷贝函数进阶处理边界场景一个 “合格” 的深拷贝函数需要解决递归拷贝、特殊类型处理、循环引用问题。javascript运行function deepClone(target, map new WeakMap()) { // 1. 基本类型/函数直接返回函数无需深拷贝拷贝引用即可 if (typeof target ! object || target null) { return target; } // 2. 处理循环引用避免无限递归 if (map.has(target)) { return map.get(target); } // 3. 处理特殊引用类型 let cloneTarget; // 3.1 处理Date if (target instanceof Date) { cloneTarget new Date(target); map.set(target, cloneTarget); return cloneTarget; } // 3.2 处理RegExp if (target instanceof RegExp) { cloneTarget new RegExp(target.source, target.flags); map.set(target, cloneTarget); return cloneTarget; } // 3.3 处理Array/Object cloneTarget Array.isArray(target) ? [] : {}; // 缓存当前对象解决循环引用 map.set(target, cloneTarget); // 4. 递归拷贝所有层级属性 for (let key in target) { if (target.hasOwnProperty(key)) { cloneTarget[key] deepClone(target[key], map); } } // 5. 处理Symbol属性ES6 const symbolKeys Object.getOwnPropertySymbols(target); for (let symbolKey of symbolKeys) { if (target.hasOwnProperty(symbolKey)) { cloneTarget[symbolKey] deepClone(target[symbolKey], map); } } return cloneTarget; } // 测试覆盖边界场景 const obj { a: 1, b: [2, 3], c: new Date(), d: /abc/g, e: Symbol(test), f: () console.log(test) }; // 模拟循环引用 obj.self obj; const cloneObj deepClone(obj); cloneObj.b.push(4); console.log(obj.b); // [2, 3]深层数据隔离 console.log(cloneObj.c instanceof Date); // trueDate类型保留 console.log(cloneObj.d instanceof RegExp); // trueRegExp类型保留 console.log(cloneObj.self cloneObj); // true循环引用处理正常3成熟方案Lodash.cloneDeep ()生产环境推荐使用 Lodash 的cloneDeep方法 —— 经过海量场景验证处理了所有边界情况javascript运行// 安装npm i lodash const _ require(lodash); const obj { name: 张三, hobby: [篮球, 游戏], reg: /^1[3-9]\d{9}$/, self: obj // 循环引用 }; const cloneObj _.cloneDeep(obj); cloneObj.hobby.push(读书); console.log(obj.hobby); // [篮球, 游戏]完全隔离3. 深拷贝的适用场景需要完全隔离原数据和新数据如表单提交前保留原始值、状态管理中的不可变数据处理多层嵌套的复杂对象如接口返回的嵌套数据 {user: { info: { age: 20} } }避免引用传递导致的 “意外修改”如全局配置对象的拷贝。四、深浅拷贝核心对比维度浅拷贝深拷贝拷贝层级仅第一层所有层级递归拷贝数据隔离表层隔离深层共享引用完全隔离无任何引用关联性能高效仅遍历第一层较低递归遍历所有层级特殊类型处理仅拷贝引用不处理特殊类型可处理 Date/RegExp/Symbol 等循环引用无处理不会报错但共享引用需手动处理否则无限递归适用场景单层结构、性能优先多层结构、数据隔离优先五、避坑指南 最佳实践1. 常见误区❌ 认为 “展开运算符 / Object.assign () 是深拷贝”仅拷贝第一层深层仍共享引用❌ 滥用 JSON.parse (JSON.stringify ())忽略特殊类型丢失的问题❌ 深拷贝函数未处理循环引用导致栈溢出Maximum call stack size exceeded❌ 深拷贝函数未处理 Symbol 属性ES6 场景下数据丢失。2. 性能优化建议非必要不深拷贝浅拷贝能满足的场景优先用浅拷贝如单层对象大数据量深拷贝优先选择 Lodash.cloneDeep手写递归性能较差避免频繁深拷贝可通过 “不可变数据模式”如 Immer 库减少拷贝次数。3. 生产环境选型场景推荐方案单层对象 / 数组展开运算符.../Object.assign ()复杂嵌套对象无特殊类型JSON.parse(JSON.stringify())复杂嵌套对象含特殊类型Lodash.cloneDeep()需自定义拷贝规则手写深拷贝函数扩展逻辑六、总结JS 深浅拷贝的本质是对 “基本类型值传递” 和 “引用类型地址传递” 的补充处理浅拷贝是 “表面功夫”解决第一层数据的隔离性能高但不彻底深拷贝是 “釜底抽薪”递归拷贝所有层级彻底隔离数据但性能成本高。开发中无需盲目追求 “深拷贝”核心是根据场景选择简单场景用浅拷贝兼顾性能复杂场景用成熟的深拷贝方案如 Lodash避免手写函数的边界漏洞始终牢记拷贝的核心目标是 “按需隔离数据”而非 “为了拷贝而拷贝”。吃透深浅拷贝不仅能避开 90% 的 “数据篡改” bug更能理解 JS 数据存储的底层逻辑 —— 这也是从 “初级前端” 到 “中级前端” 的关键一步。编辑分享写一篇 1000 字的关于 JS 深浅拷贝的博客文如何在博客中展示 JS 深浅拷贝的性能分析数据分享一些 JS 深浅拷贝的实际应用案例