结论

  • Map:存放键值对,区别于 Object,键可以是任何值。
  • Set:存放不重复的值

Map

存储键值对,读取时与插入顺序一致。

var map = new Map([[1, "1"], [3, "3"], [2, "2"]]);
map.set("foo", "bar"); for (const [key, val] of map) {

console.log(key, val);

}

输出:

1 '1'
3 '3'
2 '2'
foo bar

任何值,对象或原始值,都可作为 Map 的键。

var myMap = new Map();

var keyString = 'a string',

keyObj = {},

keyFunc = function() {}; // setting the values

myMap.set(keyString, "value associated with 'a string'");

myMap.set(keyObj, 'value associated with keyObj');

myMap.set(keyFunc, 'value associated with keyFunc'); myMap.size; // 3 // getting the values

myMap.get(keyString); // "value associated with 'a string'"

myMap.get(keyObj); // "value associated with keyObj"

myMap.get(keyFunc); // "value associated with keyFunc" myMap.get('a string'); // "value associated with 'a string'"

// because keyString === 'a string'

myMap.get({}); // undefined, because keyObj !== {}

myMap.get(function() {}); // undefined, because keyFunc !== function () {}

相比 Object,除了对可作为键的值没要求外,Map 自带遍历器(iterator),可对其使用 for of 语句。

同时还自带一些便捷的属性和方法,比如 sizeclear()

Set

存储唯一的值,对于重复的值会被忽略。

示例:

var obj = { a: 1, b: 2 };
var set = new Set([1, 2, 2, "foo"]);
set.add(obj);
set.add(obj); console.log("size:", set.size);

console.log(set.has(2));

console.log(set.has(obj)); for (const val of set) {

console.log(val);

}

输出:

4
true
true
1
2
foo
{ a: 1, b: 2 }

相关资源

JavaScript Map 和 Set的更多相关文章

  1. js javascript map函数去重功能的使用实例

    js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...

  2. 一个简单的JavaScript Map

    用js写了一个Map,带遍历功能,请大家点评下啦. //map.js Array.prototype.remove = function(s) { for (var i = 0; i < thi ...

  3. Arcgis for javascript map操作addLayer具体解释

    本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...

  4. javascript Map和Set

    Map和Set JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实 ...

  5. Arcgis for javascript map操作addLayer详解

    本节的内容很简单,说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种,如下图: addLayer方法 在addLa ...

  6. JavaScript Map 和 Object 的区别

    不同点 Key filed 在 Object 中, key 必须是简单数据类型(整数,字符串或者是 symbol),而在 Map 中则可以是 JavaScript 支持的所有数据类型,也就是说可以用一 ...

  7. javascript map forEach filter some every在购物车中的实战演练区分用法

    1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...

  8. JavaScript --- Map集合结构详解

    Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 itera ...

  9. JavaScript Map 实现

    //定义map function Map() { this.container = {}; } //将key-value放入map中 Map.prototype.put = function(key, ...

随机推荐

  1. 揉碎HTTP编码过程,从此不乱码

    老生常谈之HTTP乱码问题 最后的结论? 对于get请求 在Servlet中调用request.setCharacterEncoding()设置编码是没有意义的不管你使用任何编码方式对于你的数据解码没 ...

  2. base64转图片、图片转base64、图片拼接、加水印(水印角度可设置)

    /** * @Description: 将base64编码字符串转换为图片 * @param imgStr * base64编码字符串 * @param path * 图片路径-具体到文件 * @re ...

  3. springcloud集成redis

    1.application.properties/application.yml配置: redis: # redis数据库索引(默认为0),我们使用索引为3的数据库,避免和其他数据库冲突 databa ...

  4. 和为k的倍数

    小b喜欢和为K的倍数的序列. 现在有一个长度为n的序列A,请问A有多少个非空连续子序列是小b喜欢的. #include<cstdio> #include<iostream> # ...

  5. luogu P2272 [ZJOI2007]最大半连通子图

    题目描述 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u的有向路径.若 ...

  6. LightOJ 1344 Aladdin and the Game of Bracelets

    It's said that Aladdin had to solve seven mysteries before getting the Magical Lamp which summons a ...

  7. ARTS-S docker ceontos镜像中使用crontab

    centos镜像中默认没有crontab,需要在dockerflle中通过yum的安装 yum -y install vixie-cron crontabs && yum clean ...

  8. 大数据学习笔记——Hbase高可用+完全分布式完整部署教程

    Hbase高可用+完全分布式完整部署教程 本篇博客承接上一篇sqoop的部署教程,将会详细介绍完全分布式并且是高可用模式下的Hbase的部署流程,废话不多说,我们直接开始! 1. 安装准备 部署Hba ...

  9. 【Java Web开发学习】Spring4整合thymeleaf视图解析

    [Java Web开发学习]Spring4整合thymeleaf视图解析 目录 1.简单介绍2.简单例子 转载:https://www.cnblogs.com/yangchongxing/p/9111 ...

  10. 105道BAT最新Java面试题(MySQL+Redis+nginx+ookeeper+MongoDB)

    MySQL面试题 1. 主键 超键 候选键 外键 2.数据库事务的四个特性及含义 3. 视图的作用,视图可以更改么? 4. drop,delete与truncate的区别 5. 索引的工作原理及其种类 ...