01. 认识内存空间（数据的存储），搞懂浅拷贝与深拷贝

一. 内存空间的分配原理

参考文章

基础数据类型：number，string，boolean，null，underfined

引用数据类型：array，obj

• 执行上下文——栈，一端；事件循环机制——队列，两端
• 基本数据类型和引用数据类型的存储机制不一样。基本数据类型的值直接存储在变量对象中；而引用数据类型是将值存放在堆内存中，存储在变量对象中的是指向堆内存的地址。
• 不允许直接访问堆内存中的位置，因此不能直接操作对象的堆内存空间。所以在操作对象时，是在操作对象的引用而不是实际的对象，因此，引用类型的值都是按引用访问的。

 

 2. 对象与数组的深度拷贝和浅拷贝

• 基本类型（number，boolean，string）复制了就互不影响，引用类型（obj）就需要浅拷贝，深拷贝
• 数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。
• 浅拷贝是只是复制了引用的地址，原数组改变会导致新数组也改变；深拷贝则互不影响。

1）数组的浅拷贝：

如果修改了原数组的成员，会同步反映到新数组，只复制了一层对象的属性。

const a1 = [1, 2];

// 方法一：concat
const a2 = a1.concat();
a2[0] = 2;
console.log(a1) // [1, 2]

// 方法二：slice
const a2 = a1.slice();
a2[0] = 2;
console.log(a1) // [1, 2]

// 方法三：es6——Array.from()
const a2 = Array.from(a1);
a2[0] = 2;
console.log(a1) // [1, 2]

// 方法四：es6——扩展运算符
const a2 = [...a1];

// 方法五
const [...a2] = a1;

2） 数组的深度拷贝

原数组和新数组互不影响，复制了所有层级的属性。

const a1 = [1, 2，{sex:man}，[3,4]];

// 方法一：JSON
const a2 = JSON.parse(JSON.stringify(a1))

// 方法二：递归
function deepCopy(old, newObj){
  let newObj = newObj || {};
  for(let i in old){
    if(typeof old[i] === 'object'){
      newObj[i] = (old[i].constructor === Array) ? [] : {};
      deepCopy(old[i], newObj[i]);
    } else {
      newObj[i] = old[i];
    }
    return newObj;
}
const newClass = {};
const oldClass = {
  num: 30,
  name: 'yiban',
  people: {
    man: 25,
    woman: 25
  }
}
deepCopy(oldClass, newClass);

参考文章