在了解深浅拷贝之前，我们先一起来简单来了解一下，JavaScript 数据存储的方式，以及数据类型（）。

JavaScript 中数据存储分为 简单数据类型和复杂数据类型（引用数据类型）其中 5 种基本数据类型

基本数据是直接存在栈里

Boolean（布尔值 ）
String (字符型)
number （数字型，不区分浮点型和double）
undefined （定义了变量 但未给值）
Null  (定义了变量 但赋值为 Null)

和几种常见的引用数据类型

Object
Array
RegExp
Date
null
**// 以上几种都为 引用数据类型**

至于null 为什么是个对象，这时由于 JavaScript 早期数据在底层存储以二进制方式进行存储如果二进制的前三位为 0
则JavaScript 会认为该数据是个对象即object所以 null 的前三位均为 0 即 null 又是基本数据类型又是
引用数据类型。

而引用数据类型我们都知道它是通过内存地址找到对象的

接下来知道复杂数据类型是通过内存地址存储的，我们就能够明白，下一次将 obj的值赋给新对象，其实是将内存地址赋予了新对象

   const OldObj = {name: '张三',age: 18,hobby: ['size', 'color'],Around: {page: 10,size: '100KB'}}//将原对象赋值 新对象const newsObj = OldObj//  更改新对象的值 newsObj.name = '我更改了新对象的数据newsObj'//原对象console.log(OldObj);//新对象console.log(newsObj); **此时会发现 我将新对象的name更改 但 原对象值也发生了改变，这就是因为内存地址的问题，因为它们一起引用的是同一个地址**

浅拷贝

将整个对象进行拷贝（可以理解为在栈内存中开辟了一个新的地址）

实现浅拷贝的四种式。

1：使用Object 对象原型上的 ** assign（）**方法
assign（对象）

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

#方式二

利用 ES6 展开运算符，将对象展开，可以看到基本数据类型未发生更改

方式三：通过循环遍历

方式四利用lodash 组件库调用

loadsh 官网 https://www.lodashjs.com/

引入 loadsh var objects = [{ 'a': 1 }, { 'b': 2 }];var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

实现深拷贝的四种方式

方式1 ：也是最简单的方式将对象通过JSON转换为字符串

    const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小贝贝'}}// 把对象转换为 JSON 字符串const o = JSON.parse(JSON.stringify(obj))//输出新对象console.log(o)// 进行数据更改 o.family.baby = '123'console.log(obj)

方式二通过递归函数实现深拷贝

逻辑分析

// 1: indicates receiving parameters
// * 2: The type of the object passed in generates an instance object through the constructor reflection
// * 3: check that the passed object cannot be empty and is of an object type. Otherwise, return the current passed value
// * 4: iterate over every bit passed in if it can prove to be an object type
// * Check whether each attribute in an object is its own, not inherited attributes
// * 5: deep copy if object attribute is object type, shallow copy otherwise
// */
// }
// 1 ：接收参数
// // * 2 ：传递进来的对象的类型通过constructor反射 new 出一个实例对象
// // * 3 ：判断传进来的对象不能为空并且是一个对象类型才能进行遍历否则直接返回当前传进来的值
// // * 4 ：如果能遍历证明是一个对象类型则遍历传进来的每一位
// // * 判断对象里的每个属性是不是自己本身的，不能是通过继承获得的属性
// // * 5 ：能够执行下来，再进行深入判断如果对象属性是对象类型则进行深拷贝，否则则进行浅拷贝

 **// 方法 1** function deepClone (obj) {//  通过 constructor 反射  创建实例let ObjClone = new obj.constructor()if (obj && typeof (obj) === 'object') {// 遍历原来的对象for (key in obj) {>          // 判断对象的属性是不是本身的属性（不能是通过原型链继承获取过来），如果是则进行下一步if (obj.hasOwnProperty(key)) {// 对象的每一位不能为空 为空无法进行拷贝if (obj[key] && typeof (obj[key]) === 'object') {// 如果是复杂数据类型 则进行递归深拷贝 否则则进行浅拷贝ObjClone[key] = deepClone(obj[key])}else {// 浅拷贝ObjClone[key] = obj[key]}}}}return ObjClone}// 将 拷贝的对象赋值 const NewsObject = deepClone(OldObj)// 更改 复杂数据类型数据NewsObject.Around.page = 1000// 源对象 console.log(OldObj);// 新对象console.log(NewsObject);

深拷贝第三种方式，是博主的世交好写的一篇文章，有兴趣的可以去详细阅读一下哦

https://juejin.cn/post/7085346393535201294 这是原文地址链接。

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。相关推荐

php深浅拷贝,JavaScript 中的深浅拷贝
工作中经常会遇到需要复制 JavaScript 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 一.为什么会有深浅 ...
实现JS深浅拷贝的五种方式
一.堆栈.基本数据类型.引用数据类型在了解深浅拷贝之前,我们需得对堆栈.基本数据类型.引用数据类型有基本的了解基本数据类型:number.string.boolean.null.undefined ...
转载：javascript中定义兑现改的5种方式
本文转载自: http://www.phpfuns.com/scripts/javascript/five-method-define-javascript-object.shtml JavaScri ...
JavaScript中字符串连接/拼接的四种方式
JavaScript中连接字符串的方式有4种,分别是使用加号运算符连接.使用${}配合反引号连接.使用concat()函数连接.使用join()函数连接. 1. 使用加号运算符示例代码如下: let ...
JavaScript中查找指定字符串的几种方式
1.indexOf() 使用indexOf()方法查找字符串.使用此方法如果能找到指定的字符串,返回字符串位置的索引,如果找不到,则返回-1.下面例子结果为2,即找到c字符串,在索引为2的位置. co ...
Javascript中的对象拷贝（对象复制/克隆）
Javascript中的对象拷贝(对象复制/克隆) 李俊才 CSDN:jcLee95 邮箱:291148484@163.com 1. 对象的引用要说"拷贝"还要先说"引 ...
JS JavaScript中去除数组中重复元素的方法
JS JavaScript中去除数组中重复元素的方法感觉比较好理解的3种方法,总结一下,大家共同学习方法一: Array.prototype.method1 = function(){ var a ...
JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解现在JSON格式在web开发中非常重要,特别是在使用 ...
去除html重复的元素 js,js数组中去除重复值的几种方法
在日常开发中,我们可能会遇到将一个数组中里面的重复值去除,那么,我就将我自己所学习到的几种方法分享出来去除数组重复值方法: 1,利用indexOf()方法去除思路:创建一个新数组,然后循环要去重的 ...

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。

在了解深浅拷贝之前，我们先一起来简单来了解一下，JavaScript 数据存储的方式，以及数据类型（）。

浅拷贝

实现浅拷贝的四种式。

#方式二

方式三：通过循环遍历

方式四利用lodash 组件库调用

实现深拷贝的四种方式

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。相关推荐

最新文章

热门文章

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读 非常重要）。

在了解深浅拷贝之前，我们先一起来简单来了解一下，JavaScript 数据存储的方式，以及数据类型（）。

浅拷贝

实现浅拷贝的四种式。

#方式二

方式三：通过循环遍历

方式四 利用lodash 组件库调用

实现深拷贝的四种方式

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读 非常重要）。相关推荐

最新文章

热门文章

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。

方式四利用lodash 组件库调用

JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。相关推荐