深拷贝和浅拷贝笔记

浅拷贝

只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

• 新旧对象共享内存，修改其中一个则会影响另外一个，则为浅拷贝；

1、直接遍历

数组

var array = [1, 2, 3, 4];
function copy (array) {
   let newArray = []
   for(let item of array) {
      newArray.push(item);
   }
   return  newArray;
}
var copyArray = copy(array);
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

对象

function clone(obj) {
  if (obj == null || typeof obj !== 'object') return obj
  var newObj = Array.isArray(obj) ? [] : {}
  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      newObj[i] =obj[i]
    }
  }
  return newObj
}

#####2、array.slice(start,end)
返回一个从已有的数组中截取一部分元素片段组成的新数组（不改变原来的数组！）
start表示是起始元素的下标，　end表示的是终止元素的下标(不包括end)
当slice()不带任何参数的时候，默认返回一个长度和原数组相同的新数组

var array = [1, 2, 3, 4];
var copyArray = array.slice();
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

3、concat()

concat() 方法用于连接两个或多个数组。( 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。)
用法：array.concat(array1,array2,…,arrayN)
不带参数array.concat()相当于array.concat([])

var array = [1, 2, 3, 4];
var copyArray = array.concat();
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

4、Object.assign

var obj2 = Object.assign({}, obj)

深拷贝

会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

• 新旧对象不共享内存，修改其中一个不会影响另一个，则为深拷贝。

1、递归复制

//实现深拷贝函数
function deepClone(data) {
    const type = this.judgeType(data);
    let obj = null;
    if (type == 'array') {
        obj = [];
        for (let i = 0; i < data.length; i++) {
            obj.push(this.deepClone(data[i]));
        }
    } else if (type == 'object') {
        obj = {}
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                obj[key] = this.deepClone(data[key]);
            }
        }
    } else {
        return data;
    }
    return obj;
}

function judgeType(obj) {
    // tostring会返回对应不同的标签的构造函数
    const toString = Object.prototype.toString;
    const map = {
        '[object Boolean]': 'boolean',
        '[object Number]': 'number',
        '[object String]': 'string',
        '[object Function]': 'function',
        '[object Array]': 'array',
        '[object Date]': 'date',
        '[object RegExp]': 'regExp',
        '[object Undefined]': 'undefined',
        '[object Null]': 'null',
        '[object Object]': 'object',
    };
    if (obj instanceof Element) {
        return 'element';
    }
    return map[toString.call(obj)];
}

2、JSON.parse(JSON.stringify(obj))实现

let objClone = JSON.parse(JSON.stringify(obj))

弊端：

• 1)、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
• 2)、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
• 3)、如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
• 4)、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
• 5)、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
• 6)、如果对象中存在循环引用的情况也无法正确实现深拷贝。

3、JQ的extend方法

$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

let objClone = $.extend(true,{},obj);

4、lodash的_.cloneDeep

var _ = require('lodash')
let objClone = _.cloneDeep(obj)