npm 包 safer-get 使用教程

前言

在前端开发中,我们经常要操作对象。但是,对象在 JavaScript 中是一个很复杂的数据类型,许多时候使用 . 和 [] 操作符来获取对象的属性值可能会出现 undefined。这时候我们就需要一个更健壮的获取对象属性值的方法,这就是 safer-get 这个 npm 包所提供的功能。

本篇文章将会介绍什么是 safer-get 包、为什么需要它、怎么使用它以及一些需要注意的地方,同时还会提供一些示例去验证 safer-get 的使用方法。

什么是 safer-get 包

safer-get 是 npm 上的一个包,它提供了更健壮的获取 JavaScript 对象属性值的方法。

下面是 safer-get 的使用示例:

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

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

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

为什么我们需要 safer-get 包

下面是一个常见的 JavaScript 代码片段:

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

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

上述代码运行的结果是:Uncaught TypeError: Cannot read property 'city' of undefined. 这个问题会在很多JavaScript开发中出现,特别是多人协作开发或者批量数据处理的时候,大部分时候我们都希望避免这种 undefined 错误的出现,特别是在代码的调试以及维护过程中。

解决这个问题的方法就是使用 safer-get 包。safer-get 能够帮助我们在获取对象属性值的过程中,避免 undefined 错误的出现,如果属性值不存在,它会返回一个默认值,以便开发者在值不存在的情况下,做出自己的判断和处理。

怎么使用 safer-get

API

安装 Safer Get 包

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

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

saferGet(object, query, defaultValue): 返回 object 路径上的属性值。

  1. object: 要获取属性的对象
  2. query: 目标属性的路径,可以是一个数组,比如 ['a', 0, 'b', 'c'] 表示拿到 object.a[0].b.c 的值。
  3. defaultValue(optional): 如果属性不存在则返回默认值。默认值为空对象 {}

示例

下面是一些示例,以体现 safer-get 的使用方法:

获取对象属性值

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

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

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

获取数组中指定索引的元素

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

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

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

属性不存在时返回默认值

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

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

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

需要注意的事项

在使用 safer-get 时需要注意以下几点:

  1. safer-get 不能保证所有属性值的完整性,比如我们通过 [] 获取一个数组索引的值,这个索引值是会改变的,如果不确定它是否存在,需要在使用 safer-get 时仍然需要加判断条件。

  2. 在使用 safer-get 获取匹配属性值时,不支持类似 -a- 等特殊字符。

总结

通过本文,我们了解了什么是 safer-get 包以及为什么我们需要它。同时,我们也学习了如何使用 safer-get 取得 JavaScript 对象属性值,以及如何在属性不存在的情况下返回默认值。

在我们的开发中,如果经常处理对象并且要求高可靠性,请尝试使用 safer-get 包,它能够有效地避免由于属性不存在而导致的难以定位和检查的问题,从而提高代码的可维护性、可读性以及可靠性。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067355890c4f7277583b0b


猜你喜欢

  • npm包vam-docx使用教程

    在前端开发中,我们常常需要生成文档,不同格式的文档操作不同,不能直接用 js 操作。而 npm 包 vam-docx 提供了一些功能可以帮助我们生成 Word 文档,这让我们很方便地使用 js 动态生...

    4 年前
  • npm 包 http-to-curl 使用教程

    在前端开发过程中,我们经常会需要发送 HTTP 请求,以获取或者提交数据。通常情况下,我们会选择使用 axios、request 等第三方库来发送请求,而这些库在底层都依赖了 Node.js 自带的 ...

    4 年前
  • npm 包 weoil-element-ui 使用教程

    weoil-element-ui 是一款基于 Vue.js 的前端 UI 组件库,包含众多常用组件和功能。在本教程中,我们将介绍如何使用 npm 包 weoil-element-ui。

    4 年前
  • npm 包 hyper-nyx 使用教程

    简介 Hyper-nyx 是一个基于 Hyper 的扩展,可以让你在终端中运行 nyx 主题。本文将会教你如何使用 hyper-nyx 这个 npm 包。 安装 确保你已经安装了 Hyper,然后在命...

    4 年前
  • npm 包 vue-kityminder 使用教程

    前言 随着互联网的快速发展,前端技术也在不断迭代升级。前端工程师需要不断学习新技术以应对日益复杂的业务需求。今天,我们要介绍的是一款优秀的前端工具——npm 包 vue-kityminder。

    4 年前
  • npm 包 with-mobx-store 使用教程

    简介 在前端开发中,状态管理是一个非常重要的问题。对于 React 项目,有许多第三方状态管理库,例如 Redux、MobX 等。在 MobX 的官方文档中,有一个推荐的项目 mobx-react-l...

    4 年前
  • npm 包 wxbase 使用教程

    随着微信小程序的普及,开发小程序的需求也越来越大。而小程序中用到的核心技术之一就是 wxbase ,一个封装了小程序常用 API 的 npm 包。本文将详细介绍 wxbase 的使用教程,并提供相关示...

    4 年前
  • npm 包 vue-cli-plugin-zfs-plop 使用教程

    介绍 vue-cli-plugin-zfs-plop 是一个 Vue CLI3 插件,它提供了一个基础的脚手架配置和一个 Plop 模板,用于更快地生成 Vue 单文件组件、Vuex 模块和 API ...

    4 年前
  • npm 包 jtopoz 使用教程

    介绍 jtopoz 是一个运行在浏览器和 Node.js 环境下的 JavaScript 库,它可以方便地把一个 JSON 对象转换成表格形式,也支持从表格中获取数据并转换为 JSON。

    4 年前
  • npm 包 anydoor_test_lulin 使用教程

    在前端开发过程中,我们常常需要快速搭建一个本地 HTTP 服务来测试代码或者模拟数据请求。这时候,我们可以使用 npm 包 anydoor_test_lulin 来快速搭建一个本地 HTTP 服务器。

    4 年前
  • npm 包 mcms-node-beacons 使用教程

    本文将详细介绍如何使用 npm 包 mcms-node-beacons,该包可以用于管理 Beacon 设备和收集 Beacon 数据。本教程适用于前端开发人员和其他对于 Beacon 技术感兴趣的人...

    4 年前
  • npm包ol-mapscale使用教程

    随着Web应用逐渐变得越来越复杂,前端技术在近几年中迅速发展。而随之而来的是对工具和框架的广泛依赖,npm就是其中一个重要的包管理工具。本文将向您介绍一个使用npm的地图应用程序的相关内容。

    4 年前
  • npm 包 @joostlubach/pdfkit 使用教程

    简介 @joostlubach/pdfkit 是一个 Node.js 的 PDF 生成库,可以用来创建 PDF 文档、表格、图形等。它是通过 Canvas 元素制作 PDF 的。

    4 年前
  • npm 包 zfs-plop-templates 使用教程

    什么是 zfs-plop-templates? zfs-plop-templates 是一个用于快速创建 React 组件和 Redux 数据库的脚手架。它基于 plop,一个可生成代码的命令行工具,...

    4 年前
  • npm 包 ahsanayaz 使用教程

    在前端开发中,我们经常要使用一些工具包来提高开发效率,其中 npm 包是最为常见的。其中,ahsanayaz 是一个非常实用的 npm 包,本文将详细介绍如何使用它。

    4 年前
  • 使用 ng8-breadcrumbs npm 包教程

    前言 ng8-breadcrumbs 是一个 Angular 的面包屑导航组件,适用于 Angular 8 及以上版本。使用它可以很快速的构建出界面比较复杂的面包屑导航组件,便于用户了解当前访问位置、...

    4 年前
  • npm 包 llexec 使用教程

    在前端开发中,我们经常会需要在 JavaScript 中执行一些外部命令,比如运行 Node.js 脚本、打开文件等等。而 Node.js 中的 child_process 模块可以帮助我们实现这一功...

    4 年前
  • npm 包 tatl 使用教程

    什么是 tatl tatl 是一个功能强大的模板引擎,可以用于前端和后端的应用程序开发。它支持 HTML、CSS、JavaScript 和其他常见的模板语言,能够更加灵活地处理设计和交互方面的问题。

    4 年前
  • npm包@arve.knudsen/multihashes使用教程

    什么是@arve.knudsen/multihashes? @arve.knudsen/multihashes是一个Javascript库,它允许生成多种哈希函数,并支持多个编码和解码算法。

    4 年前
  • npm 包 sslc 使用教程

    什么是 sslc? sslc 是一个 Node.js 模块,它允许你轻松地在你的 web 应用程序中集成 SSL/TLS 加密功能。通过使用 sslc,你可以快速地设置 HTTPS 服务器,并在你的应...

    4 年前

相关推荐

    暂无文章