zoukankan      html  css  js  c++  java
  • JavaScript克隆一个对象

    js克隆一个对象

    对象类型在赋值的过程中其实是复制了地址,所以如果改变了一方,其他都会被改变。那么如何克隆一个对象呢?

    一、Object.assign

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

    二、… 运算符

    function copy(obj) {
        return { …obj }
    }
    
    方法一, 方法二 是浅拷贝,也就是当对象层级大于2层时,复制到的还是地址信息
    let a = { age:1,
             jobs: { first: 'tom' } 
            }
    
    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

    五、lodash

    // 深拷贝
    import { cloneDeep, clone } from 'lodash'
    
    var objects = [{ 'a': 1 }, { 'b': 2 }]
     
    var deep = cloneDeep(objects)
    console.log(deep[0] === objects[0])
    // => false
    
    // 浅拷贝
    var shallow = clone(objects)
    console.log(shallow[0] === objects[0])
    // => true
    

    注意: 这个clone方法参考自structured clone algorithm 以及支持 arrays、array buffers、 booleans、 date objects、maps、 numbers, Object 对象, regexes, sets, strings, symbols, 以及 typed arrays。 arguments对象的可枚举属性会拷贝为普通对象。 一些不可拷贝的对象,例如error objects、functions, DOM nodes, 以及 WeakMaps 会返回空对象。

  • 相关阅读:
    WCF实现上传图片功能
    C#中String.Empty、NULL与""三者的区别
    C#中equal与==的区别
    static 关键字的使用,静态和非静态类的区别
    C#索引器
    C# 接口的隐式与显示实现说明
    Python文件处理
    Python3.X与urllib
    python中if __name__ == '__main__'
    Python中的random模块
  • 原文地址:https://www.cnblogs.com/codebook/p/15379984.html
Copyright © 2011-2022 走看看