lodash中pick和omit函数介绍

2021-02-02 09:50:01

在使用lodash之前,我们需要引入lodash,下面是引入的方式

const _ = require('lodash/object');



1. pick()函数

    调用格式:_.pick(object, *keys) 
    该函数的功能是:返回一个只有列入挑选key属性的对象。其中,参数object为JSON格式的对象,*keys表示多个需要挑选出来的key属性。示例如下


const _ = require('lodash/object');const originObject = {A: 1,B: 2,C: 3,D: 4};const newObject = _.pick(originObject, 'B', 'C');console.log(originObject);console.log(newObject);

输出结果如下图所示:


:originObject:
{ A: 1, B: 2, C: 3, D: 4 }
newObject:
{ B: 2, C: 3 }



在上述代码中,先定义一个名为originObject的对象,该对象中包含4个属性,分别为A、B、C、D;然后调用pick()函数,挑选key的属性为B、C,并将返回的对象赋予变量newObject;最后,在控制台输出该对象的内容。从输出结果中可以看出,挑选key属性后,返回一个新的对象,该对象包含被挑选的全部key属性和value值。

在学习了基本的pick方法之后,我们还能够进行了解一下pickBy,显而易见,就是通过某一属性进行挑选,


const _ = require('lodash');const originObject = {A: 1,B: 2,C: 3,D: 4,E: '5',F: true};const newObject = _.pickBy(originObject, _.isString);console.log('originObject:');console.log(originObject);console.log('newObject:');console.log(newObject);

输出结果为:


originObject:
{ A: 1, B: 2, C: 3, D: 4, E: '5', F: true }
newObject:
{ E: '5' }

在上面的结果中,在旧对象中挑选出了是字符串的对象E,其他的对象没有被选出


2. omit()函数

    调用格式:_.omit(object, *keys) 
    该函数的功能是:返回一个没有列入排除key属性的对象。其中,参数object为JSON格式的对象,*keys表示多个需要排除掉的key属性。示例如下。


const _ = require('lodash/object');const originObject = {A: 1,B: 2,C: 3,D: 4};const newObject = _.omit(originObject, 'B', 'C');console.log('originObject:');console.log(originObject);console.log('newObject:');console.log(newObject);

输出结果如下所示:


originObject:
{ A: 1, B: 2, C: 3, D: 4 }
newObject:
{ A: 1, D: 4 }


      在上述代码中,调用omit()函数,排除key的属性为B、C,将返回的对象赋予变量newObject,并在控制台输出该对象的内容。从输出结果可以看出,因为排除了key属性B和C,最后返回的新对象中仅包含了key属性A和D的名称和对应值。

同理,我们也能够了解omitBy方法的使用,

const _ = require('lodash');const originObject = {A: 1,B: 2,C: 3,D: 4,E: '5',F: true};const newObject = _.omitBy(originObject, _.isString);console.log('originObject:');console.log(originObject);console.log('newObject:');console.log(newObject);

输出结果如下面所示:

originObject:
{ A: 1, B: 2, C: 3, D: 4, E: '5', F: true }
newObject:
{ A: 1, B: 2, C: 3, D: 4, F: true }


由上面结果可以看出,仅仅限制住了是字符串的对象,其余对象仍旧返回到新的对象中


  • 2019-11-04 02:12:42

    genymotion免费版

    genymotion是一套完整的android虚拟环境工具,相对官方android sdk,它的安装和使用简洁方便不臃肿,但是现在genymotion官方网站不再提供个人的下载,这篇博客记录了如何下载和使用genymotion个人版.

  • 2019-11-07 08:47:00

    详解vue2.6插槽更新v-slot用法总结

    在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  • 2019-11-08 09:34:46

    CSS3 Transition详解和使用

    Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性。 transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间 transition-timing-function 用于指定过渡的类型 transition-property transition-property 用于指定应用过渡的属性名称,可以指定多个属性名称,多个属性名称之间用, 分隔。 默认值为 all 也就是所有的元素都应用过渡效果。 例如,想让容器的宽高有一个过渡的效果,就可以这样写: