JavaScript中获取Object对象前N个键值对元素的方法

首先明确：ES2015及之后的规范明确了普通对象的自有可枚举属性遍历顺序：整数类型的字符串键会按数值升序排列，字符串键按插入时间排列，Symbol键按插入时间排列，你示例里的数字键场景顺序是稳定可预期的，可以放心用下面的方法实现需求。

方法1：现代JS简洁写法（推荐） #

用Object.entries把对象转成键值对数组，截取前3项后再转回对象，完全保留原有键值映射：

const obj = {
 1: { id: 1, name: 'name' },
 2: { id: 2, name: 'name' },
 3: { id: 3, name: 'name' },
 4: { id: 4, name: 'name' },
 5: { id: 5, name: 'name' },
 6: { id: 6, name: 'name' },
}

const first3Items = Object.fromEntries(
  Object.entries(obj).slice(0, 3)
)

运行后first3Items的结构和你预期完全一致，键还是1/2/3，对应的值也和原对象一致。

方法2：兼容旧环境写法 #

如果需要兼容不支持Object.fromEntries的老旧运行环境，可以手动遍历截取后的键来组装新对象：

// 先拿到排序符合预期的前3个键
const targetKeys = Object.keys(obj).slice(0, 3)
const first3Items = {}
targetKeys.forEach(key => {
  first3Items[key] = obj[key]
})

注意事项 #

• 上述方法默认只处理对象自身的可枚举字符串属性，如果需要把Symbol类型的键也纳入计算，可以把取键/键值对的方法换成Reflect.ownKeys(obj)，它会返回对象所有自有键（包含不可枚举、Symbol类型），再做截取即可。
• 不要在键顺序不可预期的场景硬套这个方法，比如如果对象的键是混合了乱序整数、字符串的场景，先确认遍历顺序符合你的业务预期再使用。

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