浅拷贝和深拷贝的应用

说到这个其实要引申出一个知识点,那便是存储类型,简单来说分为值类型(又名 原始类型,六种 → string,number,null,undefined,boolean,symbol(不重复得值))和引用类型(又名 对象类型 例如 function,Array)

其中常见值类型有String、Number、Boolean、引用类型有function、Array

引用类型有this指针指向问题、所以本次说的浅深拷贝也是指引用类型

具体可以在本博客  输入关键词  js变量按照存储方式区分 搜索

浅拷贝 可以通过Object.assign来解决这个问题 或者 运用 展开运算符(...)来解决

 let test = {
    name:'zachary'
 }
 let demo = test
 test.name = 'changes'
 // 其实 demo 并没有变值 但确实 被test再次赋值给带跑偏了
 console.log(demo) // changes
 console.log(test) //changes
 let test = {
    name:'zachary'
 }
 //let demo = Object.assign({},test)
 let demo = {...test}
 test.name = 'changes'

 console.log(demo) // zachary
 console.log(test) //changes 

 如果是数组也可以这么用 只不过要把{} 改成[]

 let test = [1,2,3]
 let demo = Object.assign([],test)
// let demo = [...test] test.push('changes')
console.log(demo) // [1, 2, 3] console.log(test) //[1, 2, 3, "changes"]

深拷贝通过将对象转换成字符串,之后再将它反序列化成对象 用代码表示就是 JSON.parse(JSON.stringify())

let map = {
    city:'重庆市',
    province:{
        jangxi:'江西省'
    }
}
// let cloneMap = {...map}  对于深拷贝无效
// let cloneMap = Object.assign({},map) 对于深拷贝无效
let cloneMap = JSON.parse(JSON.stringify(map)) cloneMap.province.jangxi='changes'
console.log(cloneMap) //jangxi:changes console.log(map)//jiangxi:'江西省'

此方法的深拷贝缺陷说明

会忽略 undefined
不能序列化函数
不能解决循环引用的对象

但是在通常情况下,复杂数据都是可以序列化的,所以这个函数可以解决大部分问题,并且该函数是内置函数中处理深拷贝性能最快的

使用lodash

import lodash from 'lodash'

lodash.cloneDeep(objects)

 

posted @ 2018-12-10 00:47  Model-Zachary  阅读(444)  评论(0编辑  收藏  举报