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

相关推荐
大江东去浪淘尽千古风流人物4 分钟前
【HexVIO】DSP卸载双目惯性VIO:Hexagon向量化前端与单帧融合调度深度解析
前端·状态模式·slam·dsp·vio·hexagon·移动端加速
এ慕ོ冬℘゜6 分钟前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript
其实防守也摸鱼8 分钟前
Chrome 扩展安全攻防实录:从攻击面到防御实践
开发语言·前端·网络·chrome·安全·web安全·php
web打印社区12 分钟前
Lodop排障总纲-常见报错一张表
开发语言·前端·javascript·chrome·websocket
李剑一26 分钟前
为什么几乎所有的知名开源项目都是外国人写的?
前端·ai编程·deepseek
小郎君65826 分钟前
(一)为什么表单需要第三种状态:disabled、readonly 与纯文本展示
前端·vue.js
计算机魔术师31 分钟前
1.4万亿没人接,OpenAI自己砍了1500亿
前端
程序员大阳43 分钟前
副队长JavaScript教程(56)-DOM之表单操作
javascript·dom·表单操作
Dxy12393102161 小时前
JS AES加密详解
开发语言·javascript·ecmascript
溪语流沙1 小时前
【每天一个CSS | Day41】开关三连:一套状态机,三种视觉翻译
前端·css·html5·每日一练·按钮