网站优化顺义案例,成都市建设局官方网站,珠海网站友情链接,网上购物系统的设计与实现论文structuredClone 简介
structuredClone 是现代浏览器提供的原生 JavaScript 方法#xff0c;用于深拷贝对象。它可以处理各种复杂数据结构#xff0c;包括嵌套对象、数组、Date、Map、Set 等#xff0c;且支持循环引用。 语法
const clone structuredClone(value);value:…structuredClone 简介
structuredClone 是现代浏览器提供的原生 JavaScript 方法用于深拷贝对象。它可以处理各种复杂数据结构包括嵌套对象、数组、Date、Map、Set 等且支持循环引用。 语法
const clone structuredClone(value);value: 需要深拷贝的值可以是任何支持的 JavaScript数据结构。返回值是完全独立的深拷贝对象。 支持的类型
structuredClone 支持多种类型包括
基本数据类型: string, number, boolean, null, undefined, Symbol复杂对象: Object, Array, Date, Map, Set, ArrayBuffer, TypedArray循环引用: 能正确处理循环引用的结构。 示例
基本对象深拷贝
const obj { a: 1, b: { c: 2 } };
const deepCopy structuredClone(obj);deepCopy.b.c 42;
console.log(obj.b.c); // 输出 2原对象未受影响处理数组
const arr [1, [2, 3], 4];
const deepCopy structuredClone(arr);deepCopy[1][0] 42;
console.log(arr[1][0]); // 输出 2原数组未受影响支持循环引用
const obj { a: 1 };
obj.self obj; // 创建循环引用const deepCopy structuredClone(obj);
console.log(deepCopy.self deepCopy); // 输出 true循环引用也被正确复制拷贝特殊对象
const special {date: new Date(),map: new Map([[key, value]]),set: new Set([1, 2, 3])
};const deepCopy structuredClone(special);console.log(deepCopy.date special.date); // 输出 false完全独立
console.log(deepCopy.map.get(key)); // 输出 value
console.log(deepCopy.set.has(1)); // 输出 true无法拷贝的类型
以下类型的值不支持 structuredClone会抛出异常
函数 (Function)DOM 节点类实例例如自定义类对象
const fn { a: () {} };
structuredClone(fn); // 抛出异常Uncaught DOMException优势
原生支持不需要第三方库。性能优化相比于 JSON.parse(JSON.stringify) 更快更安全。更多支持的类型支持 Date、Map、Set、循环引用等复杂结构。不受 JSON 限制能够处理 undefined 和特殊对象。 局限性
不支持拷贝函数、DOM 节点、自定义类实例。需要现代浏览器支持较老的环境中不可用。 浏览器兼容性
structuredClone 是现代浏览器如 Chrome 98、Edge 98、Firefox 94中才支持的 API。如果需要在不支持 structuredClone 的环境中使用可以考虑手动实现深拷贝或使用第三方库如 Lodash 的 cloneDeep。 总结
structuredClone 是深拷贝对象和数据结构的最佳原生解决方案之一。对于现代开发者来说它是一个便捷且性能优越的工具尤其是在处理复杂对象和循环引用时。
