JS-拷贝对象
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-拷贝对象的更多相关文章
- 夺命雷公狗—angularjs—23—copy拷贝对象
copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp&qu ...
- js:对象的创建(为prototype做铺垫)
/** *在js中并不存在类,所以能够直接通过Object来创建对象,可是使用这样的方式创建有一 *弊端:因为没有类的约束,无法实现对象的反复利用,而且没有一种规范约定,在操作时easy带来问题. ...
- JS window对象 返回前一个浏览的页面 back()方法
JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 返回前一个浏览的页面 back ...
- 深入 js 深拷贝对象
前言 对象是 JS 中基本类型之一,而且和原型链.数组等知识息息相关.不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题. 顾名思义,深拷贝就是完完整整的将一个对象从内存中拷贝一份出来.所以无论 ...
- js定义对象的几种容易犯的错误
//js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...
- 模仿console自写函数打印js的对象
本以为写个递归函数就可以将js的对象打印出来. 当然第一个想到的估计是JSON.stringify() 这个函数.但这个函数打印到浏览器 显示效果不友好.最友好的显示肯定是 控制台打印咯. 结果尝试打 ...
- js自定义对象
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...
- Atitit 跨平台异常处理(2)--------异常转换 -----java c# js异常对象结构比较and转换
Atitit 跨平台异常处理(2)--------异常转换 -----java c# js异常对象结构比较and转换 { "@type":"java.lang.Runti ...
- js中对象使用
简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
随机推荐
- exception中return方法
public class ExceptionPitfall { public static void main(String[] args) { try { throw new RuntimeExce ...
- css缓存问题
频繁更换样式,会导致样式缓存, 在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了 ...
- LeetCode:旋转数组
最近看了一道题,自己做个过后又参考了网上的解法,为了加深对这个解法的理解和记忆于是有了这篇博客,供自己以后复习用 题目: 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 ...
- Linux下docker安装教程
目前最新版本的docker19.03支持nvidia显卡与容器的无缝对接,从而摆脱了对nvidia-docker的依赖.因此毫不犹豫安装19.03版本的docker,安装教程可参考官方教程Centos ...
- 排列组合( Lindström–Gessel–Viennot lemma 定理)
链接:https://www.nowcoder.com/acm/contest/139/A来源:牛客网 Monotonic Matrix 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ ...
- 强烈推荐一款功能强大的Tomcat 管理监控工具
专注于Java领域优质技术号,欢迎关注 原创: 侯树成 Tomcat那些事儿 启动 Tomcat完毕 ,有些时候总会打开浏览器 http://localhost:8080/ 去验证你的Tomcat是否 ...
- 【目录】mysql 架构篇系列
随笔分类 - mysql 架构篇系列 mysql 架构篇系列 4 复制架构一主一从搭建(半同步复制) 摘要: 一.概述 在mysql 5.5之前,mysql 的复制是异步操作,主库和从库的数据之间存在 ...
- Vue小白篇 -Vue 的模板语法
可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...
- SSM+Maven使用PageHelper插件分页
官方网站: https://pagehelper.github.io/docs/howtouse/#2-%E9%85%8D%E7%BD%AE%E6%8B%A6%E6%88%AA%E5%99%A8%E6 ...
- 【记录】iconfont 批量把图标加入购物车的方法
iconfont 是阿里旗下很好用的图标管理网站(https://www.iconfont.cn/),里面有百万个小图标,可以随意下载切换颜色,是很多前端人员的选择. 但是网站没有将图标批量加入购物 ...