前端深浅拷贝各有哪些方法,优缺点


深浅拷贝主要是针对于引用类型而言的

一、深拷贝

1. JSON.parse(JSON.strigify(Str))

   序列化的作用是存储(对象本身存储的只是一个地址映射,如果断电,对象将不复存在,
   因此需将对象的内容转换成字符串的形式再保存在磁盘上 ).

   传输(例如 如果请求的Content-Type 是 application/x-www-form-urlencoded,
   则前端这边需要使用qs.stringify(data)来序列化参数再传给后端,否则后端接受不到;

JSON.stringify()

该方法用于将一个字转换为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原。

  • 对于原始类型的字符串,转换结果会带双引号
  • 如果要转换的对象的属性是undefined,函数或xml对象,该属性会被JSON.stringify()过滤
  • 如果要转换的数组中有undefined和函数,他们都会转换为null
  • 正则对象会被转换成空对象
  • 会忽略对象的不可遍历的属性
  • JSON.stringify()方法还可以接受一个数组,作为第二个参数,指定参数对象的哪些属性需要转成字符串,第二个参数还可以是一个函数,用来更改JSON.stringify()的返回值。
  • JSON.stringify()还可以接受第三个参数,用于增加返回的 JSON 字符串的可读性。比如加入‘\t’
  • 如果参数对象有自定义的toJSON()方法,那么JSON.stringify()会使用这个方法的返回值作为参数,而忽略原对象的其他属性。

JSON.parse()

  • JSON.parse()方法用于将 JSON 字符串转换成对应的值。
  • 如果传入的字符串不是有效的 JSON 格式,JSON.parse()方法将报错。
  • JSON.parse()方法可以接受一个处理函数,作为第二个参数,用法与JSON.stringify()方法类似

2. lodash.deepclone

引入lodash 工具库,调用 deepclone 进行深拷贝

3. structuredClone

const original = {
    name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone(original);

二、浅拷贝

let arr = [{
   name:'bruce'},1,2,3]

let newArr = arr.slice()
// 由于数组内部属性值为引用对象,因此使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,
// 拷贝之后数组各个值的指针还是指向相同的存储地址。

let newArr2 = [...arr]

Object.assign()


总结

本文列举深浅拷贝的几种方法

相关推荐

  1. 前端深浅拷贝哪些方法,优缺点

    2023-12-17 03:08:02       60 阅读
  2. 前端框架、优缺点及应用场景

    2023-12-17 03:08:02       42 阅读
  3. 前端错误监控的方法哪些

    2023-12-17 03:08:02       37 阅读
  4. MySQL索引哪些优缺点

    2023-12-17 03:08:02       61 阅读
  5. SpringBoot哪些优缺点

    2023-12-17 03:08:02       39 阅读
  6. ajax的优缺点哪些

    2023-12-17 03:08:02       38 阅读
  7. 前端深度的技术哪些

    2023-12-17 03:08:02       32 阅读
  8. 前端下载文件哪些方式

    2023-12-17 03:08:02       53 阅读
  9. ElasticSearch是什么?哪些应用?哪些优缺点

    2023-12-17 03:08:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-17 03:08:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-17 03:08:02       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-17 03:08:02       82 阅读
  4. Python语言-面向对象

    2023-12-17 03:08:02       91 阅读

热门阅读

  1. 二维数组——特征匹配(c++)

    2023-12-17 03:08:02       56 阅读
  2. 最流行的视频创作者

    2023-12-17 03:08:02       55 阅读
  3. 第12课 SQL入门之联结表

    2023-12-17 03:08:02       58 阅读
  4. Elasticsearch 8.9 search命令执行查询源码

    2023-12-17 03:08:02       49 阅读
  5. gitee推荐-粤语编程

    2023-12-17 03:08:02       68 阅读
  6. Lua学习笔记 — Table与Metatable(超详细)

    2023-12-17 03:08:02       59 阅读