克隆对象&&数组(一)
Jonnzer Lv4

1 从数据类型说起

JavaScript的数据类型:

  • 基本类型: Null,undefined,number,string,Boolean 存放在栈内存的简单数据,可以直接访问
  • 引用类型:Array,Object,Function 存放在堆内存,存放的是该对象的地址指针

2 深浅拷贝由来

引用类型的数据,因为指向指针的问题,浅拷贝就会导致指向同一处,那么修改拷贝的任一者,都会导致全部都改了。
这时候,就需要深拷贝,它可以开辟新的内存地址,让拷贝的对象们指向不同,这样就不会互相影响了。

3 浅拷贝

浅拷贝就是拷贝第一层的基本类型值,以及第一层的引用类型地址
(1)for…in…遍历属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function shallowClone(copyObj) {
var obj = {};
for ( var i in copyObj) {
obj[i] = copyObj[i];
}
return obj;
}
var x = {
a: 1,
b: { f: { g: 1 } },
c: [ 1, 2, 3 ]
};
var y = shallowClone(x);
console.log(y.b.f === x.b.f); // true

(2)Object.assign()
将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。只遍历一层
基础用法

1
2
3
4
5
6
7
8
9
10
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

复制对象(浅)

1
2
3
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

(3) Arrayslice & concat方法
它们虽然在 demo 里看起来像深,其实也是浅拷贝

1
2
3
4
5
6
7
var array = [1,2,3]; 
var array_shallow = array;
var array_concat = array.concat();
var array_slice = array.slice(0);
console.log(array === array_shallow); //true
console.log(array === array_slice); //false,“看起来”像深拷贝
console.log(array === array_concat); //false,“看起来”像深拷贝

(4) 展开语法...
对数组和对象的浅拷贝,类似Object.assign的功能。只能用于可迭代对象。

1
2
3
4
5
6
7
8
9
10
11
12
// 数组
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2]

// 对象
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }
  • 本文标题:克隆对象&&数组(一)
  • 本文作者:Jonnzer
  • 创建时间:2020-07-13 15:12:00
  • 本文链接:https://jonnzer.github.io/2020/07/13/克隆对象&&数组(一)/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论