ES6学习教程之Map的常用方法总结

前言

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); // {}

总结

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

赞 (0)

相关推荐

  • ES6教程之for循环和Map,Set用法分析

    本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

  • ES6新数据结构Map功能与用法示例

    本文实例讲述了ES6新数据结构Map功能与用法.分享给大家供大家参考,具体如下: 新数据结构Map JavaScript中对象的本质是键值对的集合,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map.Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇).请看下面例子. var m = new Map(); var ul = document.getElementsByTagName('ul'); m.set(ul,'hi'); co

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • ES6新特性五：Set与Map的数据结构实例分析

    本文实例讲述了ES6新特性五之Set与Map的数据结构.分享给大家供大家参考,具体如下: 1. Set ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) console.log(s); //Set { 2, 3, 5, 4 } ② 属性和方法 Set结构有以下属性. Set.prototype.constructor:构造函数

  • ES6学习教程之Map的常用方法总结

    前言 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'

  • ES6学习教程之Promise用法详解

    前言 promise用了这么多年了,一直也没有系统整理过.今天整理整理promise的相关东西,感兴趣的可以一起看一看.我尽量用更容易理解的语言来剖析一下promise 我准备分两篇文章来说明一下promise 一篇来理解和使用promise(本篇) 另一篇来从promise使用功能的角度来剖析下promise的源码(下一篇) 1.什么是Promise 我的理解是:实现让我们用同步的方式去写异步代码的一种技术.是异步解决方案的一种. 他可以将多个异步操作进行队列化,让它们可以按照我们的想法去顺序

  • Go语言学习教程之goroutine和通道的示例详解

    目录 goroutine 通道 Range 和 Close Select 官方留的两道练习题 等价的二叉树 网络爬虫 源码地址 goroutine goroutine是由Go运行时管理的轻量级线程. go f(x, y, z)在一个新的goroutine中开始执行f(x, y,z). goroutines运行在相同的地址空间中,所以对共享的内存访问必须同步.sync包提供了基本的同步原语(synchronization primitives),比如互斥锁(mutual exclusion loc

  • jQuery插件学习教程之SlidesJs轮播+Validation验证

    SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

  • PHP内核学习教程之php opcode内核实现

    opcode是计算机指令中的一部分,用于指定要执行的操作, 指令的格式和规范由处理器的指令规范指定. 除了指令本身以外通常还有指令所需要的操作数,可能有的指令不需要显式的操作数. 这些操作数可能是寄存器中的值,堆栈中的值,某块内存的值或者IO端口中的值等等. 通常opcode还有另一种称谓:字节码(byte codes). 例如Java虚拟机(JVM),.NET的通用中间语言(CIL: Common Intermeditate Language)等等. 1. Opcode简介 opcode是计算

  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&

  • Angular4学习教程之HTML属性绑定的方法

    Angular4学习教程之HTML属性绑定的方法

    前言 本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 基本HTML属性 <td [attr.colspan]="tableColspan"></td> Css 类绑定 <!-- 第一种情况 class 类全部替换 --> <div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</d

  • WebGL学习教程之Three.js学习笔记(第一篇)

    webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习

  • ES6学习笔记之map、set与数组、对象的对比

    前言 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一起看看详细的介绍吧. // 数据结构横向对比,增,查,改,删 1.map和数组对比 { let map=new Map(); let array=[]; /**增**/ map.set('t',1); array.push({t:1}); console.info('map-array',map,ar

  • ES6入门教程之Iterator与for...of循环详解

    本文主要介绍了关于ES6中Iterator与for...of循环的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 一.Iterator(遍历器) 遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作.在ES6中遍历操作特质for-.of循环. 它的作用主要有两个: 为遍历对象的属性提供统一的接口. 使对象的属性能够按次序排列. ES6的遍历器协议规定,部署了next方法的对象,就具备了遍历器功能.next方法必须返回一个包含value和d

随机推荐