new Map,Array.from,Object.entries的作用以及使用方法

1、先看完整代码

bash 复制代码
Array.from(new Map(arr.map(item => [item.code, item])).values())

先来看看 arr.map(...)

作用:把对象数组变成「键值对数组」

例如:{code:'1',name:'2'},{code:'2',name:'3'}

会变成

\['1', {code:'1',name:'2'}\], \['2', {code:'2',name:'3'}

]

Map 必须接收 key, value 格式,所以这一步是为 Map 做准备。

2、 new Map(...) 的作用

Map 是什么?

Map 是 JS 的键值对结构,key 唯一不重复。

1、自动去重

如果有重复 code,后面的会覆盖前面的,最终只保留最后一个。

2、存储结构

以 code 为 key,整个对象为 value

执行后得到一个 Map 结构:

bash 复制代码
Map(2) {
  '1' => { code: '1', name: '2' },
  '2' => { code: '2', name: '3' }
}

3、.values() 的作用

bash 复制代码
map.values()

作用:只把 Map 里的「值」取出来

得到一个 MapIterator 迭代器(不是数组,不能直接用):

bash 复制代码
[Map Iterator] {
  { code: '1', name: '2' },
  { code: '2', name: '3' }
}

4、 Array.from(...) 的作用(核心)

Array.from(迭代器)

它的作用只有一句话:把「类数组 / 迭代器」转成真正的数组!

上面的 .values() 返回的是迭代器,不是数组,不能直接用。

Array.from 就是把它变成标准数组:

bash 复制代码
[
  { code: '1', name: '2' },
  { code: '2', name: '3' }
]

5、Object.entries

一句话:Object.entries(对象) 会把一个对象,转成 \[key, value, key, value, ...] 这样的二维数组。

Object.entries(对象)

→ 把对象变成 \[键, 值, 键, 值] 的数组

new Map(二维数组)

→ 接收这种结构,生成一个 Map 做去重

相关推荐
kisshyshy1 分钟前
从Props透传到自定义Hook:系统梳理React跨层级通信与逻辑复用
前端·架构·代码规范
yume_sibai3 分钟前
05-Flutter实战项目
前端·flutter
泡海椒6 分钟前
jquick-pdf 表格行列尺寸控制实战:单元格合并的可行边界
java·开发语言·pdf
纪念 22918 分钟前
c++类和对象(四)
开发语言·c++
涛涛ing20 分钟前
React 19.3 发布,但真正的赢家是 StyleX:当 AI 成为框架的“第一用户”
前端
zhangminghuan1 小时前
Vue vs React 实战拓展面试题|摒弃基础八股,聚焦业务开发核心难点(2026前端进阶)
前端
IT_陈寒1 小时前
Redis主从切换竟让业务卡了3秒?这个坑我替你踩了
前端·人工智能·后端
天若有情6731 小时前
独立开发复盘:我用 Node.js 做了个在线工具箱
前端·json·工具
xieliyu.1 小时前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
辛苦才能1 小时前
C++多态原理:虚函数表的内存布局与动态绑定的汇编真相
开发语言·c++