diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md index 9fc48f1..647d48f 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,32 @@ console.log(dev2); ``` +> 对于浅拷贝、深拷贝的补充 +> +> 参考了 [什么是浅拷贝?什么是深拷贝?](https://www.jianshu.com/p/56598f2ac42e) +> +> 2021/10/10 by @[FangzhouSu](https://github.com/FangzhouSu) + +- 浅拷贝、深拷贝的区别 + +![deepcopy](https://user-images.githubusercontent.com/75036021/136916022-88186394-d64b-46ce-a9cc-1efea5ce1c5f.jpg) + +- 赋值、浅拷贝、深拷贝的区别 + - 浅拷贝在改变原数据包含的子对象时会使原数据一同改变 + - 深拷贝在改变原数据包含的子对象时则不会改变原数据(看上图可以更好地进行理解) + - 浅拷贝实际上只复制到了 `Original ListHead` 而后面的节点只是被其“引用”了! + + | | 和原数据是否指向同一个对象 | 原数据第一层数据为基本数据类型时 | 原数据中包含子对象时 | + | ------ | -------------------------- | ------------------------------------------------------ | ---------------------------------- | + | 赋值 | 是 | 改变**赋值**得来的对象会使原对象的数据一同改变 | 改变会使原对象的数据一同改变 | + | 浅拷贝 | 否 | 改变**浅拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变会使原对象的数据一同改变 | + | 深拷贝 | 否 | 改变**深拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变**不会**使原对象的数据一同改变 | + +- 在本DEMO中的体现 + +![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 4e11b80..d317fe6 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 我们要复制数组对象,而不是引用它们,下面介绍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(" 解决方法2 创建新数组并利用concat()方法 复制数组"); const team3 = [].concat(players); // or use the new ES6 Spread // 再或者用 ES6 里面的扩展语法 + console.log(" 解决方法3 利用扩展运算符 复制数组"); 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,8 @@ // how do we take a copy instead? // 如何才能复制它呢? + console.log("04 同上面一样,我们要复制Object对象,而不是引用它们,下面介绍两种复制Object对象的方法~"); + console.log(" 解决方法1 Object.assign() 浅拷贝的方法"); const cap2 = Object.assign({}, person, { number: 99, age: 12 }); console.log(cap2); @@ -106,8 +116,14 @@ const dev = Object.assign({}, wes); + console.log(" 解决方法2 JSON转换 进行了深拷贝"); const dev2 = JSON.parse(JSON.stringify(wes)); + console.log("来试一下浅拷贝&深拷贝的区别"); + dev.social.name = 'wesbos';// 会影响到原对象 + dev2.social.name = "我不会影响到原对象wes啦啦啦~"; + + console.log(wes, dev, dev2);