摘要:回顾一下我们总结的常用的深拷贝完整方案实现一个函数,可以对中的种主要的数据类型包括进行值复制对数组深拷贝的简单方法总结循环实现数组的深拷贝只适应单层数组结构方法实现数组的深拷贝只适应单层数组结构方法实现数组的深拷贝只适应单层数组结构扩展
回顾一下我们总结的常用的深拷贝完整方案
实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制
function clone(obj){ var result; switch(typeof obj){ case "undefined": break; case "string": result = obj+""; break; case "number": result = obj-0; break; case "boolean": result =obj; break; case "object": if(obj ===null){ result = null; } else { if(Object.prototype.toString.call(obj).slice(8,-1)==="Array"){ result=[]; for(var i=0;i对数组深拷贝的简单方法总结 for 循环实现数组的深拷贝
var arr = [1,2,3,4,5];//只适应单层数组结构 var arr2 = copyArr(arr) function copyArr(arr) { let res = [] for (let i = 0; i < arr.length; i++) { res.push(arr[i]) } return res }slice 方法实现数组的深拷贝
var arr = [1,2,3,4,5] //只适应单层数组结构 var arr2 = arr.slice(0) console.log(arr) //(5) [1, 2, 5, 4, 5] console.log(arr2) //(5) [1, 2, 5, 4, 5]concat 方法实现数组的深拷贝
var arr = [1,2,3,4,5] //只适应单层数组结构 var arr2 = arr.concat() console.log(arr) //(5) [1, 2, 5, 4, 5] console.log(arr2) //(5) [1, 2, 5, 4, 5]ES6扩展运算符实现数组的深拷贝
var arr = [1,2,3,4,5] //只适应单层数组结构 var [ ...arr2 ] = arr console.log(arr) //(5) [1, 2, 5, 4, 5] console.log(arr2) //(5) [1, 2, 5, 4, 5]对象的深拷贝的简单方法总结for循环实现对象的深拷贝
//如果包含属性值是数组,无法深层拷贝数组里面的数据 var obj = { name: "jingjing", sex: "girl", old: "18" } var obj2 = copyObj(obj) function copyObj(obj) { let res = {} for (var key in obj) { res[key] = obj[key] } return res }转换成json再转换成对象实现对象的深拷贝(对象里面不包含函数的情况下使用,注意这种直接粗暴的方法只能拷贝json格式数据对象,函数会丢失)
var obj = { name: jingjing", sex: "girl", old: "18" } var obj2 = JSON.parse(JSON.stringify(obj))扩展运算符实现对象的深拷贝(随着es6的逐渐推广,此招儿推荐使用)
//如果包含的属性值是数组,无法深层拷贝数组里面的数据 var obj = { name: "jingjing", sex: "girl", old: "18" } var { ...obj2 } = obj obj.old = "22" console.log(obj) //{name: "jingjing", sex: "girl", old: "22"} console.log(obj2) //{name: "jingjing", sex: "girl", old: "18"}项目中常用到的深拷贝方法大概先总结到这里,有些es6的方法用起来实在是简洁,高效
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89996.html
摘要:中具有两种数据类型的值,分别是基本类型值和引用类型值。在中,基本类型值指的是简单的数据段,引用类型值指那些可能由多个值构成的对象。基本数据类型基本数据类型未定义的值的默认值尚未存在的对象数字字符串。 整理以及总结一下,回溯下基础。 ECMAScript中具有两种数据类型的值,分别是 基本类型值和引用类型值。 在ECMAScript中,基本类型值指的是简单的数据段,引用类型值指那些可能由...
摘要:基本数据类型将变量和值一起放在栈内存引用数据类型则将变量放在栈内存而将值放在堆内存。该怎么理解没图我说个假设有个变量在内存中是这样的栈内存中的变量指向堆内存中一块内存相当于持有该内存的指针,而那块内存中存储变量的相关内容。 趁着周五没那么忙,抽个空整理一下最近使用比较频繁的一个小技术 对象的深复制。感觉啊,这个标题和今天的节日(假装不知道原来是情人节)那么遥相呼应。啊,没有女朋友?没有...
摘要:什么是深拷贝浅拷贝见名知义,无论是深拷贝还是浅拷贝,都是的问题。使用如下以上就是关于中的深拷贝与浅拷贝的知识和如何进行深拷贝的知识了,如果有错或者有其他方式的话,欢迎在下面留言评论啦 前言 最近在写项目的时候涉及到一些父子组件传递个对象或者数组通信啥的,或者是直接复制添加对象啥的,直接使用赋值的时候总会出错。一查原来是浅拷贝的问题,就从网上找了点资料,汇总到这里来了。 1 什么是深拷贝...
摘要:对于深拷贝,浅拷贝的概念不多说,概念可以自行百度哟这里对深拷贝对象进行一些研究只有值类型数据的深拷贝针对只有值的数据对象,下面一行代码足以不严谨的简单的深拷贝注意这里问题存在没有对参数做检验判断是否对象的逻辑不够严谨没有考虑数组的兼容进阶深 对于深拷贝,浅拷贝的概念不多说,概念可以自行百度哟!这里对深拷贝对象进行一些研究! 只有值类型数据的深拷贝 针对只有值的数据对象,下面一行代码足以...
阅读 3336·2021-10-11 11:06
阅读 2147·2019-08-29 11:10
阅读 1900·2019-08-26 18:18
阅读 3210·2019-08-26 13:34
阅读 1533·2019-08-23 16:45
阅读 1004·2019-08-23 16:29
阅读 2762·2019-08-23 13:11
阅读 3176·2019-08-23 12:58