我们知道,对象类型在赋值的过程中其实是复制了地址,所以如果改变了一方,其他都会被改变。我们应该如何克隆一个对象,并且避免这种现象的发生呢?

方法一:Object.assign

function copy(obj){
return Object.assign({}, obj);
}

方法二:…展开运算符

function copy(obj){
return { …obj };
}
方法一,方法二是浅拷贝,也就是当对象层级大于2层时,复制到的还是地址信息
let a = {age:1,
jobs: {first:'FE’}
}
let b = copy(a)
a.jobs.first =‘native'
console.log(b.jobs.first)// native

方法三:JSON

function copy(obj){
return JSON.parse(JSON.stringify( obj ));
}
  • 会忽略undefined,fn
  • 不能序列化函数
  • 不能解决循环引用的对象

方法四:MessageChannel

function structuralClone(){
return new Promise(resolve =>{
const {port1,port2} = new MessageChannel()
port2.onmessage = ev => resolve(ev.data)
port1.postMessage(obj)
})
}
obj2 = await structuralClone(obj1);
  • 如果对象中有函数,会报错
  • 可以解决循环引用的对象
  • 异步 await

js克隆一个对象的更多相关文章

  1. 使用js判断一个对象是否为空 比如 obj={}

    今天使用到js判断一个对象是否为空,js没有封装好的方法,这里最好的办法就是使用jquery里面的封装好的方法 $.isEmptyObject(obj)

  2. javascript克隆一个对象

    /* * 克隆一个对象 */ com.ty.repairtech.JsonOperation.clone = function(obj) { // Handle the 3 simple types, ...

  3. js 克隆数组

    js克隆数组 1.遍历push 2.slice const a1 = [1, 2];const a2 = a1.slice() 3.concat() const a2 = a1.concat(); a ...

  4. 如何用js判断一个对象是不是Array

    .如何用js判断一个对象是不是Array 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...

  5. js实现克隆一个对象

    var app={}; app.cloneobj= function(obj){ var o; if(typeof obj == "object"){ if(obj===null) ...

  6. js克隆

    一.有什么用 不破坏原对象的属性 引入一些概念~ 原始数据类型(5种):undefined.null.number.string.boolean 引用数据类型(1种,也叫复合数据类型):object ...

  7. js判断一个对象{}是否为空对象,没有任何属性

    // js如何判断一个对象{}是否为空对象,没有任何属性 if (typeof model.rows === "object" && !(model.rows in ...

  8. JS 克隆Object.prototype.Clone

    我们知道,在js中,当object作为参数传递到函数中进行处理后,实际上是修改了传入的对象本身(或者说是对象的引用),但很多时候我们并不希望函数去修改我们的这些对象参数,这就需要使用到对象的克隆,我们 ...

  9. js new一个对象的过程,实现一个简单的new方法

    对于大部分前端开发者而言,new一个构造函数或类得到对应实例,是非常普遍的操作了.下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程. // ES5构造函数 let Parent ...

随机推荐

  1. GCC中 -I、-L、-l 选项的作用

    在makefile中经常会看到这些选项,gcc默认会在程序当前目录.path路径中查找所需要的材料 如何给gcc添加我们自己的原材料(头文件,库等) -I (注意是大写的i) 给gcc添加自定义的头文 ...

  2. JMeter CSRFToken认证登陆(正则提取器的使用)

    转自:http://blog.csdn.net/lion19930924/article/details/51189210 前几天用JMeter模拟登陆,但是这个网站开启了csrf认证,因此在post ...

  3. poj1505(二分+贪心)

    "最大值尽量小"是一种很常见的优化目标. 关乎于炒书. 题目见此: http://poj.org/problem?id=1505 我的copy的代码如下: #include< ...

  4. Go_sqlx和占位符

    sqlx使用 第三方库sqlx能够简化操作,提高开发效率. 安装 go get github.com/jmoiron/sqlx package main import ( "fmt" ...

  5. pycharm2019.3安装以及激活

    最近很多的pycharm激活过期的,小伙伴们问我pycharm要怎么激活?这里就分享一下pycharm最新版本的安装以及激活吧!!! 首先先去官网(https://www.jetbrains.com/ ...

  6. CSS之浮动布局及相关问题

    CSS之浮动布局及相关问题   1.什么是浮动:       在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...

  7. td标签内容:换行和不换行设置

    td标签内容:换行和不换行设置 固定td内容不换行:<td style="white-space:nowrap">内容</td>或<td nowrap ...

  8. 使用maven构建项目时,SSM和springboot项目的打包与云服务器部署

    下面讲讲如何打包SSM和springboot项目,并部署到云服务器上. 由于使用的IDE不同,有的使用eclipse,有的使用idea,所以如果在IDE中按照 maven clean 再 maven ...

  9. JVM的方法区和永久带是什么关系?

    什么是方法区? 方法区(Method Area)是jvm规范里面的运行时数据区的一个组成部分,jvm规范中的运行时数据区还包含了:pc寄存器.虚拟机栈.堆.方法区.运行时常量池.本地方法栈. 方法区存 ...

  10. 思科ACS的性能总结

    ACS Performance & Scale 思科ACS目前还能支持的可能就是ACS5.8版本了,该版本也将于2020年停止支持,关于ACS信息会逐步退出大家的视野.该文档是Cisco论坛t ...