近期项目因为怕数据污染所以用到了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内核原理与分析》第三周作业

    操作系统如何工作的 第二章的基础知识 计算机的三大法宝:存储程序计算机,函数调用堆栈机制,中断. 堆栈:堆栈是C语言程序运行时必须使用的几率函数条用路径和参数存储的空间,具体作用分为:记录函数条用的框 ...

  2. 【转】Android系统中Fastboot和Recovery所扮演的角色。

    Android 刷机过程中 Fastboot 和 Recovery 的作用是什么? 自己在知乎的一篇回答,,现在翻出来放到博客,希望可以解答更多人的疑惑,抑或有什么理解上的错误,也望网友指出~ 今天恰 ...

  3. Python3教程—很经典可以快速上手

    原文地址:https://www.runoob.com/python3/python3-tutorial.html Python 3 教程 Python 的 3.0 版本,常被称为 Python 30 ...

  4. Java算法 -- 桶排序

    桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...

  5. redis中key和value的存储大小限制

    String类型:一个String类型的value最大可以存储512M List类型:list的元素个数最多为2^32-1个,也就是4294967295个. Set类型:元素个数最多为2^32-1个, ...

  6. Oracle 性能分析

    1.--查出耗时长的 10条SQL select * from (select v.sql_id, v.child_number, v.sql_text, v.elapsed_time, v.cpu_ ...

  7. 小数末尾是0的,不显示0,有值才显示 StringFormat

    JAVA public static void main(String[] args) { DecimalFormat df = new DecimalFormat("###.##" ...

  8. Linux云主机(离线)搭建本地yum源

    下载CentOS镜像 http://mirror.nsc.liu.se/centos-store/7.3.1611/isos/x86_64/ 离线yum源的配置 1.上传下载的镜像源iso 2.挂载i ...

  9. PAT 甲级 1080 Graduate Admission (30 分) (简单,结构体排序模拟)

    1080 Graduate Admission (30 分)   It is said that in 2011, there are about 100 graduate schools ready ...

  10. react 模板备份

    /** * Created by hldev on 17-6-14. * 上市公司详情展示界面 */ import React, {Component} from "react"; ...