作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况。

浅拷贝

首先可以通过Object.assign来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不是深拷贝。

 let abc = {
a: '123',
b: 'aaa',
d: 'cccc'
}
let b = Object.assign({}, abc)
abc.a = '222'
console.log(b.a) //

另外还可通过es6的运算符来. .. 来实现

 let obj = {
age: '23',
name: 'chai'
}
let newobj = {...obj}
obj.age = '17'
console.log(newobj.age) //

浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,那么就又回到最开始的话题了,两者享有相同的地址。要解决这个问题,我们就得使用深拷贝了。

浅拷贝

通常可以通过JSON.parse(JSON.stringify(object))来解决

 let a = {
age: 1,
jobs: {
first: 'FE'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

平时就这几种方法就够使用了,深拷贝这种方法也是有局限性的,它会忽略undefined,symble,不能序列化函数,如

 let a = {
age: undefined,
sex: Symbol('male'),
jobs: function() {},
name: 'vue'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "vue"}

js深浅拷贝的更多相关文章

  1. js 深浅拷贝 笔记总结

    一.js 数据类型 javaScritp的数据类型有:数值类型.字符串类型.布尔类型.null.undefined.对象(数组.正则表达式.日期.函数),大致分成两种:基本数据类型和引用数据类型, 其 ...

  2. JS深浅拷贝及其实现

    基本数据类型和引用数据类型 JS数据分为基本数据类型和引用数据类型.基本数据类型的变量存储在栈中,引用数据类型则存储在堆中,引用数据类型的存储地址则保存在栈中. 下面来看一个小例子 // 基本数据类型 ...

  3. jQuery开发插件的两个方法 js 深浅拷贝

    1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...

  4. 最简js深浅拷贝说明

    1.浅拷贝 浅拷贝是拷贝引用,拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响.  浅拷贝分两种情况: 1.直接拷贝源对象的引用 2. 源对象拷贝实例,但其属性对象(类型为Object, ...

  5. JS 深浅拷贝

    首先理解概念 浅拷贝: 只复制对象的基本类型, 对象类型, 仍属于原来的引用. 深拷贝: 不紧复制对象的基本类, 同时也复制原对象中的对象.就是说完全是新对象产生的. 首先看浅拷贝 //浅拷贝 var ...

  6. JS中深浅拷贝 函数封装代码

    一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

  7. js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

  8. JS--变量及深浅拷贝

    JS变量分为基本类型和引用类型 基本类型数据包括Number, String, Boolean, Null, Undefined五种类型: 引用数据类型包括Array, Date, RegExp, F ...

  9. 【 js 基础 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

随机推荐

  1. Windows Server 2016-命令行批量导出AD用户列表信息

    本章节为大家带来如何通过Powershell或ldifde命令行方式导出域用户列表信息,方便大家日常运维工作中使用. Powershell方式导出现有Staff目录下所有用户信息列表: Get-ADU ...

  2. windows server 2008 R2 Enterprise 系统安全配置

    window 安全配置规则 一.开启防火墙 二.允许远程网络进行远程桌面连接 如果使用默认的远程端口的话,按照下图,允许远程桌面通过防火墙就行了: 如果你的远程端口号不是默认的,则需要按照(四)中新建 ...

  3. JS INPUT输入的时候全角自动转为半角

    function CtoH(obj){var str=obj.value;var result="";for (var i = 0; i < str.length; i++) ...

  4. springcloud之config配置中心-Finchley.SR2版

    本篇和大家分享的是springcloud-config配置中心搭建,写到这里突然想起自己曾今开源过基于Redis发布订阅编写的一个配置中心,刚看了git星数有点少哈哈,这里顺势发个连接欢迎大侠们点赞: ...

  5. ASP.NET Core 使用 SignalR 遇到的 CORS 问题

    问题 将 SignalR 集成到 ASP.NET Core MVC 程序的时候,按照官方 DEMO 配置完成,但使用 DEMO 页面建立连接一直提示如下信息. Access to XMLHttpReq ...

  6. Java的数组,栈,队列

    import java.util.Arrays; public class Array<E> { private E[] data; private int size; //构造函数,传入 ...

  7. nginx 报错502Bad Gateway

    场景: 目前在ECS中起了多个node服务,使用forever进程守护,最近,打开线上页面发现报错502 Bad Gateway;同时部分静态资源访问不到.(之前可以的): 解决: 首先查看nginx ...

  8. Vue.js-03:第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  9. 《代码整洁之道》(Clean Code)- 读书笔记

    一.关于Bob大叔的Clean Code <代码整洁之道>主要讲述了一系列行之有效的整洁代码操作实践.软件质量,不但依赖于架构及项目管理,而且与代码质量紧密相关.这一点,无论是敏捷开发流派 ...

  10. 【Android Studio安装部署系列】十一、Android studio获取数字签名信息

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 下面介绍下调试版本和发布版本获取数字签名的方法,通过以下方法可以获取到SHA1和MD5. 一般在使用分享功能,在第三方平台中创建应用 ...