JavaScript克隆一个对象
JavaScript对象 一个 克隆
2023-09-11 14:15:07 时间
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 会返回空对象。
相关文章
- JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈
- javaScript数组和对象相互转换
- 每日一学—JavaScript Number对象
- 每日一学—JavaScript Math对象
- 关于JavaScript面向对象中构造函数和原型对象的学习与理解
- JavaScript - 根据对象数组中某一属性删除该项(根据数组对象属性删除里面的对象)
- JavaScript - 获取数组最后一个元素(支持一维数组与二维复杂对象数组)多种方法取数组的最后一个元素
- JavaScript - 判断一个 Object 对象是否为空(5 种方案)
- how to optimize javascript performance
- Javascript 笔记与总结(2-3)Javascript 运算符、控制结构与对象操作
- 《JavaScript设计模式》——1.3 用对象收编变量
- 《JavaScript设计模式》——导读
- 前端模板引擎artTemplate---高性能JavaScript模板引擎
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
- JavaScript--基于对象的脚本语言学习笔记(一)
- 【javascript】如何在Javascript中创造map对象?
- javaScript遍历对象、数组总结(转载)
- JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法
- 深入理解JavaScript系列(34):设计模式之命令模式
- 浅入javascript正则表达式的规则.
- javascript的冻结对象之freeze(),isFrozen()方法