深度克隆相关

1、数据类型：

数据类型分为：
-基本的数据类型(String, Number, boolean, Null, Undefined, Symbol)
特点：存储的是该类型的真实值
-对象数据类型
特点：存储的是该对象在堆内存中的地址

2、克隆基本类型的数据：
- 基本数据类型存放的就是实际的数据，可直接克隆。
let number2 = 2;
let number1 = number2;

3、克隆对象数据：
- 对象数据存放的是对象在堆内存的地址，若直接克隆，克隆的是地址。
let obj = {username: 'kobe'}
let obj1 = obj; //obj1复制了obj在堆内存的地址值，obj1和obj都指向一个对象
- 如何判断是否克隆了对象类型：是否在堆里开辟了新空间，创建了新的对象。
- 分类：浅克隆与深克隆。

2、常用的拷贝(复制)技术:
 - `arr.concat()`: 数组浅拷贝
 -  `arr.slice()`: 数组浅拷贝
 -  `JSON.parse(JSON.stringify(arr/obj))`: 数组或对象深拷贝, 但不能处理函数数据,使用场景是对象里不包含函数
 -  浅拷贝包含函数数据的对象/数组
 -  深拷贝包含函数数据的对象/数组

3、扩展：如何做到精准判断数据类型？
  用：`Object.prototype.toString.call(xx)`，可以获得类似 [object xx的类型名] 的字符串。
    Object.prototype.toString.call(1) //[object Number]
  Object.prototype.toString.call('1') //[object String]
  Object.prototype.toString.call(undefined) //[object Undefined]
  Object.prototype.toString.call(true)// [object Boolean]
  Object.prototype.toString.call(console.log)//[object Function]
  Object.prototype.toString.call(Symbol())//[object Symbol]
  Object.prototype.toString.call([]) //[object Array]
  Object.prototype.toString.call({}) //[object Object]
  Object.prototype.toString.call(NaN)//[object Number]-------注意这里

相关代码如下:

function getType(data) {
  return Object.prototype.toString.call(data).slice(8,-1).toLowerCase()
}
//深度克隆
function deepClone(target) {
  let result
  if(getType(target) === 'array'){
    result = []
  }else if(getType(target) === 'object'){
    result = {}
  }else{
    //如果传入的不是数组，不是对象，则直接返回，因为不需要再进行深度克隆了。
    return target
  }
  //循环遍历出入的数组或者对象，依次取出里面的内容放入提前准备好的容器(result)
  for (let key in target){
    let item = target[key]
     if(getType(item) === 'array' || getType(item) === 'object'){
      //拆到不能再拆
       result[key] = deepClone(item)
     }else{
       result[key] = target[key]
     }
  }
  return result
}
//验证数组
let arr = [1,2,3,4,5,{n:1,m:2,t:function(){console.log(1)}}]
let arr2 = deepClone(arr)
arr[0] = 9999999
arr[5].m = 100000000
console.log(arr2)
arr2[5].t()
//验证对象
let person = {
  name:'kobe',
  age:18,
  sex:{opyion1:'男',option2:'女'},
  speak(){
    console.log('我说话了')
  }
}

最后编辑于：2019.11.06 20:31:07