我想使用lodash从对象(而不是数组)中获取前n个键/值对.我找到了 this answer for underscore,它说首先使用use(在lodash中不存在),或者使用take(仅适用于数组).

尝试从对象获取’a:7’和’b:8’对的示例节点会话:

> var ld=require("lodash")
undefined
> var o={a:7,b:8,c:9}
undefined
> ld.keys(o)
[ 'a','b','c' ]
> ld.take(o,2)
[]
> ld.first(o,2)
undefined
>

当然,使用lodash必须有一些简单的方法来做到这一点,但对于我的生活,我找不到任何东西.也许我不得不诉诸本地的js?

解决方法

如果不编写自定义代码,则无法获取对象的前N个元素.这是因为有 no ordering of the elements in objects,所以如果有一个库函数,它永远不会保证给你你期望的元素.给定一个对象
var obj = {  b: 3,y: 2,a: 1 };

目前尚不清楚“前2”是指什么 – 你想要a和b,因为这是字母顺序吗?如果是这样,他们是否按顺序?如果没有,你想要b和y因为它们首先出现吗?也许你想要a和y因为它们的价值最低?

除了没有重复之外,您无法保证获得什么,因此所有这些组合都是有效的.此外,您可以按任何顺序获取它们,并且a是同等有效的输出您可能更喜欢一个或另一个,但它通常不会使其正确.

有很多方法,但你必须接受你需要处理非订单.

纯JavaScript解决方案.

function firstN(obj,n) {
  return Object.keys(obj) //get the keys out
    .sort() //this will ensure consistent ordering of what you will get back. If you want something in non-aphabetical order,you will need to supply a custom sorting function
    .slice(0,n) //get the first N
    .reduce(function(memo,current) { //generate a new object out of them
      memo[current] = obj[current]
      return memo;
    },{})
}
var obj = { b: 2,y: 25,a: 1 }

console.log( firstN(obj,2) );

这是使用Object.keys,Array.prototype.sort和Array.prototype.reduce

使用lodash可以实现同样的目的,但并不比这更简洁 – 它将涉及调用类似的功能.它可以这样做,例如:

function firstN(obj,n) {
  return _.chain(obj)
    .keys()
    .sort()
    .take(n)
    .reduce(function(memo,current) {
      memo[current] = obj[current];
      return memo;
    },{})
    .value();
}

var obj = { b: 2,a: 1 }
      
console.log( firstN(obj,2) );
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

如你所见,它与以前几乎一样.语法和执行此任务的确切方法可能有所不同,但主要观点应该仍然存在 – 您需要对一致性进行排序,然后您可以获得任意数量的项目.

javascript – 如何使用lodash获取对象的前n个元素?的更多相关文章

  1. vue3+ts如何通过lodash实现防抖节流详解

    loadsh是一个工具库,我们通常使用loadsh的debounce函数处理防抖,下面这篇文章主要给大家介绍了关于vue3+ts如何通过lodash实现防抖节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  2. 手写Spirit防抖函数underscore和节流函数lodash

    这篇文章主要介绍了手写Spirit防抖函数underscore和节流函数lodash,接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数

  3. lodash中pick和omit函数的用法介绍

    这篇文章介绍了lodash中pick和omit函数的用法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. Vue中使用Lodash的实现示例

    本文主要介绍了Vue中使用Lodash的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 在 Angular中 使用 Lodash 的方法

    这篇文章主要介绍了在 Angular中 使用 Lodash 的方法,需要的朋友可以参考下

  6. Lodash 控制ajax请求频率工具

    例如:

  7. Angular2延迟加载模块:如何使用SystemJS Builder创建构建包?

    我正在使用Angular2和SystemJS来创建Web应用程序.我的应用程序中有一些模块,在路由器配置中我使用延迟加载来打开它们.这是我的应用程序的路由文件,延迟加载两个模块:我使用Gulp为开发服务器和生产构建创建任务.对于构建,我使用SystemJSBuilder为整个应用程序创建缩小的JS文件.但是……

  8. angular – 导入非打字稿npm模块的最佳解决方案

    使用traceur和SystemJS使用ES6这种形式是正确的:对于Typescript它是不够的–我得到错误错误TS2307:找不到模块’lodash’所以,我安装’lodash.d.ts’:现在,我得到:模块’“lodash”’没有默认导出.来自Typescript编译器所以,我尝试’节点样式’:我得到:未捕获错误:require不是浏览器中的函数最后:并且它有效,但它的’旧形式’不适合ES6.对于非打字稿模块,是否有单一,正确的方法来使用ES6样式的Typescript导入?尝试从’lodash’导

  9. angularjs – Angular2 – Angular-CLI安装lodash – 找不到模块

    MacOSXElcapitan|angular-cli:0.1.0|节点:5.4.0|os:darwinx64我尝试根据angular-cliwiki:https://github.com/angular/angular-cli/wiki/3rd-party-libs安装第三方npm模块但是失败了.我几天来一直在努力解决这个问题,非常感谢任何帮助.获取错误的步骤:ngnewlodashtest3c

  10. 在Angular中导入和使用lodash的正确方法

    我曾经能够通过导入语句在Angular中使用lodash方法,如下所示:我现在在使用该语句时收到以下错误:唯一能编译而没有错误的是这句话:在我的代码中,我将_debounce()更改为_.debounce()。这是唯一的方式吗?有没有办法只进口去抖,或者由于“树木”而无关紧要?我意识到我可以编写自己的去抖函数,但我主要对“正确”的方法感兴趣。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部