JS深拷贝--用map方法

深拷贝和浅拷贝

1、什么是深拷贝，为什么要有深拷贝？

复杂数据类型进行遍历，拷贝内部的基本值而不是引用地址

在js中，有简单数据类型和复杂数据类型。复杂数据类型在栈中存储的时候仅仅是一个引用地址，如果拷贝的时候，只拷贝了地址，修改拷贝的数据会影响之前的数据

所以需要用深拷贝把数据拷贝出来

2、什么是浅拷贝

只拷贝了一层，对于复杂数据类型只拷贝了地址

3、实现拷贝：

如果是简单数据类型，直接拷贝。如果是复杂数据类型，复制地址。

循环引用的问题？构建一个map对象，缓存已经拷贝过的复杂数据类型，如果递归的时候再遇到地址相同的数据，直接复用缓存的值不去递归

4、快问快答

问：公司的深拷贝都是自己写的吗？

答：不是项目一般会使用lodash第三方库。

问：为什么要使用第三方库？

第三方库做了很多兼容性的条件判断，使用更加安全

使用map方法实现深拷贝

function deepCopy(data) {
  const map = new Map() // 键可以是一个对象
  function dp(data) {
    const existObj = map.get(data) 
    // 看一下当前需要处理的数据是否已经被处理过(只要处理过了，都会通过map缓存起来)
    if (existObj) {
      //  已经被处理过了，第二次见到这个对象了(相同的引用的地址)
      //  只要返回上次处理之后的结果
      return existObj
    }
    let result = Array.isArray(data) ? [] : {}
    map.set(data, result)
    for (const key in data) {
      let item = data[key]
      if (typeof item === 'object') {
        result[key] = dp(item)
      } else {
        result[key] = item
      }
    }
    return result
  }
  console.log(map)
  return dp(data)
}

const d = {
  name: ['a', 'b', 'c'],
  oo: {
    kk: 'uu',
    yy: 'pp',
  },
}

deepCopy(d)

使用map，可以将对象、数组作为键

// map可以使用对象作为key
const map = new Map()
const tempObj = { name: 'nnn' }
map.set(tempObj, { name: 'uuu' })
map.get(tempObj)
console.log(map)

判断数据类型的方法

const a = {}
const b = {}
const c = {}

b[a] = 1
b[c] = 2

console.log(b[a]) //2

console.log(Object.prototype.toString.call(this)) //[object Object]
console.log(a.toString()) //[object Object]

const fn = function () {}
console.dir(fn.__proto__)
console.log(fn.__proto__.toString) //ƒ toString() { [native code] }
console.log(Function.prototype.toString) //ƒ toString() { [native code] }

function getDataType(data) {
  const type = Object.prototype.toString.call(data)
  return console.log(type.substring(8, type.length - 1))
}

getDataType({}) //Object
getDataType([]) //Array
getDataType(true) //Boolean

map、Math.max实现最大id值+1

const arr= [
  { id: 1, bookname: '西游记', author: '吴承恩', publisher: '北京图书出版社' },
  { id: 2, bookname: '红楼梦', author: '曹雪芹', publisher: '上海图书出版社' },
  {
    id: 3,
    bookname: '三国演义',
    author: '罗贯中',
    publisher: '北京图书出版社',
  },
  { id: 4, bookname: '水浒传', author: '施耐庵', publisher: '湖北图书出版社' },
]
const id=Math.max(...arr.map(item=>item.id))+1
console.log(id);