JavaScript基础系列(四) 深拷贝与浅拷贝

---

theme: scrolls-light

highlight: atelier-seaside-dark

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

浅拷贝

• 浅拷贝是指创建一个新的数据 这个数据有原始属性值得拷贝
• 基本类型 拷贝的就是基本类型得值
• 引用类型 拷贝的是内存地址

js // 实现一个简单的浅拷贝 let clone = (obj) => { let newObj = {} for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj[prop] = obj[prop] } } return newObj } + 存在浅拷贝现象的有 + Object.assign + 用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象

```js let obj = { a:1 b:2 }

let objs = Object.assign({}, obj) // {a:1,b:2}

```

• slice
• 返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝

js let arr = [1,2,3] let arr1 = arr.slice(0) // [1,2,3] arr1[0] = 6 arr // [6,2,3] arr1 // [1,2,3]

• concat
• 用于合并多个数组 返回一个新数组 不会改变原数组

js let arr = [1,2,3] let arr1 = arr.concat() // [1,2,3] arr1[0] = 6 arr1 //[6,2,3] arr //[1,2,3] + 扩展运算符 ...

js let arr = [1,2,3] let arr1 = [...arr] arr1[0] = 6 arr1 // [6,2,3] arr //[1,2,3]

深拷贝

• 深拷贝开辟一个新的栈 对应两个不同地址
• 常见深拷贝
• _.cloneDeep()

js let _ = require('lodash') let obj = { a:1 b:{c:1} } let obj2 = _.cloneDeep(obj) console.log(obj.b.c == obj1.b.c) // false + JSON.stringify + 将一个 JavaScript 对象或值转换为 JSON 字符串 + 会忽略 undefined symbol 和 函数

js let obj = {a:1} let obj1 = JSON.stringify(obj) // '{"a":1}'

手写一个深拷贝

js let cloneDeep = (obj,hash = new WeakMap()) => { // 如果obj是null或者undefined 不进行拷贝操作直接返回 if(obj === null) return obj // 如果obj是在某个实例对象的原型上 直接返回处理后的obj if(obj instanceof Date) return new Date(obj) if(obj instanceof RegExp) return new RegExp(obj) // 如果是函数不需要深拷贝 if(typeof obj !== "object" ) return obj // 对象进行深拷贝 返回  WeakMap 指定的元素 if(hash.get(obj)) return hash.get(obj) let cloneObj = new obj.constructor() // 找到所属类原型上的constructor hash.set(obj,cloneObj) for (let key in obj) { if(obj.hasOwnProperty(key)){ // 实现一个递归拷贝 cloneObj[key] = cloneDeep(obj[key],hash) } } return cloneObj }

总结

• 今日份小知识get~