JavaScript中淺拷貝和深拷貝的原理是什么

這期內容當中小編將會給大家?guī)碛嘘PJavaScript中淺拷貝和深拷貝的原理是什么，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

JavaScript的特點

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。

淺拷貝的實現方式

1、自定義函數

function shallowClone (initalObj) {
   var obj = {};
   for ( var i in initalObj) {
    obj[i] = initalObj[i];
   }
   return obj;
}

2、ES6 的 Object.assign()

let newObj = Object.assign({}, obj);

3、ES6 的對象擴展

let newObj = {...obj};

深拷貝的實現方式

1、JSON.stringify 和 JSON.parse

用 JSON.stringify 把對象轉換成字符串，再用 JSON.parse 把字符串轉換成新的對象。

可以轉成 JSON 格式的對象才能使用這種方法，如果對象中包含 function 或 RegExp 這些就不能用這種方法了。

let newObj = JSON.parse(JSON.stringify(obj));

2、jquery 和 zepto

jquery 和 zepto 里的 $.extend 方法可以用作深拷貝。

var $ = require('jquery');
var newObj = $.extend(true, {}, obj);

3、lodash

用 lodash 函數庫提供的 _.cloneDeep 方法實現深拷貝。

var _ = require('lodash');
var newObj = _.cloneDeep(obj);

4. 自己封裝

deepClone = (obj) => {
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
      // for...in 會把繼承的屬性一起遍歷
      for(let key in obj){
        // 判斷是不是自有屬性，而不是繼承屬性
        if(obj.hasOwnProperty(key)){
          //判斷ojb子元素是否為對象或數組，如果是，遞歸復制
          if(obj[key]&&typeof obj[key] ==="object"){
            objClone[key] = this.deepClone(obj[key]);
          }else{
            //如果不是，簡單復制
            objClone[key] = obj[key];
          }
        }
      }
    }
    return objClone;
}

上述就是小編為大家分享的JavaScript中淺拷貝和深拷貝的原理是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業(yè)資訊頻道。