js的Map函数使用方法详解

Map是ES2015引入的Global Object，
Map对象中保存了键值对，且任何对象（包括原始值）都可以作为键或者值。

1. 构造函数

Map必须作为构造函数来使用，

new Map([iterable])

它的参数是可选的，如果提供的话，必须是一个iterable对象。
iterable对象的迭代结果为，[key1, value1], [key2, value2], ...。

例如

// 1. 数组是一个iterable对象
m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}

// 2. generator会返回一个iterable对象
gen = function*(){
  yield [1, 'a'];
  yield [2, 'b'];
}
iter = gen();
m = new Map(iter);    // Map(2) {1 => "a", 2 => "b"}

2. 实例属性

m.size用来获取key的个数，

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
m.size    // 2

3. 实例方法

（1）m.has(key)，判断key是否存在
（2）m.get(key)，取值，如果没有这个key就返回undefined（3）m.set(key, value)，设值，返回m（4）m.delete(key)，如果key存在且已经被删除了就返回true，如果key不存在就返回false。
（5）m.clear()，删除所有键值对

（6）m.keys()，返回一个iterable对象，其中包含了按插入顺序迭代的所有key

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.keys()]    // [1, 2]

（7）m.values()，返回一个iterable对象，其中包含了按插入顺序迭代的所有value

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.values()]    // ["a", "b"]

（8）m.entries()，返回一个iterable对象，每一个元素是[key, value]，遍历顺序按key的插入顺序

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.entries()]    // [[1, "a"], [2, "b"]]

注：更便捷的得到二维数组的方法是使用Array.from，它可以直接接受Map作为参数，

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
Array.from(m)    // [[1, "a"], [2, "b"]]

Array.from也可以接受iterable对象，

Array.from(m.keys())    // [1, 2]
Array.from(m.values())    // ["a", "b"]
Array.from(m.entries())    // [[1, "a"], [2, "b"]]

（9）m.forEach(fn[, thisArg])，用于对Map以key的插入顺序进行遍历

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
m.forEach((value, key)=>{
    value    // "a", "b"
    key      // 1, 2
});

注：第一个参数是value，第二个参数才是key。

除了使用m.forEach，Map还可以使用for ... of进行遍历，

m = new Map([[1, 'a'], [2, 'b']]);
for(i of m){
  i    // [1, 'a'], [2, 'b']
}

4. key的相等性判断

Map key的相等性判断，使用了所谓的“SameValueZero”算法：
（1）在做key的相等性判断时，NaN被认为与NaN相等。（即使NaN !== NaN）
（2）其他种类的key，依据===运算符进行判断。
（3）目前+0和-0被认为相等是符合ES2015规范的，但是会有浏览器兼容性问题。

5. Map与Object对比

（1）Object的key只能是字符串（String）或符号（Symbol），
而Map的key可以是任意值，包括函数，对象（object）或者任何原始值（primitive value）。

（2）对于Map来说，可以通过size属性直接获取key的个数，
而Object则需要Object.keys(xxx).length来间接获取自身属性的个数。

（3）Map实例是一个iterable对象，可以直接用来遍历，
而Object需要先获取它的key，再使用key进行遍历。

（4）Object可以有原型对象，自身属性可能会无意间与原型属性相冲突。
（虽然ES2015中可以通过Object.create(null)来创建一个无原型的对象。）

（5）Map key的添加删除操作更加高效。

更多关于js中的Map函数使用方法请查看下面的相关链接

赞 (0)

相关推荐

  • JS中Map和ForEach的区别

    如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的方法:Array.prototype.map()和Array.prototype.forEach(). 那么,它们到底有什么区别呢? 定义 我们首先来看一看MDN上对Map和ForEach的定义: forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element). map(): 创建一个新的数组,其中每一个元素由调用数组中

  • 在JavaScript中操作数组之map()方法的使用

    JavaScript 数组map()方法创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果. 语法 array.map(callback[, thisObject]); 下面是参数的详细信息: callback : 从当前的元素函数产生新的数组的元素. thisObject : 对象作为该执行回调时使用 返回值: 返回创建数组 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚本代码在顶部: if

  • js循环map 获取所有的key和value的实现代码(json)

    下面的方法一语方法二都是经过我们小编测试并运行的 方法一: json格式定义 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • js中遍历Map对象的方法

    js中遍历Map对象的方法 console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件

  • js Map List 遍历使用示例

    Map (exMap:{"name":"abc","sex",'male'}): 在不知道key的情况下遍历map: 网上说过这种方法: 复制代码 代码如下: for(var key in exMap){ Console.write("key:"+key+";value:"+exMap[key]);//经我考证,the key is undefined.So the method is not right.

  • JS中的forEach、$.each、map方法推荐

    forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回

  • JS数组遍历中for,for in,for of,map,forEach各自的使用方法与优缺点

    JS数组遍历普通函数 优点:支持流程控制(break.continue.return) for const arr = ["A", "B", "C"] for(let i = 0; i<arr.length; i++){ console.log(arr[i]) } 优点:能够对索引精确控制缺点:语法较为繁琐 for in const arr = ["A","B","C"] arr[

  • JavaScript中循环遍历Array与Map的方法小结

    js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET

  • js的Map函数使用方法详解

    Map是ES2015引入的Global Object,Map对象中保存了键值对,且任何对象(包括原始值)都可以作为键或者值. 1. 构造函数 Map必须作为构造函数来使用, new Map([iterable]) 它的参数是可选的,如果提供的话,必须是一个iterable对象.iterable对象的迭代结果为,[key1, value1], [key2, value2], .... 例如 // 1. 数组是一个iterable对象 m = new Map([[1, 'a'], [2, 'b']]

  • python中map()函数使用方法详解

    python中map()函数使用方法详解

    目录 总结 先看map()函数底层封装介绍: 注释中翻译为: map(func, *iterables)--> map对象 创建一个迭代器,使用来自的参数计算函数每个迭代器.当最短的迭代器耗尽时停止. 作用: map(func, lst) ,将传⼊的函数变量 func 作⽤到 lst 变量的每个元素中,并将结果组成新的列表 (Python2)/ 迭代器(Python3) 返回. 注意: map()返回的是一个迭代器,直接打印map()的结果是返回的一个对象. 示例代码1: lst = ['1',

  • 在一个页面重复使用一个js函数的方法详解

    1.给每个拥有相同行为的问题DOM节点一个相同的class类,如question,同时给不同的问题一个不同的标识ID如 id="question1" id="question2"...诸如此. 2.给类.question绑定点击事件,在触发函数里面先判断当前点击的这个类的id,即可知道你要操作的是哪一个问题,然后调用你的那个伸缩函数即可. <!DOCTYPE html> <html> <head lang="en"&

  • javascript ES6中set集合、map集合使用方法详解与源码实例

    set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用. set集合语法: //创建一个set集合,传参为一个可迭代的对象 const s1 = new Set(iterable); API 名称 类型 简介 Set.add() 原型方法 添加数据 Set.has() 原型方法 判断是否存在一个数据 S

  • 原生js封装的一些jquery方法(详解)

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

  • 基于js对象,操作属性、方法详解

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

  • C++中可以接受任意多个参数的函数定义方法(详解)

    能够接受任意多个参数的函数,可以利用重载来实现.这种函数的执行过程类似于递归调用,所以必须要有递归终止条件. #include <iostream> #include <bitset> void print() {} // 递归终止条件.这是必需的. template<typename Type, typename... Types> void print(const Type& arg, const Types&... args) { std::cou

  • C语言memset函数使用方法详解

    C语言memset函数使用方法详解 一.函数原形   void *  memset(void*s, int ch,size_t n) 二.函数作用  将以s内存地址为首的连续n个字节的内容置成ch,一般用来对大量结构体和数组进行清零 三.常见错误 1.搞反了 ch 和 n的位置 对char[20]清零,一定是 memset(a,0,20); 2.过度使用memset 3.其实这个错误严格来讲不能算用错memset,但是它经常在使用memset的场合出现 int fun(strucy someth

  • 对Python实现累加函数的方法详解

    这个需求比较奇怪,要求实现Sum和MagaSum函数,实现以下功能 Sum(1) =>1 Sum(1,2,3) =>6 MegaSum(1)() =>1 MegaSum(1)(2)(3)() =>6 实际上Sum就是Python自建的sum函数,它支持变参,变参怎么实现,自然是*args,所以很容易写出雏形: Sum def Sum(*args): count = 0 for i in args: count+=i return count 第二个函数就有点皮了,它要求有参数的时候

  • 如何在 clion 运行多个 main 函数（方法详解）

    在写 C++ 的题目的时候经常会遇到这样的问题,写了多个 cpp 文件,在 clion 中编译报错不能同时存在多 main 函数 这里写了一个小程序优雅地解决这个问,非常简单,就是就是读字符串写文件 直接修改一下 CMake 自动遍历文件即可 多个 main 函数的报错 在 clion 中写完一题,想写下一题,结果发现 main 函数不能运行 正确的解决方法 在牛客用户AAnonymous的告知下,借鉴了他的 github 上的CMakeLists.txt,直接修改 CMakeLists.txt

随机推荐