东莞个人网站建设,河南龙王建设集团网站,wordpress棋牌主题,网站修改关键词前言数据类型分为#xff1a;基本数据类型String、Number、Boolean、Null、Undefined、Symbol对象数据类型Object、Array基本数据类型的特点#xff1a;直接存储在栈(stack)中的数据引用数据类型的特点#xff1a;存储的是该对象在栈中引用#xff0c;真实的数据存放在堆内…前言数据类型分为基本数据类型String、Number、Boolean、Null、Undefined、Symbol对象数据类型Object、Array基本数据类型的特点直接存储在栈(stack)中的数据引用数据类型的特点存储的是该对象在栈中引用真实的数据存放在堆内存里引用数据类型在栈中存储了指针该指针指向堆中该实体的起始地址。当解释器寻找引用值时会首先检索其在栈中的地址取得地址后从堆中获得实体。深拷贝与浅拷贝深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。浅拷贝只复制指向某个对象的指针而不复制对象本身新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象新对象跟原对象不共享内存修改新对象不会改到原对象。赋值是深拷贝还是浅拷贝当我们把一个对象赋值给一个新的变量时赋的其实是该对象的在栈中的地址而不是堆中的数据。也就是两个对象指向的是同一个存储空间无论哪个对象发生改变其实都是改变的存储空间的内容因此两个对象是联动的。浅拷贝是按位拷贝对象它会创建一个新对象这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型拷贝的就是基本类型的值如果属性是内存地址引用类型拷贝的就是内存地址 因此如果其中一个对象改变了这个地址就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)即只复制对象空间而不复制资源。直接赋值var origin {db:{id:001},num:33,read:[1,2,3,4]}
var data origin;
origin.num 10;origin.read [1,2];
origin.db.id 002;origin.db {text:aaa}那么浅拷贝跟赋值会是一样的吗浅拷贝假设我们有个浅拷贝的方法叫shallowCopy。具体的浅拷贝的方法请看本文的附录-浅拷贝方法var origin {db:{id:001},num:33,read:[1,2,3,4]}
var data shallowCopy(origin);origin.num 10;origin.read[0] 10;origin.db.id 003于是我们可以说赋值的话旧对象的改变一定会引起新对象的改变无论在一层或N层为什么要份第一层还是第N层我们来看这个梨子const data {arr:[1,2,3],inner:{arr:[3,4,5]}}
const data2 shallowCopy(data)
data.arr [0,0,0];data.inner.arr [0,0,0]可以看到浅拷贝后第一层引用对象不关联。具体见附录-浅拷贝面试题深拷贝方法可以看到深拷贝后的结果与源数据是两个完全独立的数据。深拷贝方法实现一、 通过JSON.stringify()var a {data:{name:xxx}}
var b JSON.parse(JSON.stringify(a))
b; // {data:{name:xxx}}
a.data.name abc;
b // {data:{name:xxx}}JSON.stringify()进行深拷贝有弊端var obj {a:function(){}, b: undefined, c: null, d: Symbol(s), }
var cloneObj JSON.parse(JSON.stringify(obj ))
cloneObj // {c:null}会忽略value为function, undefind, symbol, 并且在序列化BigInt时会抛出语法错误TypeError: Do not know how to serialize a BigInt更多弊端请看本文附录-JSON.parse(JSON.stringfy(对象))弊端二、函数库lodash该函数库也有提供_.cloneDeep用来做 Deep Copy三、手写递归递归方法实现深度克隆原理遍历对象、数组直到里边都是基本数据类型然后再去复制就是深度拷贝附录-浅拷贝方法一、手写浅拷贝// 数组 对象都可以用
const shallowClone (obj) {const dst {};for (let prop in obj) {if (arr.hasOwnProperty(prop)) {dst[prop] obj[prop];}}return dst;
}for...in遍历 Object 对象 obj将可枚举值列举出来。hasOwnProperty()检查该枚举值是否属于该对象 obj如果是继承过来的就去掉如果是自身的则进行拷贝。二、Object.assign()Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象然后返回目标对象。但是 Object.assign()进行的是浅拷贝拷贝的是对象的属性的引用而不是对象本身。var obj {data:{name:xxx}}
var newCloneObj Object.assign({},obj)
obj.data.name ddd
newCloneObj.data.name// ddd三、ES6的拓展运算符var obj {data:{name:xxx}}
var newCloneObj {...obj}
obj.data.name ddd
newCloneObj.data.name // ddd四、Object.createObject.create()方法创建一个新对象使用现有的对象来提供新创建的对象的__proto__。Object.create(proto[propertiesObject])接收两个参数一个是新创建对象的__proto__ 一个属性列表let aa {a: undefined, func: function(){console.log(1)}, b:2, c: {x: xxx, xx: undefined},
}
let bb Object.create(aa, Object.getOwnPropertyDescriptors(aa))五、Array.prototype.concat()concat() 是数组的一个内置方法用户合并两个或者多个数组。这个方法不会改变现有数组而是返回一个新数组。const arr1 [1,{username: jsliang,},
];let arr2 arr1.concat();
arr2[0] 2;
arr2[1].username LiangJunrong;
console.log(arr1);
// [ 1, { username: LiangJunrong } ]
console.log(arr2);
// [ 2, { username: LiangJunrong } ]六、Array.prototype.slice()slice() 也是数组的一个内置方法该方法会返回一个新的对象。slice() 不会改变原数组。const arr1 [1,{username: jsliang,},
];let arr2 arr1.slice();
arr2[0] 2;
arr2[1].username LiangJunrong;
console.log(arr1);
// [ 1, { username: LiangJunrong } ]
console.log(arr2);
// [ 2, { username: LiangJunrong } ]附录-浅拷贝面试题我们先来看看const data {arr:[1,2,3],inner:{arr:[3,4,5]}}
const data2 shallowCopy(data)data.arr[0] 3data.arr [0,0,0]data.arr[0] 3继上面的内容我们先解析一下:不论变量是存在栈内还是存在堆里反正都是在内存里其结构和存值方式是差不多的都有如下的结构let foo 1;
let bar 2;我们新建data2当我们第一次修改源数据data.arr[0]相对于我们去修改堆空间里对应内存地址的值。而不是开劈新的内存空间进行存值。堆空间里基本数据类型的替换将沿用原来的内存地址如果引用类型的替换则将开辟新的内存地址等待回收老的内存地址【不一定会回收因为可能被其他引用】此时并不会改变data和data2里arr的引用地址。所以data和data2同步关联。第二次修改源数据data.arr [0,0,0]可以看到的是堆里新开辟了一个空间放引用对象arr的内容。同时解绑data.arr的引用地址把新空间的地址绑定到data.arr上而data2.arr由于还是指向0x0206的内存空间所以旧的内存空间没有被收回。data2.arr未发生改变再回归到问题本身为什么data.inner.arr [0,0,0]会同时改变data和data2里面的值你可以看到data和data2的inner即第二层都是指向同一个内存空间当我们去改变inner对象内容里面的赋值的时候data和data2的inner指向地址不变只不过里面的arr我们会重新读值。使得两者改动时发生关联。所以我们说无论浅拷贝通过什么方法实现拷贝结果的第一层会是深拷贝两个内存空间附录-JSON.parse(JSON.stringfy(对象))弊端如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后时间对象变成了字符串。如果obj里有RegExp、Error对象则序列化的结果将只得到空对象。如果obj里有函数undefined则序列化的结果会把函数 undefined丢失。如果obj里有NaN、Infinity和-Infinity则序列化的结果会变成null。JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的 则使用JSON.parse(JSON.stringify(obj))深拷贝后会丢弃对象的constructor。如果对象中存在循环引用的情况也无法正确实现深拷贝。function Person (name) {this.name 20
}const lili new Person(lili)let a {data0: 1,date1: [new Date(2020-03-01), new Date(2020-03-05)],data2: new RegExp(\\w),data3: new Error(1),data4: undefined,data5: function () {console.log(1)},data6: NaN,data7: lili
}let b JSON.parse(JSON.stringify(a))
