如何用Lodash限制map结果数量？React场景slice报错解决

嘿，这个问题我太熟啦！你遇到的TypeError: .default.slice is not a function，核心原因是**itemsMap是一个对象，而不是数组**——只有数组才有slice()方法，对象当然会报错啦😅。

下面给你几种靠谱的解决方法，按需选就行：

方法1：用Lodash工具链处理（推荐，保持你原有的代码风格） #

先把对象的键转换成数组，再用_.take截取前N个，最后遍历生成选项：

// 取前5个条目
{ _.map(_.take(_.keys(itemsMap), 5), (key) => (
  <option key={key} value={key}>{key}</option>
)) }

如果你想跳过前2个再取5个（对应你之前试的slice(2)需求），可以这么写：

// 跳过前2个，取接下来的5个
{ _.map(_.take(_.slice(_.keys(itemsMap), 2), 5), (key) => (
  <option key={key} value={key}>{key}</option>
)) }

• _.keys(itemsMap)：把对象的所有键转换成数组
• _.slice(..., 2)：跳过前2个元素
• _.take(..., 5)：从处理后的数组里取前5个

方法2：用原生JS实现（不依赖Lodash） #

如果不想用Lodash，直接用原生JS的Object.keys和数组方法也能搞定：

// 跳过前2个，取接下来的5个（slice(start, end)，end=start+数量）
{ Object.keys(itemsMap).slice(2, 2+5).map(key => (
  <option key={key} value={key}>{key}</option>
)) }

• Object.keys(itemsMap)：和_.keys作用一样，把对象键转成数组
• slice(2,7)：从索引2开始，到索引7结束（不包含7），正好取5个元素

小提醒 #

以后碰到类似的对象遍历限制问题，记得先把对象转换成可操作的数组（键数组、键值对数组都行），再用数组的截取方法，就不会踩坑啦！

内容的提问来源于stack exchange，提问作者AnApprentice