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 做去重

相关推荐
guodingdingh20 分钟前
软件开发工作问题总结0718
java·开发语言·数据库
寅时码2 小时前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听6132 小时前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby2 小时前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
daols882 小时前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
不好听6132 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹2 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6132 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue2 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue2 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法