建站
咨詢
售后
建站咨詢
新聞中心
一.JS中淺拷貝的手段有哪些？
10多年的八公山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整八公山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“八公山網(wǎng)站設(shè)計(jì)”,“八公山網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
1.什么是拷貝？
我們來看下面一個(gè)例子，幫助大家區(qū)分賦值與拷貝的區(qū)別：
- let arr = [1, 2, 3];
- let newArr = arr;
- newArr[0] = 100;
- console.log(arr); // [100, 2, 3]
這是直接賦值的情況，不涉及任何拷貝。當(dāng)改變newArr的時(shí)候，由于是同一個(gè)引用，arr指向的值也跟著改變。
現(xiàn)在進(jìn)行淺拷貝：
- let arr = [1, 2, 3];
- let newArr = arr.slice();
- newArr[0] = 100;
- console.log(arr); //[1, 2, 3]
當(dāng)我們修改newArr的時(shí)候，arr的值并不改變，這是因?yàn)閚ewArr是arr淺拷貝后的結(jié)果，newArr和arr現(xiàn)在是兩個(gè)不同的引用地址了。
但我們?cè)賮砜匆粋€(gè)潛在的問題：
- let arr = [1, 2, {val: 4}];
- let newArr = arr.slice();
- newArr[2].val = 1000;
- console.log(arr);//[ 1, 2, { val: 1000 } ]
這里我們明顯看到，淺拷貝雖然只能復(fù)制一層內(nèi)容。但如果復(fù)制的第一層內(nèi)容中，有復(fù)雜數(shù)據(jù)類型(數(shù)組/對(duì)象)，那么淺拷貝將失效，這也是淺拷貝最大的限制所在了。
但幸運(yùn)的是，深拷貝就是為了解決這個(gè)問題而生的，它能解決無限層級(jí)的對(duì)象嵌套問題，實(shí)現(xiàn)徹底的拷貝。深拷貝我們?cè)谙乱坏李}中介紹。
接下來，我們來歸納一下JS中實(shí)現(xiàn)的淺拷貝都有哪些方法呢？
2.手動(dòng)實(shí)現(xiàn)
- const shallClone = (target) => {
- if (typeof target === 'object' && target !== null) {
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(prop)) { // 遍歷對(duì)象自身可枚舉屬性（不考慮繼承屬性和原型對(duì)象）
- cloneTarget[prop] = target[prop];
- }
- return cloneTarget;
- } else {
- return target;
- }
- }
3.Object.assign
但是需要注意的是，Object.assgin() 拷貝的是對(duì)象的屬性的引用，而不是對(duì)象本身。
- let obj = { name: 'sy', age: 18 };
- const obj2 = Object.assign({}, obj, {Newname: 'sss'});
- console.log(obj2); // {name: "sy", age: 18, Newname: "sss"}
4.concat()淺拷貝數(shù)組
- let arr = [1, 2, 3];
- let newArr = arr.concat();
- newArr[1] = 100;
- console.log(arr); //[ 1, 2, 3 ]
5.slice()淺拷貝
開頭例子就是！！
6. ...展開運(yùn)算符
- let arr = [1, 2, 3];
- let newArr = [...arr]; //跟arr.slice()是一樣的效果
二.JS中深拷貝的手段有哪些？
在實(shí)現(xiàn)一個(gè)完整版的深拷貝函數(shù)之前，看看有沒有某個(gè)api能幫助我們完成深拷貝？
1.api版-簡(jiǎn)易版
- JSON.parse(JSON.stringify());
從下面例子中，我們可以看出簡(jiǎn)易版的深拷貝，已經(jīng)做到了。
- let arr = [10, [100, 200], { x: 10, y:20}];
- let newArr = JSON.parse(JSON.stringify(arr));
- console.log(newArr[2] === arr[2]; // false
其實(shí)，上面的api，它所使用的是暴力法，什么是暴力法呢，在這里給大家解釋一下：
暴力法：把原始數(shù)據(jù)直接變?yōu)樽址?，再把字符串變?yōu)閷?duì)象，（此時(shí)瀏覽器會(huì)重新開辟所有的內(nèi)存空間），實(shí)現(xiàn)深拷貝。
但是直接供我們使用的api，往往會(huì)有一些自己的弊端，比如我們看下面這個(gè)例子
- let obj = {
- a: 100,
- b: [10, 20, 30],
- c: {
- x: 10
- },
- d: /^\d+$/，
- // d: function() {}
- // d: new Date()
- // d: BigInt('10')
- // d: Symbol('f')
- };
- let newObj = JSON.parse(JSON.stringify(obj));
- console.log(newObj);
- /*
- {a: 100, b: Array(3), c: {…}, d: {…}}
- a: 100
- b: (3) [10, 20, 30]
- c: {x: 10}
- d: {}
- __proto__: Object
- }
- */
從上面例子的輸出結(jié)果中，我們可以看出，正則屬性直接變成了空對(duì)象。
那假如我們?cè)侔炎詈笠粋€(gè)屬性，換成其它類型試一試，我們同理也可以發(fā)現(xiàn)，JSON.parse(JSON.stringify()) 都是有弊端的。我們總結(jié)一下：
正則屬性會(huì)變?yōu)榭諏?duì)象
函數(shù)會(huì)直接消失
日期直接字符串
Symbol直接消失
BigInt('10')，直接報(bào)錯(cuò)
undefined會(huì)直接消失
所以當(dāng)對(duì)象中沒有以上形式的屬性時(shí)，可以用JSON.parse(JSON.stringify())。
但是此方法還有一個(gè)弊端，那就是循環(huán)引用問題，舉個(gè)例子：
- const a = {value: 2},
- a.target = a;
拷貝a會(huì)出現(xiàn)系統(tǒng)棧溢出，因?yàn)槌霈F(xiàn)了無限遞歸的情況。
2.實(shí)現(xiàn)簡(jiǎn)易版深拷貝
發(fā)現(xiàn)上面弊端后，我們來手寫一版深拷貝
此種方法，不考慮循環(huán)引用問題，也不考慮特殊對(duì)象的問題
- function deepClone(target) {
- if (target === null) return null;
- if (typeof target !== 'object') return target;
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(prop)) {
- cloneTarget[prop] = deepClone(target[prop]);
- }
- }
- return cloneTarget;
- }
現(xiàn)在我們以發(fā)現(xiàn)的幾個(gè)問題為導(dǎo)向，依次完善深拷貝函數(shù)
3.解決循環(huán)引用
問題如下：
- let obj = { value: 100 };
- obj.target = obj;
- deepClone(obj); //報(bào)錯(cuò): RangeError: Maximum call stack size exceeded
這就是循環(huán)引用。我們?cè)趺磥斫鉀Q這個(gè)問題呢？
創(chuàng)建一個(gè)Map（Map類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”可以是對(duì)象），記錄下已經(jīng)拷貝過的對(duì)象，如果已經(jīng)拷貝過，那直接返回就行了.
其原理是每次拷貝引用類型的時(shí)候，都設(shè)置一個(gè)true作為標(biāo)記，等下次再遍歷該對(duì)象的時(shí)候，就知道它是否已經(jīng)拷貝過。
- const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;
- function deepClone (target, map = new Map()) {
- // 先判斷該引用類型是否被 拷貝過
- if (map.get(target)) {
- return target;
- }
- if (isObject(target)) {
- map.set(target, true);
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(props)) {
- cloneTarget[prop] = deepClone(target[props], map);
- }
- }
- return cloneTarget;
- } else {
- return target;
- }
- }
現(xiàn)在我們就可以到已經(jīng)成功了：
- const a = {val:2};
- a.target = a;
- let newA = deepClone(a);
- console.log(newA)//{ val: 2, target: { val: 2, target: [Circular] } }
好像是沒有問題了, 拷貝也完成了。但還是有一個(gè)潛在的坑, 就是map 上的 key 和 map 構(gòu)成了強(qiáng)引用關(guān)系，這是相當(dāng)危險(xiǎn)的。我給你解釋一下與之相對(duì)的弱引用的概念你就明白了：
在計(jì)算機(jī)程序設(shè)計(jì)中，弱引用與強(qiáng)引用相對(duì)， 是指不能確保其引用的對(duì)象不會(huì)被垃圾回收器回收的引用。一個(gè)對(duì)象若只被弱引用所引用，則被認(rèn)為是不可訪問（或弱可訪問）的，并因此可能在任何時(shí)刻被回收。--百度百科
說的有一點(diǎn)繞，我用大白話解釋一下，被弱引用的對(duì)象可以在任何時(shí)候被回收，而對(duì)于強(qiáng)引用來說，只要這個(gè)強(qiáng)引用還在，那么對(duì)象無法被回收。拿上面的例子說，map 和 a一直是強(qiáng)引用的關(guān)系，在程序結(jié)束之前，a所占的內(nèi)存空間一直不會(huì)被釋放，便會(huì)造成嚴(yán)重的內(nèi)存泄漏問題。
怎么解決這個(gè)問題呢？
很簡(jiǎn)單，讓 map 的 key 和 map 構(gòu)成弱引用即可。ES6給我們提供了這樣的數(shù)據(jù)結(jié)構(gòu)，它的名字叫WeakMap，它是一種特殊的Map, 其中的鍵是弱引用的。其鍵必須是對(duì)象，而值可以是任意的。
稍微改造一下極課：
- const deepClone = (target, map = new WeakMap()) => {
- //...
- }
4.解決特殊對(duì)象問題(RegExp,Date...)
如果傳入的對(duì)象格式滿足，正則或日期格式的話，返回一個(gè)新的正則或日期對(duì)象的實(shí)例
- function deepClone (target, map = new Map()) {
- // 檢測(cè)當(dāng)前對(duì)象target是否與 正則、日期格式對(duì)象匹配
- if (/^(RegExp|Date)$/i.test(target.constructor.name)){
- new constructor(target);
- }
- }
5.完整版深克隆實(shí)現(xiàn)源碼
- const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;
- function deepClone (target, map = new Map()) {
- // 先判斷該引用類型是否被 拷貝過
- if (map.get(target)) {
- return target;
- }
- // 檢測(cè)當(dāng)前對(duì)象target是否與 正則、日期格式對(duì)象匹配
- if (/^(RegExp|Date)$/i.test(target.constructor.name)){
- new constructor(target);
- }
- if (isObject(target)) {
- map.set(target, true);
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(props)) {
- cloneTarget[prop] = deepClone(target[props], map);
- }
- }
- return cloneTarget;
- } else {
- return target;
- }
- }
補(bǔ)充：Object.keys(obj)只遍歷私有屬性（原型上可能有公共的方法，無法遍歷）
網(wǎng)頁名稱：精學(xué)手撕系列——深淺拷貝原理
文章起源：http://www.dlmjj.cn/article/cddccge.html
