As it is well known to us all, 拷贝对象分为浅拷贝和深拷贝,深拷贝只会复制地址,深拷贝才会复制内容,那么 JS 如何进行这两种拷贝呢?

# 浅拷贝

## Object.assign() 方法

[Object.assign() - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

```js
var object1 = {
a: [1],
b: 2,
c: 3
};

var object2 = Object.assign({}, object1);
console.log(object2.a);// [1]

object1.a[0] = 111
console.log(object2.a);// [111]
```

# 深拷贝

## $.extend() 方法

[jQuery.extend() | jQuery API Documentation](https://api.jquery.com/jQuery.extend/)

```js
var jsdom = require("jsdom").JSDOM;
var window = new jsdom(``).window;
var $ = require('jquery')(window);

var object1 = {
a: [1],
b: 2,
c: 3
};

var object2 = $.extend(true, {}, object1);
console.log(object2.a);// [1]

object1.a[0] = 111
console.log(object2.a);// [1]
```

## \_.cloneDeep() 方法

[cloneDeep | Lodash Documentation](https://lodash.com/docs/4.17.11#cloneDeep)

```js
var _ = require("lodash");

var object1 = {
a: [1],
b: 2,
c: 3
};

var object2 = _.cloneDeep(object1);
console.log(object2.a);// [1]

object1.a[0] = 111
console.log(object2.a);// [1]
```

## 注意

### lodash 拷贝数组,数组上的属性会丢失

作者已经指出这不是 bug,而是这样设计的:[clone does not copy array properties · Issue #3521 · lodash/lodash](https://github.com/lodash/lodash/issues/3521)

PS:使用 jquery 拷贝不会这样。

```js
var jsdom = require("jsdom").JSDOM;
var window = new jsdom(``).window;
var $ = require('jquery')(window);
var _ = require("lodash");

var object1 = {
a: [1],
b: 2,
c: 3
};

object1.a.p1 = 123;

var jq_obj = $.extend(true, {}, object1);
var lo_obj = _.cloneDeep(object1);

console.log(jq_obj.a);// [1, p1: 123]
console.log(lo_obj.a);// [1]
```

JS-拷贝对象的更多相关文章

  1. 夺命雷公狗—angularjs—23—copy拷贝对象

    copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp&qu ...

  2. js:对象的创建(为prototype做铺垫)

    /**  *在js中并不存在类,所以能够直接通过Object来创建对象,可是使用这样的方式创建有一  *弊端:因为没有类的约束,无法实现对象的反复利用,而且没有一种规范约定,在操作时easy带来问题. ...

  3. JS window对象 返回前一个浏览的页面 back()方法

    JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back();   返回前一个浏览的页面 back ...

  4. 深入 js 深拷贝对象

    前言 对象是 JS 中基本类型之一,而且和原型链.数组等知识息息相关.不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题. 顾名思义,深拷贝就是完完整整的将一个对象从内存中拷贝一份出来.所以无论 ...

  5. js定义对象的几种容易犯的错误

    //js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...

  6. 模仿console自写函数打印js的对象

    本以为写个递归函数就可以将js的对象打印出来. 当然第一个想到的估计是JSON.stringify() 这个函数.但这个函数打印到浏览器 显示效果不友好.最友好的显示肯定是 控制台打印咯. 结果尝试打 ...

  7. js自定义对象

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...

  8. Atitit 跨平台异常处理(2)--------异常转换 -----java c# js异常对象结构比较and转换

    Atitit 跨平台异常处理(2)--------异常转换 -----java c# js异常对象结构比较and转换 { "@type":"java.lang.Runti ...

  9. js中对象使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; ...

  10. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

随机推荐

  1. LINUX为什么要进行内核移植 内核移植的作用

    LINUX为什么要进行内核移植 内核移植的作用,不移植能用么?   LZ的问题应该是为什么要重新编译内核吧.既然你已经可以跑了,证明你现在用的内核已经移植到你用的硬件上,自然你也不需要做什么移植.通常 ...

  2. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  3. JarvisOJ 逆向Writeup

    1. 爬楼梯 先运行apk,查看具体的功能 爬一层楼是可以点击的,爬到了,看FLAG是不可以点击的.我们可以大致的了解到到了具体的楼层才可以看到flag,多次打开软件,楼层数目是随机的. 用APKID ...

  4. CSS属性去除图片链接时的虚线框

    CSS 之outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline 属性是一个简写属性,用于设置元素周围的轮廓线.注释:轮廓线不会占据空间,也不一定是 ...

  5. <读书笔记>《锋利的jQuery》

    2016年4月3日 第4章 jq中的事件和动画 4.1 jq中的事件 (1)window.onload.$(documet).ready()的区别: 1.执行时机:window.onload需要整个页 ...

  6. 解决myeclipse validation验证javascript导致速度变慢的现象

    参考:https://jingyan.baidu.com/article/ca41422fe094251eae99ede7.html

  7. Intellij Idea乱码解决方案都在这里了

    乱码场景 使用Intellij Idea经常遇到乱码问题,可以总结为以下几类乱码的场景. 1.工程代码乱码. 2.main方法运行,控制台乱码. 3.tomcat运行,控制台乱码. 解决方案 1.工程 ...

  8. Pycharm2019版官方版本激活码,无需破解

    AHD9079DKZ-eyJsaWNlbnNlSWQiOiJBSEQ5MDc5REtaIiwibGljZW5zZWVOYW1lIjoiSmV0IEdyb3VwcyIsImFzc2lnbmVlTmFtZ ...

  9. 【转】Ubuntu下外放有声音 耳机没声音

    真是使用linux每天都有新的发现啊,今天早上起来用电脑,想听几首歌,插上耳机后发现没声音,我还以为是耳机坏了,就把耳机插在了手机上,发现耳机有声音,很纳闷,我象是不是电脑接口有问题了,但是在进系统的 ...

  10. fusionCharts图表在客户端导出图片

    前提:要具备三个文件:FusionCharts.js / FusionChartsExportComponent.js / FCExporter.swf 1.引用 js 文件 <script t ...