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

浅拷贝

首先可以通过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. Storm入门(十二)Twitter Storm: DRPC简介

    作者: xumingming | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://xumingming.sinaapp.com/756/twitter-stor ...

  2. [LeetCode] 26. 删除排序数组中的重复项

    题目链接:https://leetcode-cn.com/problems/remove-duplicates-from-sorted-array/ 题目描述: 给定一个排序数组,你需要在原地删除重复 ...

  3. SUSE12SP3-Mycat(4)rule.xml配置详解

    简介 rule.xml 里面就定义了我们对表进行拆分所涉及到的规则定义.我们可以灵活的对表使用不同的分片算法, 或者对表使用相同的算法但具体的参数不同.这个文件里面主要有 tableRule 和 fu ...

  4. Dom4J配合XPath解析schema约束的xml配置文件问题

    如果一个xml文件没有引入约束,或者引入的是DTD约束时,那么使用dom4j和xpath是可以正常解析的,不引入约束的情况本文不再展示. 引入DTD约束的情况 mybook.dtd: <?xml ...

  5. [JLOI2016] 成绩比较

    推石子 首先设\(d[i]=\sum_{t=1}^{U[i]}t^{n-R[i]}(U[i]-t)^{R[i]-1}\),即第\(i\)门课程分数的合法分布方案数: 然后设\(f[i,j]\)表示前\ ...

  6. 【Linux篇】--sed的用法

    一.前述 Sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用 ...

  7. 用python读文件如.c文件生成excel文件

    记录一下,如何实现的,代码如下: #!/usr/bin/env python # coding=utf-8 # 打开文件 import xlwt import re import sys bookfi ...

  8. 谈谈我理解的SA——Systems Architecture

    什么是SA? SA即Systems Architecture,是系统体系结构. 系统体系结构是定义系统的结构.行为和系统视图的概念模型.架构师将其系统的形式化描述或表示出来,以支持结构和行为的推理的方 ...

  9. iOS weak底层实现原理

    今年年底做了很多决定,离开工作三年的深圳,来到了上海,发现深圳和上海在苹果这方面还是差距有点大的,上海的市场8成使用swift编程,而深圳8成的使用OC,这点还是比较让准备来上海打拼的苹果工程师有点小 ...

  10. [转]Python in Visual Studio Code

    本文转自:https://code.visualstudio.com/docs/languages/python Working with Python in Visual Studio Code, ...