一、JS的基本數(shù)據(jù)類型

• 基本數(shù)據(jù)類型：String，Boolean，Number，Undefined，Null；
• 引用數(shù)據(jù)類型：Object(Array，Date，RegExp，F(xiàn)unction)；
• 基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別：
  1、保存位置不同：基本數(shù)據(jù)類型保存在棧內(nèi)存中，引用數(shù)據(jù)類型保存在堆內(nèi)存中，然后在棧內(nèi)存中保存了一個對堆內(nèi)存中實際對象的引用，即數(shù)據(jù)在堆內(nèi)存中的地址，JS對引用數(shù)據(jù)類型的操作都是操作對象的引用而不是實際的對象，如果obj1拷貝了obj2，那么這兩個引用數(shù)據(jù)類型就指向了同一個堆內(nèi)存對象，具體操作是obj1將棧內(nèi)存的引用地址復(fù)制了一份給obj2，因而它們共同指向了一個堆內(nèi)存對象；
  為什么基本數(shù)據(jù)類型保存在棧中，而引用數(shù)據(jù)類型保存在堆中？
  1）堆比棧大，棧比堆速度快；
  2）基本數(shù)據(jù)類型比較穩(wěn)定，而且相對來說占用的內(nèi)存??；
  3）引用數(shù)據(jù)類型大小是動態(tài)的，而且是無限的，引用值的大小會改變，不能把它放在棧中，否則會降低變量查找的速度，因此放在變量棧空間的值是該對象存儲在堆中的地址，地址的大小是固定的，所以把它存儲在棧中對變量性能無任何負(fù)面影響；
  4）堆內(nèi)存是無序存儲，可以根據(jù)引用直接獲??；

按引用訪問：js不允許直接訪問保存在堆內(nèi)存中的對象，所以在訪問一個對象時，首先得到的是這個對象在堆內(nèi)存中的地址，然后再按照這個地址去獲得這個對象中的值；

ECMAScript中所有函數(shù)的參數(shù)都是按值來傳遞的，對于原始值，只是把變量里的值傳遞給參數(shù)，之后參數(shù)和這個變量互不影響，對于引用值，對象變量里面的值是這個對象在堆內(nèi)存中的內(nèi)存地址，因此它傳遞的值也就是這個內(nèi)存地址，這也就是為什么函數(shù)內(nèi)部對這個參數(shù)的修改會體現(xiàn)在外部的原因，因為它們都指向同一個對象；
2、基本數(shù)據(jù)類型使用typeof可以返回其基本數(shù)據(jù)類型，但是NULL類型會返回object，因此null值表示一個空對象指針；引用數(shù)據(jù)類型使用typeof會返回object，此時需要使用instanceof來檢測引用數(shù)據(jù)類型；
3、定義引用數(shù)據(jù)類型需要使用new操作符，后面再跟一個構(gòu)造函數(shù)來創(chuàng)建；
1）使用new操作符創(chuàng)建對象；

var obj1 = new Object();
obj1.a = 1;

2）使用對象字面量表示法創(chuàng)建對象；

var obj1 = {
  a: 1,
  b: 2
}

3）可以通過點表示法訪問對象的屬性，也可以使用方括號表示法來訪問對象的屬性；

• ES6新增數(shù)據(jù)類型：Map，Set，Generator，Symbol
• 本地對象：ECMA-262 把本地對象（native object）定義為“獨立于宿主環(huán)境的 ECMAScript 實現(xiàn)提供的對象”，即本地對象就是 ECMA-262 定義的類（引用類型）；
• 宿主對象：宿主”就是我們網(wǎng)頁的運行環(huán)境，即“操作系統(tǒng)”和“瀏覽器”，所有非本地對象都是宿主對象（host object），即由 ECMAScript 實現(xiàn)的宿主環(huán)境提供的對象，所有的BOM和DOM對象都是宿主對象，因為其對于不同的“宿主”環(huán)境所展示的內(nèi)容不同，即ECMAScript官方未定義的對象都屬于宿主對象，因為其未定義的對象大多數(shù)是自己通過ECMAScript程序創(chuàng)建的對象；
• JS內(nèi)置對象：是指JS語言自帶的一些對象，供開發(fā)者使用，這些對象提供了一些常用的或是最基本而必要的功能；
  1、Arguments：函數(shù)參數(shù)集合；
  2、Array對象：length,instanceof,isArray(),toString()返回字符串,valueOf()返回數(shù)組的值,join()可以將數(shù)組轉(zhuǎn)為字符串,push(),pop(),shift(),unshift(),reverse(),sort(),
  slice(),splice(),indexOf(),lastIndexOf(),迭every(),filter(),forEach(),map(),some(),
  歸并方法reduce(),reduceRight()；
  3、Boolean：布爾對象；
  4、Error：異常對象；
  5、Number：數(shù)值對象；
  6、String對象：length,charAt()返回指定位置的字符,concat(),slice(),subString(),
  subStr(),indexOf(),lastIndexOf(),trim(),toLowerCase(),toUpperCase(),split(),
  text.match(),text.splice()；
  7、Date對象：toUTCstring(),getTime()；
  8、RegExp對象：test()；
  9、Function對象：arguments,this,apply(this,arguments),call(this,num1,num2)；
  10、Math對象：min(),max(),ceil(),floor(),round(),random()；
  11、Global對象：encodeURI,encodeURIComponent，parseInt(),eval()；
  12、Object對象：prototype,constructor；
• 基本包裝類型：Boolean,Number,String
  1、轉(zhuǎn)換為數(shù)值：parseInt()專門用于把字符串轉(zhuǎn)換成數(shù)值,Number()用于任何類型；
  2、非字符轉(zhuǎn)換成字符：toString()；
  3、數(shù)組轉(zhuǎn)成字符：join()；
  4、字符串轉(zhuǎn)換成數(shù)組：split()；

// 基本數(shù)據(jù)類型的復(fù)制，基本數(shù)據(jù)類型是按值傳遞的
var a = 1;
var b = a;
b = 2;
console.log(a);  // 1
console.log(b);  // 2

// 引用數(shù)據(jù)類型的復(fù)制，引用數(shù)據(jù)類型按引用傳值
var obj1 = {
  a: 1,
  b: 2
}
var obj2 = obj1;
obj2.a = 3;
console.log(obj1.a); // 3
console.log(obj2.a); // 3

二、JS淺拷貝

深拷貝和淺拷貝

• 深拷貝和淺拷貝簡單解釋
  ?????淺拷貝和深拷貝都只針對于引用數(shù)據(jù)類型，淺拷貝只復(fù)制指向某個對象的指針，而不復(fù)制對象本身，新舊對象還是共享同一塊內(nèi)存；但深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象跟原對象不共享內(nèi)存，修改新對象不會改到原對象；
  ?????區(qū)別：淺拷貝只復(fù)制對象的第一層屬性、深拷貝可以對對象的屬性進(jìn)行遞歸復(fù)制；

// 只復(fù)制第一層的淺拷貝
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
var obj1 = {
   a: 1,
   b: 2,
   c: {
   d: 3
  }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

• Object.assign()實現(xiàn)淺拷貝及一層的深拷貝

let obj1 = {
   a: {
     b: 1
   },
   c: 2
}
let obj2 = Object.assign({},obj1)
obj2.a.b = 3;
obj2.c = 3
console.log(obj1.a.b); // 3
console.log(obj2.a.b); // 3
console.log(obj1.c); // 2
console.log(obj2.c); // 3

二、JS深拷貝

• 手動實現(xiàn)深拷貝

let obj1 = {
   a: 1,
   b: 2
}
let obj2 = {
   a: obj1.a,
   b: obj1.b
}
obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3

let obj1 = {
   a: {
     b: 2
   }
}
let obj2 = {
   a: obj1.a
}
obj2.a.b = 3;
console.log(obj1.a.b); // 3
console.log(obj2.a.b); // 3

• 遞歸實現(xiàn)深拷貝

function deepCopy(obj1) {
      var obj2 = Array.isArray(obj1) ? [] : {};
      if (obj1 && typeof obj1 === "object") {
        for (var i in obj1) {
          if (obj1.hasOwnProperty(i)) {
            // 如果子屬性為引用數(shù)據(jù)類型，遞歸復(fù)制
            if (obj1[i] && typeof obj1[i] === "object") {
              obj2[i] = deepCopy(obj1[i]);
            } else {
              // 如果是基本數(shù)據(jù)類型，只是簡單的復(fù)制
              obj2[i] = obj1[i];
            }
          }
        }
      }
      return obj2;
    }
    var obj1 = {
      a: 1,
      b: 2,
      c: {
        d: 3
      }
    }
    var obj2 = deepCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 3
    alert(obj2.c.d); // 4

缺陷：當(dāng)遇到兩個互相引用的對象，會出現(xiàn)死循環(huán)的情況，為了避免相互引用的對象導(dǎo)致死循環(huán)的情況，則應(yīng)該在遍歷的時候判斷是否相互引用對象，如果是則退出循環(huán)；

function deepCopy(obj1) {
      var obj2 = Array.isArray(obj1) ? [] : {};
      if (obj1 && typeof obj1 === "object") {
        for (var i in obj1) {
          var prop = obj1[i]; // 避免相互引用造成死循環(huán)，如obj1.a=obj
          if (prop == obj1) {
            continue;
          }
          if (obj1.hasOwnProperty(i)) {
            // 如果子屬性為引用數(shù)據(jù)類型，遞歸復(fù)制
            if (prop && typeof prop === "object") {
              obj2[i] = (prop.constructor === Array) ? [] : {};
              arguments.callee(prop, obj2[i]); // 遞歸調(diào)用
            } else {
              // 如果是基本數(shù)據(jù)類型，只是簡單的復(fù)制
              obj2[i] = prop;
            }
          }
        }
      }
      return obj2;
    }
    var obj1 = {
      a: 1,
      b: 2,
      c: {
        d: 3
      }
    }
    var obj2 = deepCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 3
    alert(obj2.c.d); // 4

// Object.create實現(xiàn)深拷貝1，但也只能拷貝一層
function deepCopy(obj1) {
      var obj2 = Array.isArray(obj1) ? [] : {};
      if (obj1 && typeof obj1 === "object") {
        for (var i in obj1) {
          var prop = obj1[i]; // 避免相互引用造成死循環(huán)，如obj1.a=obj
          if (prop == obj1) {
            continue;
          }
          if (obj1.hasOwnProperty(i)) {
            // 如果子屬性為引用數(shù)據(jù)類型，遞歸復(fù)制
            if (prop && typeof prop === "object") {
              obj2[i] = (prop.constructor === Array) ? [] : Object.create(prop);
            } else {
              // 如果是基本數(shù)據(jù)類型，只是簡單的復(fù)制
              obj2[i] = prop;
            }
          }
        }
      }
      return obj2;
    }
    var obj1 = {
      a: 1,
      b: 2,
      c: {
        d: 3
      }
    }
    var obj2 = deepCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 3
    alert(obj2.c.d); // 4

// Object實現(xiàn)拷貝2，淺拷貝
var obj1 = {
      a: 1,
      b: 2,
      c: {
        d: 3
      }
    }
    var obj2 = Object.create(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 4
    alert(obj2.c.d); // 4

• 使用JSON.stringify和JSON.parse實現(xiàn)深拷貝：JSON.stringify把對象轉(zhuǎn)成字符串，再用JSON.parse把字符串轉(zhuǎn)成新的對象；

function deepCopy(obj1){
    let _obj = JSON.stringify(obj1);
    let obj2 = JSON.parse(_obj);
    return obj2;
  }
    var a = [1, [1, 2], 3, 4];
    var b = deepCopy(a);
    b[1][0] = 2;
    alert(a); // 1,1,2,3,4
    alert(b); // 2,2,2,3,4

缺陷：它會拋棄對象的constructor，深拷貝之后，不管這個對象原來的構(gòu)造函數(shù)是什么，在深拷貝之后都會變成Object；這種方法能正確處理的對象只有 Number, String, Boolean, Array, 扁平對象，也就是說，只有可以轉(zhuǎn)成JSON格式的對象才可以這樣用，像function沒辦法轉(zhuǎn)成JSON；

let obj1 = {
   fun:function(){
      alert(123);
   }
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun); // function
console.log(typeof obj2.fun); // undefined

• 熱門的函數(shù)庫lodash，也有提供_.cloneDeep用來做深拷貝；

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

• jquery實現(xiàn)深拷貝
  jquery 提供一個$.extend可以用來做深拷貝；

var $ = require('jquery');
var obj1 = {
   a: 1,
   b: {
     f: {
       g: 1
     }
   },
   c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);  // false

• slice是否為深拷貝

// 對只有一級屬性值的數(shù)組對象使用slice
var a = [1,2,3,4];
var b = a.slice();
b[0] = 2;
alert(a); // 1,2,3,4
alert(b); // 2,2,3,4

// 對有多層屬性的數(shù)組對象使用slice
var a = [1,[1,2],3,4];
var b = a.slice();
b[1][0] = 2;
alert(a); // 1,2,2,3,4
alert(b); // 1,2,2,3,4

結(jié)論：slice()和concat()都并非深拷貝；