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] = 100
console.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()) //10
console.log(copyObj2.getNum()) //单身狗
其他方法;
一、假如你用jquery,可以使用$.extend()
亲测均有效
var copyarr = $.extend(true, [], arr1);
copyarr[1] = "888" console.log(copyarr); //[1,888,3,4,5,六,七]
console.log(arr1); //[1,2,3,4,5,六,七]
var copyarr = $.extend(true, {}, obj2);
copyarr.getNum = function(){
return "这是测试"
} console.log(copyarr.getNum()); //这是测试
console.log(obj2.getNum()); //10
js数据处理-----数据拷贝的更多相关文章
- (六)Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法
(六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...
- 用js把数据从一个页面传到另一个页面
用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...
- MetricGraphics.js – 时间序列数据的可视化
MetricsGraphics.js 是建立在D3的基础上,被用于可视化和布局的时间序列数据进行了优化.它提供以产生一个原则性的,一致的和响应式的方式的图形常见类型的简单方法.该库目前支持折线图,散点 ...
- docker数据拷贝
docker数据拷贝的方式有很多种,下面介绍几种数据拷贝的方式:此处只是介绍几种简易的方式,更多方式可以google下. 从容器中向主机拷贝数据 docker cp <containerId&g ...
- zoeDylan.js框架-数据底层
zoeDylan.js是墨芈自己写的一套前端框架,不过由于墨芈经验不足,所以框架内部代码有些混乱. 墨芈写这套框架的目的是为了存储以后做前端开发过程中的一些代码,简单的说这套框架就是一个大杂烩. 这套 ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- js 判断数据是否为空
js 判断数据是否为空 // var a = ""; // var a = " "; // var a = null; // var a = undefined ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
随机推荐
- HR面试总结
求职面试HR最欣赏的自我介绍 2015-02-25 来源:www.cnrencai.com 浏览:391 明明很有能力的你,在面试中却不能发挥出色?来看看是不是自我介绍环节出了问题. 回答面试题目 ...
- js字符串相关方法
<script> // 使用索引位置来访问字符串中的每个字符: var carname = 'Volvo XC60'; var character = carname[7]; consol ...
- 【知识强化】第四章 指令系统 4.3 CISC和RISC的基本概念
那么我们进入本章的最后一节,CISC和RISC. 我们先来回顾一下,我们这一章的一个概览.我们之前已经把指令格式和指令的寻址方式都讲完了,这两部分呢是本章的一个重点.而本章的这一部分,CISC和RIS ...
- linux学习-系统监控工具
系统监控工具 come from:https://blog.csdn.net/free050463/article/details/82842273top.free.vmstat.iostat.pma ...
- 二、Angular项目创建、安装、启动
1.项目创建,进入预先存放项目的路径,命令行执行 ng new ProjectName 创建成功后的项目 2.项目安装,进行项目中执行命令 npm install 3. 项目运行,执行命令 ng s ...
- springboot使用异步查询数据
主要适用于需要查询多种类型的数据,而且二者的参数没有关联的情况. 1.开启异步调用注解 2.创建抽象类,定义相关方法 /** * @author:YZH * time: 2019/8/8 12:16 ...
- Codeforces 776E: The Holmes Children (数论 欧拉函数)
题目链接 先看题目中给的函数f(n)和g(n) 对于f(n),若自然数对(x,y)满足 x+y=n,且gcd(x,y)=1,则这样的数对对数为f(n) 证明f(n)=phi(n) 设有命题 对任意自然 ...
- 英语单词cylindern
cylindern 来源——fdisk -l [root@centos65 ~]# fdisk -l Disk /dev/sda: 214.7 GB, 214748364800 bytes 255 h ...
- 【Linux】【Kibana】解决Kibana启动失败:Data too large问题
今天重启Kibana容器,结果启动不了,一看日志发现是Data数据量太大报错. FATAL [circuit_breaking_exception] [parent] Data too large, ...
- 修改element中v-loading的自定义图片
/*elementui loading css 覆盖 开始*/ .el-loading-spinner .circular{ width: 42px; height: 42px; animation: ...