专业编程基础技术教程

网站首页 > 基础教程 正文

不要被误导了:JavaScript深拷贝的5种方法

ccvgpt 2024-10-12 15:09:37 基础教程 7 ℃

注:只有对象才有这个需求,

网上一查,深拷贝有五种,这标题误人!!!

不要被误导了:JavaScript深拷贝的5种方法

概念介绍

  • 深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象;
  • 浅拷贝:不在堆内存中重新开辟空间,只复制栈内存中的引用地址。本质上两个对象(数组)依然指向同一块存储空间

1、靠谱:JSON暴力转化

通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。

var obj = {name:'6666',a:123}
var obj2 = JSON.parse(JSON.stringify(obj

这种方式对于大结构复杂数据很有效,注:当值为undefined、function、symbol等会在转换过程中被忽略。

2、靠谱:利用循环和递归的方式

function deepClone(obj, newObj) {
  var newObj = newObj || {};
  for (let key in obj) {
    if (typeof obj[key] == 'object') {
    newObj[key] = (obj[key].constructor === Array) ? [] : {}
    deepClone(obj[key], newObj[key]);
    } else {
    newObj[key] = obj[key]
    }
  }
  return newObj;
}

注意设置临界值在循环递归中(typeof obj[key] == ‘object’),否则会造成死循环。

3、靠谱:lodash函数库实现深拷贝

lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝

4、靠谱:JQuery的extend()函数 (推荐在JQuery项目中使用,其他项目依然推荐是用递归函数)

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);

5、不靠谱:Object.assign()拷贝

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

6、不靠谱:ES6解构赋

let a = {key1: 13333}
let b = {...a} 
b.key1 = 2444 
console.log(a) // {key1:2444}

只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。

Tags:

最近发表
标签列表