js map()方法 详解与使用_new map()条件渲染按钮 js-程序员宅基地

技术标签: js map  js  

javascript也有map和set数据类型。 与javaHashMap()类似
Js map()方法
map中的方法 set()存值. get();取值 ,has(’’); // map里面是否存在key ‘delete(’’); // 删除key ’
1 .industryMap.set(“key”,”value”);添加值,
2 .industryMap.get(“AF”);//获取值
3 .industryMap.has(“AF”);//map里面是否存在key
4 .industryMap.'delete(‘AF’); // 删除key ’

var industryMap = new Map();//新建 一个map
Var industryData=[{id: "AF", text: "安防"},{id: "DL", text: "电力"} ,{id: "IT", text: "IT"}, {id: "ZJ", text: "冶金"}]
$.each(industryData,function(i, n){
		console.log(i)
		console.log(n)
		industryMap.set(n.id,n.text);//添加值
	})
industryMap.get(“AF”);//获取值  结果 安防

map

初始化map并通过key来取value

var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);
m.get(‘Michael’); // 95
var m = new Map(); // 空Map
m.set(‘Adam’, 67); // 添加新的key-value
m.set(‘Bob’, 59);
m.has(‘Adam’); // 是否存在key ‘Adam’: true
m.get(‘Adam’); // 67
m.delete(‘Adam’); // 删除key ‘Adam’
m.get(‘Adam’); // undefined
后面set的值会覆盖前面设的。
var m = new Map();
m.set(‘Adam’, 67);
m.set(‘Adam’, 88);
m.get(‘Adam’); // 88

set

set存储的是一组不重复的key.

var s=new Set([1,2,3,4,4]); //Set(4) {1, 2, 3, 4}

var s=new Set();
s.add(1); //Set(1) {1}
s.add(2); //Set(2) {1, 2}
s.add(3); //Set(3) {1, 2, 3}
s.add(‘3’); //Set(4) {1, 2, 3, “3”}

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

遍历Map和Set无法像Array那样使用下标。为了统一集合类型,ES6标准引入了新的iterable类型, Array/Map/Set都属于iterable类型。

var a = [‘A’, ‘B’, ‘C’];
var s = new Set([‘A’, ‘B’, ‘C’]);
var m = new Map([[1, ‘x’], [2, ‘y’], [3, ‘z’]]);
for (var x of a) { // 遍历Array
console.log(x); //输出A、B、C
}
for (var x of s) { // 遍历Set
console.log(x); //输出A、B、C
}
for (var x of m) { // 遍历Map
console.log(x[0] + ‘=’ + x[1]); //输出1=x,2=y,3=z
}

还可以用forEach.

a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ’ + index);
});
输出 A, index = 0 B, index = 1 C, index = 2
var s = new Set([‘A’, ‘B’, ‘C’]);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
var m = new Map([[1, ‘x’], [2, ‘y’], [3, ‘z’]]);
m.forEach(function (value, key, map) {
console.log(value);
});

还可以只传一个element参数

var a = [‘A’, ‘B’, ‘C’];
a.forEach(function (element) {
console.log(element);
});


作者:liaotl10
来源:CSDN
原文:https://blog.csdn.net/liaotl10/article/details/79614375
版权声明:本文为博主原创文章,转载请附上博文链接!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42556903/article/details/88552929

智能推荐

MySQL的存储引擎(InnoDB与MyISAM)_myisam的底层存储结构-程序员宅基地

文章浏览阅读2.5k次,点赞22次,收藏28次。Mysql 底层数据引擎以插件形式设计,最常见的是 Innodb 引擎和 Myisam 引擎,用户可以根据个人需求选择不同的引擎作为 Mysql 数据表的底层引擎。MyISAM 存储引擎是 MySQL 中常见的存储引擎,虽然性能极佳, 拥有较高的插入,查询速度,但却不支持事务处理(transaction),不支持外键。曾(MySQL 5.5及之前版本)是 MySQL 的默认存储引擎。InnoDB 存储引擎是MySQL的数据库引擎之一,现为MySQL的默认存储引擎,事务型数据库的首选引擎_myisam的底层存储结构

ASP.NET MVC 5 中使用Frameset中Session、Cookie值消失的问题完整解决方案_asp.net iis http cookie 丢失-程序员宅基地

文章浏览阅读750次。前言最近这段时间在做一个项目,由于赶时间,我先完成其他的,对于相对麻烦的,就放到最后来完成。所有的事都完成了,但却有一个比较麻烦的事还一直没解决。就是在ASP.NET MVC 5中所使用的Session和Cookie。登录时赋值,然后在其他地方根本无法读取值,读出来的值全是空的。查遍所有网上资料,没有一个解决的。下面列举网络资料解决方案:只需要设置 P3P HTTP Header,基本_asp.net iis http cookie 丢失

MongoDB6 安装教程_an error occurred while loading instance info: inv-程序员宅基地

文章浏览阅读3.7k次,点赞7次,收藏17次。MongoDB6的安装和配置_an error occurred while loading instance info: invalid utf-8 st

前端将DOM转为图片并保存_dom-to-image生成图片保存到本地-程序员宅基地

文章浏览阅读1.2k次。dom-to-image与html2canvas相比,dom-to-image支持带滚动条的节点,但是在移动端的兼容性较差,因为现在做的是PC端的项目而且有虚拟表格所以选择了dom-to-image,大家看场景自由选择~_dom-to-image生成图片保存到本地

tensor多维向量的简单理解-程序员宅基地

文章浏览阅读2.9k次,点赞2次,收藏15次。tensor是Tensorflow中最基础的数据结构,常常翻译为张量,可以理解为n维数组或矩阵,相关函数:constant(value, dtype=None, shape=None, name='Const', verify_shape=False)三维方向定义,适用于2维和3维0、零维张量import tensorflow as tf#零维张量const0 = tf.constant(1, tf.float16)print(const0)运行结果:.._多维向量

axios拦截器及封装_axios拦截器封装-程序员宅基地

文章浏览阅读235次。上一步咱们将axios拦截器进行了封装,一般项目工程化会将所有的接口封装到一个js中。在请求或响应被 then 或 catch 处理前拦截它们。在需要使用的页面进行调用。_axios拦截器封装

随便推点

【网络同步】浅析帧同步和状态同步_帧同步如何保证客户端同步-程序员宅基地

文章浏览阅读1k次。谈到网络游戏,不可避免要谈到现有两种比较常见的网游同步技术:帧同步和状态同步说到这两个名词,大家夸夸奇谈,都能讲上些许自己的见解,我反正啥也不懂这篇文章就打算着重学习一下这两种技术的基础和原理网络同步的目标就是时刻保证多台机器的游戏表现完全一致。网络同步 = 实时的多端数据同步+实时的多端表现同步战斗逻辑是包括技能逻辑、普攻、属性、伤害、移动、AI、检测、碰撞等等的一系列内容,这常常也被视为游戏开发过程中最难的部分。网络同步按大类来分有两种做法:状态同步和帧同步。_帧同步如何保证客户端同步

酱茄Free开源版WordPress小程序新增文章置顶功能 并提供源码下载_酱茄free小程序源码-程序员宅基地

文章浏览阅读323次。酱茄开源版WordPress小程序又迎来了一次小更新,这个版本主要新增文章置顶功能,并修复首页列表文章显示问题。2020.9. 29 V1.2.01、新增文章置顶功能;2、修复首页列表文章显示问题;3、其他已知细节。WordPress小程序源码下载:www.jiangqie.com/ky安装文档:www.jiangqie.com/docs..._酱茄free小程序源码

python读取yaml格式配置文件_python 获取yaml数据库配置文件-程序员宅基地

文章浏览阅读449次。yaml文件内容:LOGIN: url: "http://xxx:8080/login/" data: {"username":"jike2021","password":get_md5("12345qwert")} user: tester: 'jike' age: 18 bl: 'true' f: 1.2 l: [1,2,3,4,'a']读取配置文件代码:import yamlclass Handler_Yaml():_python 获取yaml数据库配置文件

wepy/mpvue/taro/uni-app,小程序开发框架哪家强?-程序员宅基地

文章浏览阅读644次。微信小程序如火如荼,各家小程序快速跟进,继App、H5之后,小程序平台已跃升为第三大流量平台,那现阶段快速开发小程序的更优方案是什么?选择原生开发,还是借助跨端框架?每个框架又有何差异?本文经授权转载,如下为原文,enjoy!之前 Taro 团队发布了一篇《小程序多端框架全面测评》,让开发者对业界主流的跨端框架,有了初步认识。感谢 Taro 团队的付出。不过横评这件事,要想得到更精确的结..._weui和uniapp相比

使用sudo apt-get update报错:E: 无法下载 http://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/dists/xenial/main/b_sudo apt-get update无法下载-程序员宅基地

文章浏览阅读1.4w次,点赞17次,收藏84次。E: 无法下载 http://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/dists/xenial/main/binary-amd64/Packages 404 Not Found [IP: 101.6.15.130 80]E: 部分索引文件下载失败。如果忽略它们,那将转而使用旧的索引文件。原因分析:源的问题,更换源先备份源文件修改源文件将内容替换成保存即可,重新运行sudo apt-get update本教程使用的是ubuntu18.04,其他版本清参_sudo apt-get update无法下载

【通过URL获取目标服务器信息介绍】_怎么从url中获取到ip地址-程序员宅基地

文章浏览阅读3.5k次。客户端再向顶级域DNS服务器发起查询请求,顶级域DNS服务器再返回二级域DNS服务器的IP地址。URL中的域名需要先经过域名解析,将其转换为对应的IP地址。获取到目标服务器的IP地址后,需要进行端口扫描,以获取目标服务器开放的端口号。例如,根据URL获取目标服务器的IP地址和端口号后,可以将其添加到防火墙的白名单中,限制对该服务器的访问。通过获取目标服务器的IP地址和端口号,可以与目标服务器建立网络连接并进行相应的网络操作。最终,客户端与负责域名解析的DNS服务器进行通信,获取到目标服务器的IP地址。_怎么从url中获取到ip地址

推荐文章

热门文章

相关标签