浅拷贝
只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
- 新旧对象共享内存，修改其中一个则会影响另外一个，则为浅拷贝；
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)
