ES6中Object.assign()与深拷贝浅拷贝
ES6 object 拷贝 assign
2023-09-11 14:19:18 时间
目录
ES6中Object.assign()与深拷贝浅拷贝
源码点击
1. 浅拷贝
1.1 什么是浅拷贝?
- 拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块同一块空间
- 让几个对象共用一个内存
1.2 Object.assign()
实现浅拷贝
参数
- 参数一:目标对象,拷贝后返回的对象
- 其他参数:源对象,需要拷贝到目标对象的对象
const target = {a:1}
const object1 = {b:2}
const object2 = {c:3}
console.log(Object.assign(target,object1,object2))
/* {a: 1, b: 2, c: 3} */
object1.b = 4
object2.c = 5
Object.assign(target,object1,object2)
console.log(target)
/* {a: 1, b: 4, c: 5} */
1.2.1 对于Object.assign()
的其他说明
- 合并的时候相同的属性名会被替换
const target = {a:1}
const object = {a:'我要干掉你',b:2}
Object.assign(target,object)
console.log(target)
/* {a: "我要干掉你", b: 2} */
- 非对象会处理成对象之后,再做其他操作
- 不能传递
null
和undefined
,因为他们不能转换成基本包装类型
- 不能传递
/* 基本类型的处理 */
const target = Object.assign(3)/* 转化成进本包装类型 */
console.log(target)/* Number {3} */
console.log(typeof 3 ,typeof target)/* number object */
- 对于数组,先转化为普通对象再处理
/* 对于数组的处理 */
console.log(Object.assign([2,3],[7]))/* [7, 3] */
/*
1.先转化成对象 {0:2,1:3} {0:7}
2. 同属性名进行替换
*/
1.2.1 变量引用的方式
let obj = {d:4}
let objCopy = obj
console.log(objCopy)
2. 深拷贝
2.1 什么是深拷贝?
- 克隆出一个对象,数据相同
- 但是引用地址不同
2.2 如何实现深拷贝?
2.2.1 使用JSON
方法
JSON.parse(JSON.stringify(obj))
//JSON.parse(JSON.stringify(obj))
const target = {sun:"wukong"}
const copyObj = JSON.parse(JSON.stringify(target))
console.log(copyObj)/* {sun: "wukong"} */
target.sun = "xingzhe"
console.log(copyObj)/* {sun: "wukong"} */
2.2.2 使用 浅拷贝+ 递归 实现
使用递归的作用是解决,对象的属性仍旧是对象(嵌套的对象)
{a:{b:{c:{d:'d'}}}}
定义函数
/* 使用浅拷贝 + 递归 */
function copyDeep(obj) {
//对于数据类型进行辨别
//1.非对象返回本身
if (!isObject(obj)) return obj
//2.初始化数组或者对象
var target = Array.isArray(obj) ? [] : {}
//对于对象的处理
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
/* 如果属性是一个对象 */
if (isObject(obj[key])) {
target[key] = obj[key]
} else {
target[key] = obj[key]
}
}
}
return target
}
function isObject(obj) {
/* 注意 null 这个特殊的类型 */
return typeof obj === 'object' && obj !== null
}
使用
const target1 = {a:{b:{c:{d:'d'}}}}
const copyObj1 = copyDeep(target1)
console.log(copyObj1)//{a:{b:{c:{d:'d'}}}}
相关文章
- javascript - 你不容错过的es6模板写法
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
- Inside C++ object Model--多态(Object-Oriented)
- ES6数值Number、Object
- ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值
- Es6请求封装
- ES6新特性:增加新类型:Symbol
- 5-es6的模块化开发与其它的不同
- ES6 延展操作符
- ES6+ 解构赋值
- ES6+ Math 对象的扩展
- ES6之Array.find()和findIndex()函数的用法
- 【ES6(2015)】Object对象
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- 小知识随手记(十):多重重复解构对象、es6函数带默认参数时将生成声明作用域、一些注意点、动态设置getter/setter、mysql将字符串字段转为数字排序或比大小、pointer-events:none;属性
- ES6之Object.assign()详解
- 深入理解ES6读书笔记3:函数
- JS ES6中export和import详解