快捷導(dǎo)航

JS淺拷貝和深拷貝原理與實(shí)現(xiàn)方法分析

更新時(shí)間：2019年02月28日 09:26:04 作者：huangpb0624

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

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

淺拷貝只會(huì)拷貝一層，深層的引用類型改變還是會(huì)受到影響。

深拷貝是所有內(nèi)部的屬性還有值都被拷貝了一份，不管深層的引用類型怎么改都不會(huì)受到影響。

淺拷貝的實(shí)現(xiàn)方式

1、自定義函數(shù)

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 的對(duì)象擴(kuò)展

let newObj = {...obj};

深拷貝的實(shí)現(xiàn)方式

1、JSON.stringify 和 JSON.parse

用 JSON.stringify 把對(duì)象轉(zhuǎn)換成字符串，再用 JSON.parse 把字符串轉(zhuǎn)換成新的對(duì)象。

可以轉(zhuǎn)成 JSON 格式的對(duì)象才能使用這種方法，如果對(duì)象中包含 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 函數(shù)庫(kù)提供的 _.cloneDeep 方法實(shí)現(xiàn)深拷貝。

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

4. 自己封裝

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

參考：http://www.dbjr.com.cn/article/99013.htm

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章: