NPM包underscore.get使用教程

阅读时长 4 分钟读完

在前端开发过程中,我们常常需要处理对象和数组的数据,而使用underscore.get这个NPM包可以让你更加方便地获取所需数据,同时也可以避免许多无谓的判断和异常处理。

什么是underscore.get?

underscore.get 是一个NPM包,它是underscore.js的一个辅助方法,可以帮助我们更加方便地获取一个嵌套的对象/数组的值。它的主要作用是让访问嵌套属性的代码更加简单、易读。

如何使用underscore.get

我们可以通过下面的方式安装underscore.get:

调用方法:

underscore.get 接受三个参数:

  1. 目标对象。
  2. 表示目标路径的字符串或字符串数组。
  3. 可选参数:默认值

下面是一个简单的使用示例:

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

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

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

此时,输出结果是 'Shanghai' 和 18。

我们可以看到,通过指定字符串 'place.home.city' 及 obj 对象,即可轻松获取嵌套对象中的城市信息。当对象未定义或访问出错时,我们可以通过指定第三个参数中的默认值来解决。

实际应用场景

在实际的前端应用中,underscore.get 的应用场景非常广泛,下面列出其中的一些:

获取后端接口数据

很多时候我们需要从后端接口中获取数据,这些数据可能会非常复杂,包含嵌套的对象或者数组。使用underscore.get可以很方便地从中提取所需要的数据。例如:

避免嵌套对象属性的空引用错误

在使用对象时,当我们试图获取对象属性时,由于该属性不存在,可能会引起未定义的异常,这时我们可以使用lodash.get进行处理,可以避免出现该问题。

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

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

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

判断一个对象属性是否为undefined

有时候,我们需要判断一个对象的属性是否存在并且不为 undefined。而使用underscore.get可以方便地实现这一点。例如:

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

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

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

通过上述代码,我们可以判断一个对象的属性是否为undefined,同时通过设置第三个参数的默认值来方便地处理这种情况。

结论

通过使用underscore.get我们可以方便地获取嵌套对象的属性值,并且避免了很多空引用异常。在实际应用场景中,underscore.get也有很多的用途,可以帮助我们更快地解决实际问题,提高开发效率。

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

纠错
反馈