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

方法一: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. 3ds Max File Format (Part 2: The first inner structures; DllDirectory, ClassDirectory3)

    Now that we understand the outer structure of the file, it's time to look closer to what's inside. T ...

  2. BUUCTF [SUCTF 2019]EasySQL

    首先打开网址 发现有三种显示方法 还有一个没有输出 可以堆叠注入 1;show databases; 1;show tables; 可以看到有一个Flag表 测试发现from flag都被过滤不能直接 ...

  3. Python之路Day01

    一.Python简介 Python的历史 Python 2.4 - November 30, 2004, 同年目前最流行的WEB框架Django 诞生 In November 2014, it was ...

  4. linux中的oracle数据库

    安装orcal http://www.cnblogs.com/nucdy/p/5603998.html 搭建Linux操作系统+Oracle数据库的环境 https://blog.csdn.net/p ...

  5. java fastjson:Map与json以及JSONObject ,JSONObject与String互转

    import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson ...

  6. 第三十六篇 入门机器学习——Jupyter Notebook中的魔法命令

        No.1.魔法命令的基本形式是:%命令   No.2.运行脚本文件的命令:%run %run 脚本文件的地址 %run C:\Users\Jie\Desktop\hello.py # 脚本一旦 ...

  7. 2020年国外PhD申请QQ群907928541

    2020年申请国外读博的 可以加QQ群:907928541 供大家学习交流套磁!

  8. 【译】从 Rust 到不只是 Rust:PHP 语言领域

    From Rust to beyond: The PHP galaxy 译文 原文地址:https://mnt.io/2018/10/29/from-rust-to-beyond-the-php-ga ...

  9. argmax( )

    argmax是一种函数,是对函数求参数(集合)的函数. 当我们有另一个函数y=f(x)时,若有结果x0= argmax(f(x)),则表示当函数f(x)取x=x0的时候,得到f(x)取值范围的最大值: ...

  10. 洛谷P1118 [USACO06FEB]数字三角形`Backward Digit Su`…

    #include<iostream> using namespace std ; ; int y[N][N]; int n; int a[N]; bool st[N]; int sum; ...