npm 包 without-set 使用教程

阅读时长 5 分钟读完

在前端开发过程中,经常需要对某个对象进行修改并返回新的对象,而且需要保证原对象不被改变。JavaScript 中提供了 Object.assign 和 spread operator 等方法来实现这个过程,但是这些方法都需要手动创建新的对象,而当对象深度较大时,这个过程会变得很繁琐。此时,可以使用 npm 包 without-set 来方便地完成这个操作。

without-set 的介绍

without-set 是一个可以方便地创建新的对象而无需改变原对象的 npm 包。它可以通过删除一个对象中的某个属性并返回新对象来实现这个过程。

without-set 的安装很简单:

without-set 的使用

without-set 提供了一个 without 函数来删除对象中的属性。

其基本使用方法如下:

-- -------------------- ---- -------
----- ------- - -----------------------

----- -------- - -
  ----- -------
  ---- ---
  -------- -
    ----- ---- ------
    ------ -----
    ---- -------
  -
--

----- ------ - ----------------- -------

---------------------- -- - ----- ------- ---- --- -------- - ----- ---- ------ ------ ----- ---- ------- - -
-------------------- -- - ----- ------- -------- - ----- ---- ------ ------ ----- ---- ------- - -

从上面的例子可以看到,执行 without 函数后返回了一个新的对象,并且原对象不会受到任何影响。

同时,without 函数也支持删除对象中深度嵌套的属性,例如:

-- -------------------- ---- -------
----- ------- - -----------------------

----- -------- - -
  ----- -------
  ---- ---
  -------- -
    ----- ---- ------
    ------ -----
    ---- -------
  -
--

----- ------ - ----------------- ---------------

---------------------- -- - ----- ------- ---- --- -------- - ----- ---- ------ ------ ----- ---- ------- - -
-------------------- -- - ----- ------- ---- --- -------- - ----- ---- ------ ------ ---- - -

without-set 的深入理解

虽然 without-set 看起来很简单,但是深入理解其中的实现原理会对你的编程经验有很大的帮助。

without 函数的源码如下:

-- -------------------- ---- -------
-------- --------------- ---- -
  ----- --------- - --------------------- - ----------- - - --------- --
  ----- ---- - ------------------ - --- - ------------------

  ---------------- -- -
    ----- ----- - -------------
    --- ------------ - ----------
    --- ----------

    ----- ----------- - --------------- -
      -- --------------- -
        ------ ------------------------
      - ---- -
        ----------------------- - --------------------------------------
          - ----------------------------
          - - -------------------------- --
        ------------ - ------------------------
      -
    -
  ---

  ------ ----------
-

可以看到这个函数做了以下几件事情:

  1. 判断传入的 object 是数组还是对象,并根据情况创建一个新的对象或数组。
  2. 将传入的属性名转换成数组。
  3. 针对每个属性名,将它按照 "." 分割成一个数组,然后针对每一层级对嵌套对象进行拷贝,最后删除对应属性。
  4. 返回新的对象或数组。

这里需要注意的是,在对嵌套对象进行拷贝时,数组和对象的处理方式略有不同。需要特别注意。

另外,这个实现源码也很好地展现了如何使用一些基础的 JavaScript 语言特性来实现一个高效、简单的函数。

结论

without-set 可以方便地创建新的对象而不改变原对象,十分实用。同时,深入理解其实现原理也可以帮助我们更好地理解 JavaScript 的一些基础特性,在编写高效代码时更得心应手。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671128dd3466f61ffe4a5

纠错
反馈