快捷導(dǎo)航

JS實(shí)現(xiàn)數(shù)組深拷貝的方法分析

更新時間：2019年03月06日 11:16:54 作者：魂淡

這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組深拷貝的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組深拷貝的相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)數(shù)組深拷貝的方法。分享給大家供大家參考，具體如下：

最近在網(wǎng)上看到一篇關(guān)于js數(shù)組復(fù)制最有效的方法是直接使用slice和concat方法。這2個方法的確是最快的把數(shù)組成功復(fù)制，而不是引用?？梢赃\(yùn)行實(shí)例：

<script type="text/javascript">
<!--
  var arr1=["1","2","3"],arr2;
  arr2=arr1.slice(0);
  arr1[0]=0; //改變arr1第一個元素
  alert("arr2[0]："+arr2[0]); //不影響arr2
  var arr3=["1","2","3"],arr4;
  arr4=arr3.concat();
  arr3[0]= 0; //改變arr3第一個元素
  alert("arr4[0]："+arr4[0]); //不影響arr4
</script>

運(yùn)行結(jié)果可以看到改變原來數(shù)組中的元素并不影響拷貝后的數(shù)組。但是如果我們把上面例子中的a1換成[["1","2","3"],"2","3"]，也就是二維數(shù)組，情況就不一樣了。

<script type="text/javascript">
<!--
  var a1=[["1","2","3"],"2","3"],a2;
  a2=a1.slice(0);
  a1[0][0]=0; //改變a1第一個元素中的第一個元素
  alert(a2[0][0]); //影響到了a2
-->
</script>

可以看到這2個方法只是復(fù)制了數(shù)組的第一維，由于數(shù)組第一維存放的是第二維的引用，而第二維才是實(shí)際存放他們的內(nèi)容。就此我們可以聯(lián)想到網(wǎng)上流行的復(fù)制對象的函數(shù)，其實(shí)也只是復(fù)制對象的第一層。

<script type="text/javascript">
<!--
  function extend(destination,source)
  {
    for(var property in source)
    {destination[property]=source[property];}
  }
-->
</script>

所以要想深層復(fù)制對象，還得在該函數(shù)基礎(chǔ)上修改下。完整實(shí)例如下：

<script type="text/javascript">
<!--
  function getType(o)
  {
    var _t;
    return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
  }
  function extend(destination,source)
  {
    for(var p in source)
    {
      if(getType(source[p])=="array"||getType(source[p])=="object")
      {
        destination[p]=getType(source[p])=="array"?[]:{};
        arguments.callee(destination[p],source[p]);
      }
      else
      {
        destination[p]=source[p];
      }
    }
  }
  var test={a:"ss",b:"dd",c:{d:"css",e:"cdd"}};
  var test1={};
  extend(test1,test);
  test1.c.d="change"; //改變test1的c屬性對象的d屬性
  alert(test.c.d); //不影響test
-->
</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: