第一種方法（只適用于基礎(chǔ)類型）

const newObj = JSON.parse(JSON.stringify(oldObj));

第二種方法

const getType = (obj)=> {var toString = Object.prototype.toString;var map = {'[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined','[object Null]' : 'null', '[object Object]' : 'object','[object Symbol]' : 'symbol'};if(obj instanceof Element) {//因?yàn)閷?duì)不同標(biāo)簽，toString會(huì)返回對(duì)應(yīng)不同標(biāo)簽的構(gòu)造函數(shù)return 'element';}return map[toString.call(obj)]; }const getRegExp = re => {var flags = '';if (re.global) flags += 'g';if (re.ignoreCase) flags += 'i';if (re.multiline) flags += 'm';return flags; };/** * deep clone * @param {[type]} parent object 需要進(jìn)行克隆的對(duì)象 * @return {[type]} 深克隆后的對(duì)象 */ const deepClone = oldObj => {// 維護(hù)兩個(gè)儲(chǔ)存循環(huán)引用的數(shù)組const oldObjArr = [];const newObjArr = [];const clone = oldObj => { let newObj, proto;const type = getType(oldObj);switch(type){case 'boolean':case 'number':case 'string':case 'null':case 'undefined':case 'function':{return oldObj;break;}case 'symbol':{return Symbol(Symbol.keyFor(oldObj).toString());break;}case 'array':{newObj = [];break;}case 'regExp':{newObj = new RegExp(oldObj.source, getRegExp(oldObj));if (oldObj.lastIndex) newObj.lastIndex = oldObj.lastIndex;break;}case 'date':{newObj = new Date(oldObj.getTime()); break;}//case 'obj':default:{// 處理對(duì)象原型proto = Object.getPrototypeOf(oldObj);// 利用Object.create切斷原型鏈newObj = Object.create(proto);break;}}// 處理循環(huán)引用const index = oldObjArr.indexOf(oldObj);if (index != -1) {// 如果父數(shù)組存在本對(duì)象,說(shuō)明之前已經(jīng)被引用過(guò),直接返回此對(duì)象 return newObjArr[index];}oldObjArr.push(oldObj);newObjArr.push(newObj);/*數(shù)組和對(duì)象都可以用forin語(yǔ)句，雖然數(shù)組使用forin會(huì)有一個(gè)問(wèn)題(具體看最下面）。但是這里不會(huì)影響，所以這么用 */for (let i in oldObj) {// 遞歸 newObj[i] = clone(oldObj[i]);}return newObj;};return clone(oldObj); }/* 測(cè)試成功 */ function person(pname) {this.name = pname; }const Messi = new person('Messi');function say() {console.log('hi'); };const oldObj = {a: say,b: new Array(1),c: new RegExp('ab+c', 'i'),d: Messi};const newObj = deepClone(oldObj);console.log(newObj.a, oldObj.a); //[Function: say] [Function: say]console.log(newObj.b[0], oldObj.b[0]); // undefined undefinedconsole.log(newObj.c, oldObj.c); // /ab+c/i /ab+c/iconsole.log(newObj.d.constructor, oldObj.d.constructor); // [Function: person][Function: person]復(fù)制代碼

toString和typeof區(qū)別

上面用到了toString，那就不禁聯(lián)想到typeof了，之前我一直不太清楚這兩者的區(qū)別。現(xiàn)在整理關(guān)系如圖

下面是一些測(cè)試?yán)?/p> var toString = Object.prototype.toString;let a= true; console.log(typeof(a));//boolean console.log(toString.call(a));//[object Boolean]a=new Boolean(true); console.log(typeof(a));//object console.log(toString.call(a));//[object Boolean]a=new RegExp('ab+c', 'i'); console.log(a.source)//ab+c console.log(a.global)//false console.log(a.ignoreCase)//true console.log(a.multiline)//false console.log(a.lastIndex)//0console.log(typeof(a));//object console.log(toString.call(a));//[object RegExp]function say() {console.log('hi'); }; a=say; console.log(typeof(a));//function console.log(toString.call(a));//[object Function]a=[1,2,3,4,5]; (let i in a){//數(shù)組也可以用for in ,但是有個(gè)問(wèn)題，看下面 console.log(a[i]) } console.log(typeof(a));//object console.log(toString.call(a));//[object Array]a=Symbol('foo'); console.log(typeof(a));//symbol console.log(toString.call(a));//[object Symbol]復(fù)制代碼

數(shù)組使用for in語(yǔ)句

for in函數(shù)中變量以字符串的形式出現(xiàn)，這時(shí)候在函數(shù)中操作a[x+1]的話是無(wú)效的，x+1會(huì)進(jìn)行字符串拼接。

var a=[5,4,3,2,1];var x=0;console.log(typeof x);//numberfor (x in a) {console.log("a["+x+"]: "+a[x]);console.log(typeof x);//string}console.log(x);//4console.log(typeof x);//string //output: // a[0]: 5 // a[1]: 4 // a[2]: 3 // a[3]: 2 // a[4]: 1 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5ae19b07518825673123ea25

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的覆盖所有类型的javascript深度克隆的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。