近期项目因为怕数据污染所以用到了js的对象复制

js里的对象都是继承自object,是引用类型,所以无法通过=号复制

所以整理了一些常用的复制方法,如下

一、通过JSON序列化和反序列化创建新的对象

 var obj = { a: 1, b: '2' };
var newObj = JSON.parse(JSON.stringify(obj));

测试一下:

obj.a = 3;//obj和newObj指向了不同的引用,所以newObj的b属性并不会变化
console.log(newObj);
console.log(obj);

测试结果:

然而,这个方法并不能进行深度复制,对于function属性并不能复制到。那么就有了下面的深度复制方式

二、深度对象复制

function clone(o) {
var s = {};
for (var k in o)
s[k] = typeof o[k] === 'object' ? clone(o[k]) : o[k];
return s;
}

测试一波:

var obj = {
a: 1,
b: 'b',
c: false,
d: new Date(),
e: { e: 1 },
f: function () { console.log(this.g) },
g: [1, 2]
};
var newObj = clone(obj);
console.log(newObj);
newObj.f();

测试结果:

二、Array的快速复制

Array.prototype.concat可以拼接两个数组并返回新对象,利用这一特性,可以快速复制一个数组

var arr1 = [1];
var arr2 = [].concat(arr1);

测试一波:

JavaScript对象复制的更多相关文章

  1. JavaScript对象复制(一)(转载)

    在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...

  2. Javascript 对象复制

    如果对象只是一个数据集,可采用json化再反json化的方式克隆一个对象,这个过程会丢失对象的方法.效率比较低. 可以采用如下递归的方式复制一个对象. function clone(target) { ...

  3. Javascript 对象复制(深浅拷贝)

    一.数据类型分类: 基本变量 引用类型 二.什么叫做指针指向 栈内存.堆内存.指针指向(如下红圈圈的斜线). 三.赋值.拷贝.引用区别? 赋值指一个变量赋予某个值,包含两种方式,一种是直接量,另一种, ...

  4. JavaScript对象复制(二)

    <script> function copy(a) { ret = {}; for (sth in a) { temp = a[sth]; if (temp instanceof Arra ...

  5. 【转】JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b. ...

  6. JavaScript对象的深浅复制

    前言 从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性. 在复制对象时,除了要复 ...

  7. 如何深度复制一个javascript对象

    前言 最近有人问我,如何将一个对象复制一份,因为他遇到了一个需求,需要将后端获取的数据,保存一份,原始数据会因为交互而发生变化,最终需要对比两份数据的异同. 他是一个刚入行的小朋友,他的实现方式就是新 ...

  8. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  9. JS对象复制

    在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...

随机推荐

  1. 20189220 余超《Linux内核原理与分析》第七周作业

    分析Linux内核创建一个新进程的过程 基础知识概括 操作系统内核实现操作系统的三大管理功能,即进程管理功能,内存管理和文件系统.对应的三个抽象的概念是进程,虚拟内存和文件.其中,操作系统最核心的功能 ...

  2. pandas filter数据筛选

    https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...

  3. PhpStorm使用sftp实现代码自动上传服务器

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/huihui940630/article/ ...

  4. 使用create-react-app遇到问题解决方案汇总

    使用create-react-app时遇到Module not found问题 转 https://blog.csdn.net/wkq_1212/article/details/90291558 本来 ...

  5. uni-app v-for循环遍历 动态切换class、动态切换style

    动态切换class,主要代码::class="i.themColor"  <view v-for="i in htmlJSON" class=" ...

  6. Tensorflow问题

    TypeError: 'urban' has type str, but expected one of: bytes 在前面添加"b"(例如,b'urban'),或者处理为var ...

  7. tomcat关闭异常导致的项目无法重启

    有时候 会莫名其妙的,项目启动时候 报tomcat启动异常.重启项目 甚至重启电脑 都没用. 这个时候 ,一般是代码有问题... 这次遇到的问题 就是 引用了外部的jar包,里面有一个自定义异常.但是 ...

  8. 一起学习epoll

    epoll 是Linux内核中的一种可扩展IO事件处理机制,最早在 Linux 2.5.44内核中引入,可被用于代替POSIX select 和 poll 系统调用,并且在具有大量应用程序请求时能够获 ...

  9. Java Servlet:服务器小程序

    servlet:服务器小程序 servlet是一个接口,接口是一种规范,因此servlet是一种规范 一个类声明为抽象类的原因: 不包含抽象方法,不想被实例化 包含抽象方法,子类有对抽象方法的不同实现 ...

  10. laravel composer vendor 目录加载类库详细 之后做说明

    composer installLoading composer repositories with package informationInstalling dependencies (inclu ...