尾遞歸實現深複製

1 尾遞歸

(普通遞歸) :java

function f(x) {
   if (x === 1) return 1;
   return 1 + f(x-1);
}1234複製代碼

尾遞歸的判斷標準是函數運行【最後一步】是否調用自身,而不是是否在函數的【最後一行】調用自身。jquery

尾遞歸git

function f(x) {
   if (x === 1) return 1;
   return f(x-1);
}
複製代碼

使用尾遞歸能夠帶來一個好處:由於進入最後一步後再也不須要參考外層函數(caller)的信息,所以不必保存外層函數的stack,遞歸須要用的stack只有目前這層函數的,所以避免了棧溢出風險github

尾遞歸優化主要是對棧內存空間的優化, 這個優化是O(n)到O(1)的; 至於時間的優化, 實際上是因爲對空間的優化致使內存分配的工做減小所產生的, 是一個常數優化, 不會帶來質的變化.
尾遞歸形式和循環(或者說」迭代」)形式大體就是同一個邏輯的兩種表達形式而已. 通過尾遞歸優化的尾遞歸代碼和循環的代碼的執行效率基本上是至關的. 這也是函數式編程效率上沒有落後的一個很重要的緣由.
正則表達式


二、javaScript的變量類型

(1)基本類型:
5種基本數據類型Undefined、Null、Boolean、Number 和 String,變量是直接按值存放的,存放在棧內存中的簡單數據段,能夠直接訪問。編程

(2)引用類型:
存放在堆內存中的對象,變量保存的是一個指針,這個指針指向另外一個位置。當須要訪問引用類型(如對象,數組等)的值時,首先從棧中得到該對象的地址指針,而後再從堆內存中取得所需的數據。數組

JavaScript存儲對象都是存地址的,因此淺拷貝會致使 obj1 和obj2 指向同一塊內存地址。改變了其中一方的內容,都是在原來的內存上作修改會致使拷貝對象和源對象都發生改變,而深拷貝是開闢一塊新的內存地址,將原對象的各個屬性逐個複製進去。對拷貝對象和源對象各自的操做互不影響。瀏覽器

例如:數組拷貝緩存

//淺拷貝,雙向改變,指向同一片內存空間
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr1[0] = 'change';
console.log('shallow copy: ' + arr1 + " ); //shallow copy: change,2,3 console.log('shallow copy: ' + arr2 + " );   //shallow copy: change,2,3
複製代碼

二、淺拷貝的實現

2.一、簡單的引用複製###

function shallowClone(copyObj) {
  var obj = {};
  for ( var i in copyObj) {
    obj[i] = copyObj[i];
  }
  return obj;
}
var x = {
  a: 1,
  b: { f: { g: 1 } },
  c: [ 1, 2, 3 ]
};
var y = shallowClone(x);
console.log(y.b.f === x.b.f);     // true
複製代碼

2.二、Object.assign()

Object.assign() 方法能夠把任意多個的源對象自身的可枚舉屬性拷貝給目標對象,而後返回目標對象。bash

var x = {
  a: 1,
  b: { f: { g: 1 } },
  c: [ 1, 2, 3 ]
};
var y = Object.assign({}, x);
console.log(y.b.f === x.b.f);     // true複製代碼

三、深拷貝的實現

3.一、Array的slice和concat方法

Array的slice和concat方法不修改原數組,只會返回一個淺複製了原數組中的元素的一個新數組。之因此把它放在深拷貝里,是由於它看起來像是深拷貝。而實際上它是淺拷貝。原數組的元素會按照下述規則拷貝:

  • 若是該元素是個對象引用 (不是實際的對象),slice 會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。若是被引用的對象發生改變,則新的和原來的數組中的這個元素也會發生改變。
  • 對於字符串、數字及布爾值來講(不是 String、Number 或者 Boolean 對象),slice 會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值,將不會影響另外一個數組。

若是向兩個數組任一中添加了新元素,則另外一個不會受到影響。例子以下:

var array = [1,2,3]; 
var array_shallow = array; 
var array_concat = array.concat(); 
var array_slice = array.slice(0); 
console.log(array === array_shallow); //true 
console.log(array === array_slice); //false,「看起來」像深拷貝
console.log(array === array_concat); //false,「看起來」像深拷貝
複製代碼

能夠看出,concat和slice返回的不一樣的數組實例,這與直接的引用複製是不一樣的。而從另外一個例子能夠看出Array的concat和slice並非真正的深複製,數組中的對象元素(Object,Array等)只是複製了引用。以下:

var array = [1, [1,2,3], {name:"array"}]; 
var array_concat = array.concat();
var array_slice = array.slice(0);
array_concat[1][0] = 5;  //改變array_concat中數組元素的值 
console.log(array[1]); //[5,2,3] 
console.log(array_slice[1]); //[5,2,3] 
array_slice[2].name = "array_slice"; //改變array_slice中對象元素的值 
console.log(array[2].name); //array_slice
console.log(array_concat[2].name); //array_slice
複製代碼

3.二、JSON對象的parse和stringify

JSON對象是ES5中引入的新的類型(支持的瀏覽器爲IE8+),JSON對象parse方法能夠將JSON字符串反序列化成JS對象,stringify方法能夠將JS對象序列化成JSON字符串,藉助這兩個方法,也能夠實現對象的深拷貝。

//例1
var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改變target的name屬性
console.log(source.name); //source 
console.log(target.name); //target
target.child.name = "target child"; //改變target的child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child
//例2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
//例3
var source = { name:function(){console.log(1);}, child:new RegExp("e") }
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
console.log(target.child); //Object {}
複製代碼

這種方法使用較爲簡單,能夠知足基本的深拷貝需求,並且可以處理JSON格式能表示的全部數據類型,可是對於正則表達式類型、函數類型等沒法進行深拷貝(並且會直接丟失相應的值)。還有一點很差的地方是它會拋棄對象的constructor。也就是深拷貝以後,無論這個對象原來的構造函數是什麼,在深拷貝以後都會變成Object。同時若是對象中存在循環引用的狀況也沒法正確處理。

四、jQuery.extend()方法源碼實現

jQuery的源碼 - src/core.js #L121源碼及分析以下:

jQuery.extend = jQuery.fn.extend = function() { //給jQuery對象和jQuery原型對象都添加了extend擴展方法
  var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},
  i = 1,
  length = arguments.length,
  deep = false;
  //以上其中的變量:options是一個緩存變量,用來緩存arguments[i],name是用來接收將要被擴展對象的key,src改變以前target對象上每一個key對應的value。
  //copy傳入對象上每一個key對應的value,copyIsArray斷定copy是否爲一個數組,clone深拷貝中用來臨時存對象或數組的src。

  // 處理深拷貝的狀況
  if (typeof target === "boolean") {
    deep = target;
    target = arguments[1] || {};
    //跳過布爾值和目標 
    i++;
  }

  // 控制當target不是object或者function的狀況
  if (typeof target !== "object" && !jQuery.isFunction(target)) {
    target = {};
  }

  // 當參數列表長度等於i的時候,擴展jQuery對象自身。
  if (length === i) {
    target = this; --i;
  }
  for (; i < length; i++) {
    if ((options = arguments[i]) != null) {
      // 擴展基礎對象
      for (name in options) {
        src = target[name];	
        copy = options[name];

        // 防止永無止境的循環,這裏舉個例子,
            // 如 var a = {name : b};
            // var b = {name : a}
            // var c = $.extend(a, b);
            // console.log(c);
            // 若是沒有這個判斷變成能夠無限展開的對象
            // 加上這句判斷結果是 {name: undefined}
        if (target === copy) {
          continue;
        }
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
          if (copyIsArray) {
            copyIsArray = false;
            clone = src && jQuery.isArray(src) ? src: []; // 若是src存在且是數組的話就讓clone副本等於src不然等於空數組。
          } else {
            clone = src && jQuery.isPlainObject(src) ? src: {}; // 若是src存在且是對象的話就讓clone副本等於src不然等於空數組。
          }
          // 遞歸拷貝
          target[name] = jQuery.extend(deep, clone, copy);
        } else if (copy !== undefined) {
          target[name] = copy; // 若原對象存在name屬性,則直接覆蓋掉;若不存在,則建立新的屬性。
        }
      }
    }
  }
  // 返回修改的對象
  return target;
};
複製代碼

jQuery的extend方法使用基本的遞歸思路實現了淺拷貝和深拷貝,可是這個方法也沒法處理源對象內部循環引用,例如:

var a = {"name":"aaa"};
var b = {"name":"bbb"};
a.child = b;
b.parent = a;
$.extend(true,{},a);//直接報了棧溢出。Uncaught RangeError: Maximum call stack size exceeded複製代碼

五、本身動手實現一個拷貝方法

(function ($) {
    'use strict';

    var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' ');

	function type () {
	   return Object.prototype.toString.call(this).slice(8, -1);
	}

	for (var i = types.length; i--;) {
	    $['is' + types[i]] = (function (self) {
	        return function (elem) {
	           return type.call(elem) === self;
	        };
	    })(types[i]);
	}

    return $;
})(window.$ || (window.$ = {}));//類型判斷

function copy (obj,deep) { 
    if (obj === null || (typeof obj !== "object" && !$.isFunction(obj))) { 
        return obj; 
    } 

    if ($.isFunction(obj)) {
    	return new Function("return " + obj.toString())();
    }
    else {
        var name, target = $.isArray(obj) ? [] : {}, value; 

        for (name in obj) { 
            value = obj[name]; 

            if (value === obj) {
            	continue;
            }

            if (deep) {
                if ($.isArray(value) || $.isObject(value)) {
                    target[name] = copy(value,deep);
                } else if ($.isFunction(value)) {
                    target[name] = new Function("return " + value.toString())();
                } else {
            	    target[name] = value;
                } 
            } else {
            	target[name] = value;
            } 
        } 
        return target;
    }         
}複製代碼
相關文章
相關標籤/搜索