相信前端工程师都知道，代码复用是非常重要的一件事情，它可以提高代码的可维护性和开发效率。在前端开发中，我们会经常用到一些优秀的第三方库和插件，这也就需要我们了解 npm 包管理工具和它的使用方法。
在这里，我们将介绍一个 npm 包：just-clone，它是一个用于对象和数组克隆的工具。使用起来非常简单，并且有效避免了对象和数组的引用问题。
安装
你可以在项目根目录下使用 npm 命令进行安装：
--- ------- ---------- ------
使用
使用 just-clone 可以很轻松的实现对象和数组的克隆操作，下面我们假设有一个对象 obj 和一个数组 arr，我们要进行克隆操作。
克隆对象
----- --------- - ----------------------
--- --- - -
-- --
-- -
-- -
-
--
--- -------- - ---------------
----------------- -- - -- -- -- - -- - - -
---------------------- -- - -- -- -- - -- - - -
-- ----
------- - --
----------------- -- - -- -- -- - -- - - -
---------------------- -- - -- -- -- - -- - - -在上面的示例代码中，我们引入了 justClone 库，并将 obj 克隆一份给了 cloneObj。通过对 obj 和 cloneObj 进行对比，我们可以发现它们实际上是两个独立的对象。所以当 obj.b.c 的值被修改后，cloneObj.b.c 的值不受影响。
克隆数组
除了对象，just-clone 还支持数组的克隆操作，下面我们来看一下数组的克隆操作：
----- --------- - ---------------------- --- --- - --- - -- -- -- - -- --- ---- --- -------- - --------------- ----------------- -- --- - -- -- -- - -- --- --- ---------------------- -- --- - -- -- -- - -- --- --- -- ---- -------- - -- ----------------- -- --- - -- -- -- - -- --- --- ---------------------- -- --- - -- -- -- - -- --- ---
和对象类似，克隆后的数组也和原始数组没有关联。数组内的元素也会被递归的克隆，保证了克隆结果的独立性。
深度理解
了解了如何使用 just-clone，我们再来看一下它的原理。
在 JavaScript 中，对象和数组都是引用类型，它们在内存中的位置是一样的。这就导致当我们对对象或数组进行赋值操作时，实际上只是将一个引用赋值给了一个变量，两个变量指向的对象或数组在内存中是同一个，当其中一个变量发生改变时，另一个变量也会跟着变化。
解决这个问题的方法就是进行深克隆，它可以在内存中开辟一个新的地址，将原有的对象或数组复制一份到新的地址中，并返回新的地址。这样操作后，两个变量对应的对象或数组在内存中拥有不同的地址，它们各自独立，互不影响。
just-clone 库使用了递归深度遍历，对对象和数组进行了深度克隆。在克隆对象时，它会先检测给定的对象是否是一个基础数据类型，如果是基础数据类型，就直接返回。如果是一个对象或数组，就递归克隆所有可迭代的属性。在克隆数组时，对象同理。
克隆函数的代码如下：
-------- ------------ -
-- ------------------ -
-- ---------------
------ ------
-
--- ------------- - --------------- -- ---------
--- --- - ------------- - -- - ---
--- ---- --- -- ------ -
-- -------------------------------------------- ----- -
-------- - ------------------
-
-
------ ----
-结论
使用 just-clone 可以有效的解决对象和数组的引用问题，让我们能够更加轻松的实现代码的复用。同时，它也让我们进一步了解了 JavaScript 中引用类型的特性，并学会了如何通过递归深度遍历来深度克隆对象和数组。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaea2b5cbfe1ea0610e97