数组、对象拷贝

197 阅读2分钟

深拷贝与浅拷贝的区别是:深拷贝是值拷贝,浅拷贝是址拷贝

深拷贝后的变量被修改以后,被拷贝的变量的值不会发生修改,而浅拷贝的数据被修改以后,被拷贝的值会发生对应的修改。

首先,先说数组的拷贝:

数组

浅拷贝的用法一般是:

const a = [1, 2, 3];
const b = a;

即可。

但深拷贝就有各种方法实现了。以下是一系列的实现方法:

1. ES6的解构赋值:
const a = [1, 2, 3];
const b = [...a];

  值得注意的是,该方法只适用于数组内的元素是基本数据类型

2. 数组的slice()方法:
slice() 方法可从已有的数组中返回选定的元素。

  arrayObject.slice(start,end)

  该方法返回一个新的数组,包含从 start 到 end (不包括该元素,数学上来讲是左闭右开,即包含左,不含右)的 arrayObject 中的元素。用法是:

const a = [1, 2, 3];
const b = a.slice(0);

  同样,该方法也只适用于数组内的元素是基本数据类型

3. 数组的concat()方法:

  concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。用法是:

const a = [1, 2, 3];
const b = a.concat();

  该方法也只适用于数组内的元素是基本数据类型

4. 把数组转成字符串,再转回数组:
const a = [1, 2, 3];
const b = a.join('');   // 数组转字符串
// const b = a.toString(); 字符串转数组
const c = b.split('');
5. for循环实现数组的深拷贝:
const a = [1, 2, 3];
let b = [];
a && a.foreach(item=>{
 b.push(item)   
})
6. 使用lodash函数库(巨推荐使用):
const a = [1, 2, 3];
const b = cloneDeep(a);

对象

浅拷贝的用法一般是:

const a = {
    aa: "xuxu"
};
const b = a;

即可。

深拷贝有以下实现方法:

1. Object.assgin():

  方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

const a = {
    aa: 'xuxu'
};
const b = {};
Object.assgin(b, a);

  注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。该方法只能深拷贝基本数据类型的数据,不是真正意义的深复制,当然,如果要复制的对象或者数组都是基本数据类型,那就大胆用吧。   

2. for循环实现对象的深拷贝:
const a = {
    aa: 'xuxu'
};
const b = {};
for(let i in a){
    b[i] = a[i];
}
3. 把对象转成字符串,再转回对象:
const a = {
    aa: 'xuxu'
};
const b = JSON.stringify(a);  // 对象转字符串
const c = JSON.parse(b); // 字符串转对象
4. 使用lodash函数库(巨推荐使用):
const a = {
    aa: 'xuxu'
};
const b = cloneDeep(a);