深浅拷贝及实现方式

JS数据类型分为基本数据类型引用数据类型,基本数据类型保存的是,引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址,深拷贝会创建新的内存地址。

浅拷贝:只拷贝第一级属性,如果某个属性又是一个内嵌的子对象,不会进入子对象中拷贝子对象的内容
深拷贝:即可用第一级属性,如果某个属性又是一个内嵌的子对象,深拷贝会进入子对象中,继续拷贝内嵌子对象及其内容

浅拷贝方法

  • 直接对象赋值
  • Object.assign

深拷贝

  • JSON.stringify转为字符串再JSON.parse转对象
  • 深度递归遍历

基本数据类型:string、 number、boolean、undefined、null
引用数据类型:Object、Array、Function

一.浅拷贝

  1. 直接对象赋值
let a = [0,1,2,3,4];
b = a;
console.log(a === b);
a[0] = 1;
console.log(a, b)

结果:
深浅拷贝及实现方式_第1张图片
2. 解构赋值

var obj1 = {
     a: 1, b: 2}
var obj2 = {
     ...obj1}
obj2.a = 4
console.log(obj1, obj2)

在这里插入图片描述

  1. Object.assign:实现浅拷贝及一层的深拷贝
    对象的合并 ES6中的Object.assign(),第一个参数必须是个空对象。

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
注意点!严格来说,Object.assign() 既不是深拷贝,也不是浅拷贝——而是第一级属性深拷贝,第一级以下的级别属性浅拷贝。

let obj1 = {
      
	a: {
      b: 1}, 
	c: 2
}
let obj2 = Object.assign({
     },obj1)
obj2.a.b = 3;  //第二层,obj1变了,是浅拷贝
obj2.c = 3;  //第一层,obj1不变,是深拷贝
console.log(obj1);  
console.log(obj2); 

深浅拷贝及实现方式_第2张图片
二.深拷贝

  1. JSON.stringify转为字符串再JSON.parse

JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象
缺点:当值为undefined、function、symbol 会在转换过程中被忽略

function deepClone(obj) {
     
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone;
}
let a = [0, 1, [2, 3], 4]
let b = deepClone(a)
a[0] = 1
a[2][0] = 1
console.log(a)  // [1,1,[1,3],4]
console.log(b)  // [0,1,[2,3],4]
  1. 深度递归遍历
function deepClone(oldObj) {
     
	if (oldObj==null) {
     
		return null;
	}
	if (typeof oldObj !=="object") {
     
		return oldObj;
	}
	var newObj = Array.isArray(oldObj)?[]:{
     };
	for (var key in oldObj) {
     
		newObj[key] = deepClone(oldObj[key]);
	}
	return newObj;
}

let a1 = 10;
let arr1 = [1, 2, 3];
let lilei = {
     
	sname:"Li Lei",
	sage:11,
	address:{
     
		city:"北京",
		street:"万寿路"
	}
}

let a2 = deepClone(a1);
console.log(a2);
let arr2 = deepClone(arr1);
console.log(arr2);
console.log(arr1 == arr2);
var lilei1 = deepClone(lilei);
console.log(lilei1);
console.log(lilei == lilei1); //false
console.log(lilei.address == lilei1.address); //false

  1. jquery实现深拷贝
    jquery 提供一个 $.extend 可以用来做深拷贝;
var obj = {
     a:{
     name:"kaiqin",age:19}};
var obj1 = {
     b:{
     name:"wang",age:19}};
var obj2 = $.extend(true,{
     },obj,obj1); //true为深拷贝,false为浅拷贝,默认为false
obj2.a.name="zhang";
console.log(obj2)
//{a: {name: "zhang", age: 19},b: {name: "wang", age: 19}}
console.log(obj)
//{
     {a:{name:"kaiqin",age:19}}}

你可能感兴趣的:(js)