在前端开发领域,经常需要操作 JavaScript 对象。然而,当使用对象时,映射(即 key-value)是非常常见的,可能会遇到两个对象,需要将它们合并,但是遇到相同的 key 时,需要将 value 合并。于是,我们就需要借助于其中一种库才能很好的解决这个问题——lodash 库。在这个库中,有一个函数 lodash.invert 可以将已有的对象中的 key 和 value 反转。本文将带您了解如何使用 npm 包 lodash.invert,并给出一些示例代码。
安装lodash.invert:
在终端窗口中输入 npm i --save lodash.invert
实现lodash.invert 安装,这样就可以成功引入它了。之后在使用该函数时,只需要用 require('lodash.invert')
就可以成功调用函数了。
示例代码:
const invert = require('lodash.invert'); const obj = { 'a': 1, 'b': 2, 'c': 3 }; const inverted = invert(obj); console.log(inverted); // { '1': 'a', '2': 'b', '3': 'c' }
本示例代码将一个已有的对象中的 key 和 value 反转,并输出了结果。
深入理解 lodash.invert 函数:
众所周知,JavaScript 的 key 必须是唯一的,也就是说一个对象中不能存在同样的 key。如果两个相同的 key 被传递到 lodash.invert 函数,则最终创建的反转对象将只显示其中一个 value。例如,以下代码将你只能返回两个值 ‘b’ 或 ‘c’:
const obj = {'a':'c', 'b':'a', 'c':'b', 'd':'b'}; const inverted = invert(obj); console.log(inverted); // {'c':'a', 'a':'b', 'b':'d'}
然而,在 lodash 中,我们可以使用其它函数,在这个函数中,可以很好的解决这个问题。例如,可以使用 _.groupBy
函数将相同的 key 分组,并将它们打包成一个数组,如下所示:
-- -------------------- ---- ------- --- - - ------------------ ----- --- - - ---- ---- ---- ---- ---- ---- ---- --- -- ----- ---------- - ------------------------------------ -- ---------- ------------ ----- -------- - --- --- ---- --- -- ----------- - ---------------------------- - ---- - ---------------------- -- - ---- ---- ---- ---- ---- - ---- --- - -
示例代码将相同的 key 分组,并将它们打包成一个数组,并输出结果。
lodash.invert 函数用法指南:
在使用 lodash.invert 函数时,需要注意以下几点:
如果传入的对象中含有相同的 key,函数返回的对象将无法正确显示。在这种情况下,我们可以结合其它函数使用,如groupby函数,来处理相同的 key。
如果传入的对象值为 null,或 undefined,则函数将抛出 TypeError 异常。
如果传入的对象值不是字符串或数字类型,函数将抛出 TypeError 异常。
在新创建的反转对象中,对象中值为数字或字符。
总结
至此,比较详细的介绍了 lodash.invert,在实际工作中,合理的使用这个函数可以快速的满足一些反转对象的需求,同时也需要我们需要充分理解这个函数的特性和使用的注意点。
示例代码
-- -------------------- ---- ------- --- - - ------------------ ----- ---- - - ---- -- ---- -- ---- - -- ----- ---- - - ------- ---- ------- --- -- ----- ---- - - ---- ---- ---- ---- ---- ---- ---- --- -- ----- --------- - ------------- ----------------------- -- - ---- ---- ---- ---- ---- --- - ----- --------- - ------------- ----------------------- -- - ---- ------- ---- ------ - ----- --------- - ----------------- ----------------------- -- - ---- - ---- --- -- ---- ---- ---- --- -
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/58805