JS 采用JSON.parse实现深拷贝时出现的问题?

使用 JSON.parse(JSON.stringify()) 实现深拷贝是一种简单易用的方法,但也存在以下缺点:

1. 无法处理函数和 undefined

JSON.stringify() 方法无法处理 JavaScript 中的函数和 undefined 值,这些值会被忽略掉,因此在使用该方法时需要注意。

javascript 复制代码
let obj = {
  name: 'wyc',
  age: undefined,
  foo: function() {
    console.log('我是foo');
  },
}
let obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj);
console.log(obj2);

2. 无法处理循环引用

如果原始对象中存在循环引用,即对象的某个属性引用了该对象本身,使用该方法就会抛出 TypeError 异常。

javascript 复制代码
const obj = {
  a: 1,
  b: {
    c: 2
  }
};
obj.d = obj;
 
// 报错:TypeError: Converting circular structure to JSO
console.log(JSON.parse(JSON.stringify(obj)));

3. 无法处理一些特殊对象

JSON.stringify() 方法无法处理某些特殊的 JavaScript 对象,如 RegExp、Error、Date 等,这些对象会被转换成空对象。

javascript 复制代码
const obj = {
  a: /abc/,
  b: new Error('error'),
  c: new Date()
};
 
const newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj); // { a: {}, b: {}, c: '2022-02-22T12:34:56.000Z' }

4. 对象的原型链上的属性会丢失

如果原始对象的某个属性是通过原型链继承的,那么使用该方法得到的新对象会丢失该属性。

javascript 复制代码
function Person(name) {
  this.name = name;
}
 
Person.prototype.sayHi = function() {
  console.log(`Hi, I'm ${this.name}`);
};
 
const obj = new Person('Tom');
const newObj = JSON.parse(JSON.stringify(obj));
 
newObj.sayHi(); // 报错:Uncaught TypeError: newObj.sayHi is not a function

综上,虽然 JSON.parse(JSON.stringify()) 方法是一种简单易用的实现深拷贝的方法,但它并不完美,使用时需要注意其缺陷。对于需要处理函数、循环引用等复杂情况的对象,可以使用其他方法来实现深拷贝。

相关推荐
咬人喵喵9 分钟前
CSS Flexbox:拥有魔法的排版盒子
前端·css
LYFlied10 分钟前
TS-Loader 源码解析与自定义 Webpack Loader 开发指南
前端·webpack·node.js·编译·打包
yzp011212 分钟前
css收集
前端·css
暴富的Tdy12 分钟前
【Webpack 的核心应用场景】
前端·webpack·node.js
遇见很ok12 分钟前
Web Worker
前端·javascript·vue.js
elangyipi12313 分钟前
JavaScript 高级错误处理与 Chrome 调试艺术
开发语言·javascript·chrome
风舞红枫15 分钟前
前端可配置权限规则案例
前端
前端不太难17 分钟前
RN Navigation vs Vue Router:从架构底层到工程实践的深度对比
javascript·vue.js·架构
zhougl99625 分钟前
前端模块化
前端
暴富暴富暴富啦啦啦41 分钟前
Map 缓存和拿取
前端·javascript·缓存