前言

ES6包含了许多新的语言特性，这会让JS变的更加强大且富有表现力。本文将给大家详细介绍关于ES6中Map的常用方法，话不多说，来一起看看详细的介绍：

1.Map 结构转为数组结构

比较快速的方法是结合使用扩展运算符（...）

let map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

2.Map 循环遍历

Map 原生提供三个遍历器:

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。

下面是使用实例。

let map = new Map([
 ['F', 'no'],
 ['T', 'yes'],
]);

for (let key of map.keys()) {
 console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
 console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
 console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
 console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
 console.log(key, value);
}

上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator 属性），就是 entries 方法。

map[Symbol.iterator] === map.entries // true

3.Map 获取长度

map.size;

4.Map 获取第一个元素

const m = new Map();
m.set('key1', {})
m.set('keyN', {})

console.log(m.entries().next().value); // [ 'key1', {} ]

获取第一个key

console.log(m.keys().next().value); // key1

获取第一个value

console.log(m.values().next().value); // {}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# es6  # map方法  # es6的map方法  # map  # ES6新数据结构Map功能与用法示例  # ES6学习笔记之Set和Map数据结构详解  # ES6教程之for循环和Map  # Set用法分析  # 浅谈es6 javascript的map数据结构  # ES6学习笔记之map、set与数组、对象的对比  # 一文搞懂ES6中的Map和Set  # ES6新特性五：Set与Map的数据结构实例分析  # ES6 Map结构的应用实例分析  # es6中使用map简化复杂条件判断操作实例详解  # 遍历  # 第一个  # 详细介绍  # 这篇文章  # 谢谢大家  # 多说  # 这会  # 键值  # 将给  # 运算符  # 包含了  # 键名  # 有疑问  # br  # pre  # brush  # class  # js  # span 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  北京网站制作的公司有哪些,北京白云观官方网站？  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  python中快速进行多个字符替换的方法小结  iOS正则表达式验证手机号、邮箱、身份证号等  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  如何自定义建站之星模板颜色并下载新样式？  如何用VPS主机快速搭建个人网站？  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  Laravel怎么使用Intervention Image库处理图片上传和缩放  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  如何快速使用云服务器搭建个人网站？  高防服务器租用如何选择配置与防御等级？  js实现获取鼠标当前的位置  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  Laravel定时任务怎么设置_Laravel Crontab调度器配置  如何用已有域名快速搭建网站？  SQL查询语句优化的实用方法总结  如何挑选高效建站主机与优质域名？  如何用狗爹虚拟主机快速搭建网站？  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  Laravel如何使用Sanctum进行API认证？（SPA实战）  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  浅谈javascript alert和confirm的美化  JavaScript数据类型有哪些_如何准确判断一个变量的类型  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  Python结构化数据采集_字段抽取解析【教程】  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  北京网站制作公司哪家好一点,北京租房网站有哪些？  微信h5制作网站有哪些,免费微信H5页面制作工具？  如何用西部建站助手快速创建专业网站？  如何在腾讯云服务器快速搭建个人网站？  bootstrap日历插件datetimepicker使用方法  Laravel distinct去重查询_Laravel Eloquent去重方法  LinuxCD持续部署教程_自动发布与回滚机制  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  🚀拖拽式CMS建站能否实现高效与个性化并存？  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  高防服务器：AI智能防御DDoS攻击与数据安全保障  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  新三国志曹操传主线渭水交兵攻略  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）