分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

js数据处理-----数据拷贝

发布时间:2023-09-06 02:11责任编辑:赖小花关键词:js

一、理解深拷贝与浅拷贝

如下代码,把 a  的值赋给  b ,修改 b 的值会直接修改到  a 的值,这叫浅拷贝。(其实他们修改的是同一个对象)

var a = [1,2,3,4,5];var b = a;b[2] = 100;console.log(a); ?????????//[1,2,100,4,5]console.log(b);//[1,2,100,4,5] ???

  把 obj1  的值赋给 obj2  ,修改 obj2 的值,不会影响到 obj1 的值  ,这叫深拷贝

var obj1 = [1,2,3,4,5]var obj2 = [];for(var i = 0; i < obj1.length; i++){obj2.push(obj1[i])}obj2[2] = 100console.log(obj1); ?????//[1,2,3,4,5]console.log(obj2) ??????//[1,2,100,4,5]

  

二、深度拷贝的多种情况

这里我列举以下几种例子,在以下的拷贝方法里也会将各种方法做一个比较,例子如下

var obj1 = {name:"张三",age:18}var obj2 = {name:"王五",intersects:{one:"游泳",two:"看书"},getNum: function(){  return 10;},numArr:["猫","狗","鸡"]}var arr1 = [1,2,3,4,5,"六","七"]var arr2 = [{name:"张三",age:18},{name:"王五",age:19}]

  方法一:转为JSON格式

亲测:obj1,arr1,arr2 均有效,obj2无效,

原因:这种方法的缺陷是会破坏原型链,并且无法拷贝属性值为function的属性

var copyObj2 = JSON.parse(JSON.stringify(obj1))copyObj2.name = "哈哈"console.log(obj1) ???????//{name:"张三",age:18}console.log(copyObj2) //{name:"哈哈",age:18}

  方法二:采用递归的方式

  亲测均有效

function copy(obj1, obj2) {var obj2 = obj2 || {};for(var name in obj1) {if(typeof obj1[name] === "object") {obj2[name] = (obj1[name].constructor === Array) ? [] : {};copy(obj1[name], obj2[name]);} else {obj2[name] = obj1[name];}}return obj2;}var copyObj2 = {}copyObj2 = copy(obj2,copyObj2);copyObj2.getNum = function(){return "单身狗"}console.log(obj2.getNum()) ???????//10console.log(copyObj2.getNum()) ?//单身狗

  

js数据处理-----数据拷贝

原文地址:https://www.cnblogs.com/qqing/p/9510631.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved