JavaScript深浅拷贝的几种方式

文章目录

  • 前言
  • 深拷贝
      • [1. JSON.parse(JSON.strigify(Str))](#1. JSON.parse(JSON.strigify(Str)))
      • [2. lodash.deepclone](#2. lodash.deepclone)
      • [3. structuredClone](#3. structuredClone)
  • 浅拷贝
  • 总结

前言

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

深拷贝

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

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

   传输(例如 如果请求的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

3. structuredClone

js 复制代码
const original = { name: "MDN" };
original.itself = original;

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

浅拷贝

js 复制代码
let arr = [{name:'bruce'},1,2,3]

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

let newArr2 = [...arr]

Object.assign()

总结

以上就是今天的内容了,JavaScript深浅拷贝的几种方式

相关推荐
路弥行至3 分钟前
linux运行脚本出现错误信息 /bin/bash^M: bad interpreter解决方法
linux·运维·开发语言·经验分享·笔记·其他·bash
一直不明飞行4 分钟前
C++ pari使用的两个注意事项
开发语言·c++
夫唯不争,故无尤也7 分钟前
原始文档元数据metadata
java·前端·javascript·sql
wefly20178 分钟前
无需安装的 M3U8 在线播放器,快速实现 HLS 流预览与调试
java·开发语言·python·开发工具
飞Link8 分钟前
深度解析:建模动作序列(Action Sequence Modeling)的实战指南
开发语言·python·数据挖掘
CoderCodingNo8 分钟前
【GESP】C++六级/五级练习题 luogu-P1323 删数问题
开发语言·c++·算法
We་ct12 分钟前
LeetCode 211. 添加与搜索单词 - 数据结构设计:字典树+DFS解法详解
开发语言·前端·数据结构·算法·leetcode·typescript·深度优先
小二·12 分钟前
Go 语言系统编程与云原生开发实战(第33篇)
开发语言·云原生·golang
格林威15 分钟前
工业相机图像高速存储(C#版):先存内存,后批量转存方法,附海康相机实战代码!
开发语言·人工智能·数码相机·计算机视觉·c#·视觉检测·海康相机
xuansec17 分钟前
【JavaEE安全】Java第三方组件安全漏洞(Log4J JNDI/FastJson 反射)
java·安全·java-ee