在前端开发过程中,我们常常需要处理对象和数组的数据,而使用underscore.get这个NPM包可以让你更加方便地获取所需数据,同时也可以避免许多无谓的判断和异常处理。
什么是underscore.get?
underscore.get 是一个NPM包,它是underscore.js的一个辅助方法,可以帮助我们更加方便地获取一个嵌套的对象/数组的值。它的主要作用是让访问嵌套属性的代码更加简单、易读。
如何使用underscore.get
我们可以通过下面的方式安装underscore.get:
npm install underscore.get
调用方法:
const _get = require('underscore.get');
underscore.get 接受三个参数:
- 目标对象。
- 表示目标路径的字符串或字符串数组。
- 可选参数:默认值
下面是一个简单的使用示例:
-- -------------------- ---- ------- ----- --- - - ----- ------ ------ - ----- - -------- -------- ----- ---------- - - -- ----- ---- - --------- ------------------- ------------------ -- ---------- ----- --- - --------- ------ ---- ----------------- -- --
此时,输出结果是 'Shanghai' 和 18。
我们可以看到,通过指定字符串 'place.home.city' 及 obj 对象,即可轻松获取嵌套对象中的城市信息。当对象未定义或访问出错时,我们可以通过指定第三个参数中的默认值来解决。
实际应用场景
在实际的前端应用中,underscore.get 的应用场景非常广泛,下面列出其中的一些:
获取后端接口数据
很多时候我们需要从后端接口中获取数据,这些数据可能会非常复杂,包含嵌套的对象或者数组。使用underscore.get可以很方便地从中提取所需要的数据。例如:
axios.get('/api/userinfo/1').then((response) => { const username = _get(response, 'data.username'); console.log(username); // 'Tom' });
避免嵌套对象属性的空引用错误
在使用对象时,当我们试图获取对象属性时,由于该属性不存在,可能会引起未定义的异常,这时我们可以使用lodash.get进行处理,可以避免出现该问题。
-- -------------------- ---- ------- ----- --- - - ----- ------ ------ - ----- - -------- -------- ----- ---------- - - -- -- ---- ----- -------------- --------------------------------- -- -- ---- ------ --------------------- -------------------- -- ----------
判断一个对象属性是否为undefined
有时候,我们需要判断一个对象的属性是否存在并且不为 undefined。而使用underscore.get可以方便地实现这一点。例如:
-- -------------------- ---- ------- ----- --- - - ----- ------ ------ - ----- - -------- -------- ----- ---------- - - -- -- ---------- ------------------- - ----------------- -- --- ------------ - ---- - ----------------- -- ------------ - -- ---------- -------------------- -------- - ------------------- -- --- ---------- --- ------- ---------- - ---- - ------------------- -- ---------- --- ------- ---------- -
通过上述代码,我们可以判断一个对象的属性是否为undefined,同时通过设置第三个参数的默认值来方便地处理这种情况。
结论
通过使用underscore.get我们可以方便地获取嵌套对象的属性值,并且避免了很多空引用异常。在实际应用场景中,underscore.get也有很多的用途,可以帮助我们更快地解决实际问题,提高开发效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600579d081e8991b448eb396