Deep-copying.pdf

Transcript

1. Deep-copying 2021/12/21 cypresskuo @前端組例會
2. 說到 JS 深拷貝，你會怎麼做？ 2
3. 淺拷貝？深拷貝？ 3
4. 淺拷貝 4
5. 淺拷貝 5
6. Why? 6
7. Non-primitive values are handled as references In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol, and null. Primitive - MDN Web Docs Glossary: Definitions of Web-related terms | MDN (mozilla.org) JS-核心概念篇(by 于珊) 7
8. Wait! 8
9. 如果 Object 是 call by references，那... 9
10. call by sharing 由於在 JavaScript 的物件類型是可變的 (mutable)，當物件更新時，會影響到所有引 用這個物件的變數與其副本，修改時會變動到原本的參考，但當賦與新值時，會產生 新的實體參考。 重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw) 10
11. Only call by value 11
12. 深拷貝 12
13. 找套件? jQuery: $.extend https://programmerall.com/article/21821671887/ lodash: _.cloneDeep https://github.com/jonschlinkert/clone-deep/blob/master/index.js 13
14. 自己土砲? 判斷有幾層，再一個一個淺拷貝。 14
15. json 轉換? 15
16. structuredClone 16
17. 看起來很好，馬上使用它 17
18. Can I use? 18
19. 參考資料 Deep-copying in JavaScript using structuredClone (web.dev) Primitive - MDN Web Docs Glossary: Definitions of Web-related terms | MDN (mozilla.org) JS-核心概念篇(by 于珊) 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？ - Huli 19