近期项目因为怕数据污染所以用到了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. 安装关系型数据库MySQL 安装大数据处理框架Hadoop

    作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3161 1.Hadoop的介绍 Hadoop最早起源于Nutch.Nut ...

  2. torch

    1.从数据直接构建tensor x = torch.tensor([5.5,3]) 2.从已有的tensor构建一个tensor.这些方法会重用原来tensor的特征. x = x.new_ones( ...

  3. 【转】使用eclipse的todo标签管理任务

    Eclipse中的一些特殊的注释技术包括:    1.    // TODO —— 表示尚未完成的待办事项.    2.    // XXX —— 表示被注释的代码虽然实现了功能,但是实现方案有待商榷 ...

  4. SpringBoot——读取配置文件@Value和@Configuration比较

    1.@Configuration package com.xgcd.springboot.bean; import org.springframework.boot.context.propertie ...

  5. Mybatis源码研究7:缓存的设计和实现

    Mybatis源码研究7:缓存的设计和实现 2014年11月19日 21:02:14 酷酷的糖先森 阅读数:1020   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  6. 运维笔记--linux环境提示python: command not found

    场景描述: 新部署的容器环境,终端执行python命令,提示没有该命令. 从报错异常可以看出,可能是python环境未安装. 分析思路: 检查python路径: 方式一:type -a python ...

  7. echarjs—阿里历年双十一销售数据统计及预测

    阿里双十一数据统计 <!DOCTYPE html> <html> <head> <title>阿里历年双十一销售数据统计及预测</title> ...

  8. [转]git登录账号密码错误remote: Incorrect username or password

    链接地址:https://baijiahao.baidu.com/s?id=1622020216177100162&wfr=spider&for=pc

  9. [图片问答]LODOP字体设置方法

    字体设置方法:一.整体设置(针对文本项),打印初始化后.增加打印项之前调用本函数LODOP.SET_PRINT_STYLE("FontSize",11);二.单个打印项(针对文本项 ...

  10. [LeetCode] 366. Find Leaves of Binary Tree 找二叉树的叶节点

    Given a binary tree, find all leaves and then remove those leaves. Then repeat the previous steps un ...