快捷導(dǎo)航

javascript淺層克隆、深度克隆對(duì)比及實(shí)例解析

更新時(shí)間：2020年02月09日 11:08:08 作者：shumeihh

這篇文章主要介紹了javascript淺層克隆、深度克隆對(duì)比及實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1、淺層克隆, （引用值改變，兩個(gè)都一起變）

var obj = {
        name : 'xiaoming',
        age : 12,
        children : ['mimi','lili','rokey']
      }
      var obj2 = {};

      function clone(origin, target) {
        var target = target || {};
         for(var prop in origin) {
           target[prop] = origin[prop];
         }
         return target;
      }

      clone(obj, obj2);

2、深度克隆（只考慮數(shù)組和對(duì)象）

（1）判斷是不是原始值

　（2）判斷是數(shù)組還是對(duì)象 Object.prototype.toString.call([]) = '[object Array]' Object.prototype.toString.call({}) = '[object Object]'

（3）建立相應(yīng)的數(shù)組和對(duì)象

（4）遞歸

function deepClone(origin, target) {
        var target = target || {},
          toStr = Object.prototype.toString,
          arrStr = '[object Array]';
        for(var prop in origin) {
          if(origin.hasOwnProperty(prop)) {   //判斷是不是對(duì)象自帶的屬性
            if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
              if(toStr.call(origin[prop]) == arrStr) {
                target[prop] = [];
              }else {
                target[prop] = {};
              }
              deepClone(origin[prop], target[prop]);
            }else {
              target[prop] = origin[prop];
            }
          }
        }
        return target;
      }

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中的E-mail 地址格式驗(yàn)證
本文給大家分享JavaScript中的E-mail 地址格式驗(yàn)證，項(xiàng)目要求輸入的數(shù)據(jù)必須包含@符號(hào)和點(diǎn)號(hào)。代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-03-03
javascript 拖動(dòng)表格行實(shí)現(xiàn)代碼
用js實(shí)現(xiàn)的拖動(dòng)表格的tr行的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-05-05
異步加載JS、CSS代碼（推薦）
這篇文章主要介紹了異步加載JS、CSS代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)方法
在Array的顯示原型下有一個(gè)flat方法,可以將多維數(shù)組,降維,傳的參數(shù)是多少就降多少維,下面這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2022-08-08
微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞（6）
這篇文章主要為大家詳細(xì)介紹了微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞，微信小程序提供了3種頁面跳轉(zhuǎn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
高效的表格行背景隔行變色及選定高亮的JS代碼
一個(gè)項(xiàng)目要用，又不想用jquery之類的東東。先去網(wǎng)上搜索了下，找到了不少在CSS中執(zhí)行JS的表格行變色方式，不過這類方式在表格行多的時(shí)候相當(dāng)卡，在IE7和firefox3中測(cè)試正常。
2010-12-12
JavaScript實(shí)現(xiàn)九宮格移動(dòng)拼圖游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格移動(dòng)拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JS使用new操作符創(chuàng)建對(duì)象的方法分析
這篇文章主要介紹了JS使用new操作符創(chuàng)建對(duì)象的方法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)類的定義、new操作符對(duì)象的創(chuàng)建及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-05-05
JS獲取下拉框顯示值和判斷單選按鈕的方法
這篇文章主要介紹了JS獲取下拉框顯示值和判斷單選按鈕的方法,實(shí)例分析了javascript針對(duì)html下拉框及單選按鈕的相關(guān)操作技巧,需要的朋友可以參考下
2015-07-07
JS如何生成一個(gè)不重復(fù)的ID的函數(shù)
這篇文章主要介紹了JS如何生成一個(gè)不重復(fù)的ID的函數(shù)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2016-12-12