面试题笔记-赋值、浅拷贝、深拷贝的区别

数据类型

基本数据类型：string | number | boolean | undefined | null | Symbol
引用数据类型：Object | Array | Function | Date

堆和栈

堆(heap)：动态分配的内存，大小不定也不会自动释放
栈(stack)：自动分配的内存空间，它由系统自动释放

基本数据类型：基本类型值在内存中占据固定大小，保存在栈内存中
引用数据类型：引用类型的值是对象，保存在堆内存中，而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址

赋值

var person = {
  name: '张三',
  age: 18,
  hobby: ['编码', '学习']
}

// 赋值
var person1 = person
person1.name = '李四'
person1.age = 20
person1.hobby[0] = '看电影'

console.log('person:', person)
// {
//   name: '李四',
//   age: 20,
//   hobby: ['看电影', '学习']
// }
console.log('person1:', person1)
// {
//   name: '李四',
//   age: 20,
//   hobby: ['看电影', '学习']
// }

// 浅拷贝
function clone(obj){
  var newObj = {}
  for(let key in obj){
    if(obj.hasOwnProperty(key)){
      newObj[key] = obj[key]
    }
  }
  return newObj
}
// Object.assign()
// ...
// concat

var person2 = clone(person)
person2.name = '王五'
person2.age = 22
person2.hobby[0] = '购物'

console.log('person:', person)
// {
//   name: '李四',
//   age: 20,
//   hobby: ['购物', '学习']
// }
console.log('person2:', person2)
// {
//   name: '王五',
//   age: 22,
//   hobby: ['购物', '学习']
// }

// 深拷贝
function cloneDeep(value){
  if(value instanceof Date) return new Date(value)
  if(value instanceof RegExp) return new RegExp(value)
  if(value === null) return null
  if(typeof value !== 'object') return value
  var newValue = new value.constructor()
  for(let key in value){
    if(value.hasOwnProperty(key)){
      newValue[key] = cloneDeep(value[key])
    }
  }
  return newValue
}

var person3 = cloneDeep(person)
person3.name = '老刘'
person3.age = 24
person3.hobby[0] = '逛街'

console.log('person:', person)
// {
//   name: '李四',
//   age: 20,
//   hobby: ['购物', '学习']
// }
console.log('person3:', person3)
// {
//   name: '老刘',
//   age: 24,
//   hobby: ['逛街', '学习']
// }

// 简易版深拷贝 
function cloneDeepEasy(value){
  return JSON.parse(JSON.stringify(value))
}
// 缺点：不能拷贝Date、RegExp、function