From 9ac023b7107393c4d2e8177554cca2ba0287e575 Mon Sep 17 00:00:00 2001 From: Vl_Coding_lover <1773279395@qq.com> Date: Sun, 10 Oct 2021 19:39:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?demo14=E7=9A=84=E4=BB=A3=E7=A0=81=E4=B8=AD?= =?UTF-8?q?=E5=9C=A8=E6=8E=A7=E5=88=B6=E5=8F=B0=E4=B8=AD=E6=89=93=E5=8D=B0?= =?UTF-8?q?=E5=87=BA=E4=BA=86=E4=B8=80=E4=BA=9B=E7=BB=86=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SOYAINE大大你好！我是一名大三在读的前端爱好者 JS30demos的学习者 希望参与到咱们中文指南共同的完善中！ 因为本次demo是全程在控制台中进行的 如果在代码中把大体的学习思路打出来会让初学者更舒服！~ --- .../index-SOYAINE.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html index 4e11b80..868051e 100644 --- a/14 - JavaScript References VS Copying/index-SOYAINE.html +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -10,6 +10,7 @@ // 从 String、Number、Boolean 类型的值开始： let age = 100; let age2 = age; + console.log("01 发生了常规值传递 而不是地址值"); console.log(age, age2); age = 200; console.log(age, age2); @@ -25,11 +26,13 @@ // 然后试图复制这个数组 const team = players; + console.log("02 发生了地址值的传递"); console.log(players, team); // You might think we can just do something like this: // 也许你觉得可以直接这样修改复制后的数组 - team[3] = 'Lux'; + team[3] = 'Lux'; + console.log("引用变量team和players指向的同一个地址！所以改变是同步的~如下："); console.log(players, team); @@ -47,20 +50,25 @@ // So, how do we fix this? We take a copy instead! // 所以如何解决这个问题？下面来进行复制。 + console.log("03 复制数组 而不是引用数组 介绍四个解决方案"); + console.log(" 解决方法01 利用slice()方法 复制数组"); const team2 = players.slice(); // one day // or create a new array and concat the old one in // 或者创建一个新数组，然后用 concat 方法来获取它 + console.log(" 解决方法02 创建新数组并利用concat()方法 复制数组"); const team3 = [].concat(players); // or use the new ES6 Spread // 再或者用 ES6 里面的扩展语法 + console.log(" 解决方法03 利用扩展运算符 复制数组"); const team4 = [...players]; team4[3] = 'heeee hawww'; console.log(team4); + console.log(" 解决方法4 利用ES6中的from方法 复制数组"); const team5 = Array.from(players); // now when we update it, the original one isn't changed @@ -83,6 +91,7 @@ // how do we take a copy instead? // 如何才能复制它呢？ + console.log("04 复制对象 而不是引用对象"); const cap2 = Object.assign({}, person, { number: 99, age: 12 }); console.log(cap2); @@ -108,6 +117,7 @@ const dev2 = JSON.parse(JSON.stringify(wes)); + console.log(); From 9a634ccf76cc47df3c0eae1e8bb99488460cfd63 Mon Sep 17 00:00:00 2001 From: Vl_Coding_lover <1773279395@qq.com> Date: Sun, 10 Oct 2021 19:50:39 +0800 Subject: [PATCH 2/3] =?UTF-8?q?demo14=E4=B8=AD=E5=AF=B9=E6=B5=85=E6=8B=B7?= =?UTF-8?q?=E8=B4=9D=E3=80=81=E6=B7=B1=E6=8B=B7=E8=B4=9D=E7=9A=84=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 大大之前不是说方法一中的例子我们使用的是一层嵌套的浅复制嘛 后面我思考了下浅拷贝 深拷贝的区别与具体内容 进行了补充 并在原demo中举例说明了下~ 大大看下合适不 --- .../README.md | 34 +++++++++++++++---- .../index-SOYAINE.html | 10 ++++-- 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md index 9fc48f1..baa2228 100644 --- a/14 - JavaScript References VS Copying/README.md +++ b/14 - JavaScript References VS Copying/README.md @@ -40,7 +40,7 @@ WOW 原数组 `plaryers` 也被修改了。为什么会这样？因为 `team` 只是这个数组的引用，并不是它的复制。`team` 和 `players` 这两个变量指向的是同一个数组。 所以如何解决这个问题？接下来我们开始真正的复制吧！ - **方法一 [`Array.prototype.slice()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)** - + 由于运行 `slice` 得到的结果是一个对原数组的浅拷贝，原数组不会被修改。所以如果修改这两个数组中任意 一个，另一个都不会受到影响。 ```js const team2 = players.slice(); @@ -48,7 +48,7 @@ console.log(players, team2); ``` - **方法二 [`Array.prototype.concat()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)** - + `concat()` 方法是用来合并数组的，它也不会更改原有的数组，而是返回一个新数组，所以可以将 `players` 数组与一个空数组合并，得到的结果就符合预期了。 ```js const team3 = [].concat(players); @@ -56,7 +56,7 @@ console.log(players, team3); ``` - **方法三 ES6 [扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)** - + 扩展语法可以像扩展参数列表一样来扩展数组，效果与上述方法类似，但比较简洁。 ```js const team4 = [...players]; @@ -64,13 +64,13 @@ console.log(players, team4); ``` - **方法四 [`Array.from()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)** - + 此外使用 Array 创建新的数组实例的方法也是可行的。 ```js const team5 = Array.from(players); team5[3] = 'Lux5'; console.log(players, team5); - ``` + ``` 除此之外，还可以用 `push` 这样的方法。数组部分已经介绍完毕，下面我们进入 Object 类型数据的试验吧~ @@ -117,7 +117,7 @@ facebook: 'wesbos.developer' } }; - + const dev = Object.assign({}, wes); const dev2 = JSON.parse(JSON.stringify(wes)); console.log(wes); @@ -125,7 +125,27 @@ console.log(dev2); ``` - +> 对于浅拷贝、深拷贝的补充 +> +> 参考了 [什么是浅拷贝？什么是深拷贝？](https://www.jianshu.com/p/56598f2ac42e) +> +> 2021/10/10 by @[FangzhouSu](https://github.com/FangzhouSu) + +- 浅拷贝、深拷贝的区别 + +![img](https://upload-images.jianshu.io/upload_images/15856169-26e2e4a0fc8a39b4.png?imageMogr2/auto-orient/strip|imageView2/2/w/310/format/webp) + +- 赋值、浅拷贝、深拷贝的区别 + - 浅拷贝在改变原数据包含的子对象时会使原数据一同改变 + - 深拷贝在改变原数据包含的子对象时则不会改变原数据（看上图可以更好地进行理解） + - 浅拷贝实际上只复制到了 `Original ListHead` 而后面的节点只是被其“引用”了！ + +![img](https://upload-images.jianshu.io/upload_images/15856169-88bd5975eafaa488.png?imageMogr2/auto-orient/strip|imageView2/2/w/600/format/webp) + +- 在本DEMO中的体现 + +![在这里插入图片描述](https://img-blog.csdnimg.cn/32cc2c8793e74da3818c74686c0fca8c.png) + OVER~\(^o^)/~ diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html index 868051e..c4c09ad 100644 --- a/14 - JavaScript References VS Copying/index-SOYAINE.html +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -68,7 +68,7 @@ team4[3] = 'heeee hawww'; console.log(team4); - console.log(" 解决方法4 利用ES6中的from方法 复制数组"); + console.log(" 解决方法04 利用ES6中的from方法 复制数组"); const team5 = Array.from(players); // now when we update it, the original one isn't changed @@ -92,6 +92,7 @@ // how do we take a copy instead? // 如何才能复制它呢？ console.log("04 复制对象 而不是引用对象"); + console.log(" 解决方法1 Object.assign() 浅拷贝的方法"); const cap2 = Object.assign({}, person, { number: 99, age: 12 }); console.log(cap2); @@ -115,9 +116,14 @@ const dev = Object.assign({}, wes); + console.log(" 解决方法2 JSON转换 进行了深拷贝"); const dev2 = JSON.parse(JSON.stringify(wes)); - console.log(); + console.log("来试一下浅拷贝&深拷贝的区别"); + dev.social.name = 'wesbos';// 会影响到原对象 + dev2.social.name = "我不会影响到原对象wes啦啦啦~"; + + console.log(wes, dev, dev2); From cca3dbe6b3b9bb4c22215aa52626d8713f290415 Mon Sep 17 00:00:00 2001 From: Vl_Coding_lover <1773279395@qq.com> Date: Tue, 12 Oct 2021 16:02:57 +0800 Subject: [PATCH 3/3] =?UTF-8?q?demo14=20=E7=9A=84=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 改正之前的三个问题 —— 图片放在了github的CDN下 其中一个图片改成了表格的形式 更加清楚了 ——整理了console.log中的内容 打印出来的内容更有逻辑一些 --- 14 - JavaScript References VS Copying/README.md | 13 +++++++++---- .../index-SOYAINE.html | 12 ++++++------ 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md index baa2228..647d48f 100644 --- a/14 - JavaScript References VS Copying/README.md +++ b/14 - JavaScript References VS Copying/README.md @@ -133,18 +133,23 @@ - 浅拷贝、深拷贝的区别 -![img](https://upload-images.jianshu.io/upload_images/15856169-26e2e4a0fc8a39b4.png?imageMogr2/auto-orient/strip|imageView2/2/w/310/format/webp) +![deepcopy](https://user-images.githubusercontent.com/75036021/136916022-88186394-d64b-46ce-a9cc-1efea5ce1c5f.jpg) - 赋值、浅拷贝、深拷贝的区别 - 浅拷贝在改变原数据包含的子对象时会使原数据一同改变 + - 深拷贝在改变原数据包含的子对象时则不会改变原数据（看上图可以更好地进行理解） - 浅拷贝实际上只复制到了 `Original ListHead` 而后面的节点只是被其“引用”了！ - -![img](https://upload-images.jianshu.io/upload_images/15856169-88bd5975eafaa488.png?imageMogr2/auto-orient/strip|imageView2/2/w/600/format/webp) + + | | 和原数据是否指向同一个对象 | 原数据第一层数据为基本数据类型时 | 原数据中包含子对象时 | + | ------ | -------------------------- | ------------------------------------------------------ | ---------------------------------- | + | 赋值 | 是 | 改变**赋值**得来的对象会使原对象的数据一同改变 | 改变会使原对象的数据一同改变 | + | 浅拷贝 | 否 | 改变**浅拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变会使原对象的数据一同改变 | + | 深拷贝 | 否 | 改变**深拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变**不会**使原对象的数据一同改变 | - 在本DEMO中的体现 -![在这里插入图片描述](https://img-blog.csdnimg.cn/32cc2c8793e74da3818c74686c0fca8c.png) +![image](https://user-images.githubusercontent.com/75036021/136916199-ff455511-7eca-4be2-be02-a78993f2a144.png) OVER~\(^o^)/~ diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html index c4c09ad..d317fe6 100644 --- a/14 - JavaScript References VS Copying/index-SOYAINE.html +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -50,25 +50,25 @@ // So, how do we fix this? We take a copy instead! // 所以如何解决这个问题？下面来进行复制。 - console.log("03 复制数组 而不是引用数组 介绍四个解决方案"); - console.log(" 解决方法01 利用slice()方法 复制数组"); + console.log("03 我们要复制数组对象，而不是引用它们，下面介绍4种复制数组对象的方法~"); + console.log(" 解决方法1 利用slice()方法 复制数组"); const team2 = players.slice(); // one day // or create a new array and concat the old one in // 或者创建一个新数组，然后用 concat 方法来获取它 - console.log(" 解决方法02 创建新数组并利用concat()方法 复制数组"); + console.log(" 解决方法2 创建新数组并利用concat()方法 复制数组"); const team3 = [].concat(players); // or use the new ES6 Spread // 再或者用 ES6 里面的扩展语法 - console.log(" 解决方法03 利用扩展运算符 复制数组"); + console.log(" 解决方法3 利用扩展运算符 复制数组"); const team4 = [...players]; team4[3] = 'heeee hawww'; console.log(team4); - console.log(" 解决方法04 利用ES6中的from方法 复制数组"); + console.log(" 解决方法4 利用ES6中的from方法 复制数组"); const team5 = Array.from(players); // now when we update it, the original one isn't changed @@ -91,7 +91,7 @@ // how do we take a copy instead? // 如何才能复制它呢？ - console.log("04 复制对象 而不是引用对象"); + console.log("04 同上面一样，我们要复制Object对象，而不是引用它们，下面介绍两种复制Object对象的方法~"); console.log(" 解决方法1 Object.assign() 浅拷贝的方法"); const cap2 = Object.assign({}, person, { number: 99, age: 12 }); console.log(cap2);