1. Map

初始化 Map。

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);var m = new Map(); // 空Map

Map 具有以下方法:

m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值覆盖掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

2.Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

数字3和字符串'3'是不同的元素

通过add(key)方法可以添加元素到Set中:

s.add(4);
s; // Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素：

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

3. Iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

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) { // 遍历Arrayconsole.log(x);
}
for (var x of s) { // 遍历Setconsole.log(x);
}
for (var x of m) { // 遍历Mapconsole.log(x[0] + '=' + x[1]);
}

for ... in 与 for ... of 的区别：

for ... in 遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {console.log(x); // '0', '1', '2', 'name'
}

可以看到，手动添加的 name 属性也被 for ... in 给捕捉，而 Array 自带的 length 属性则不会被遍历到。

for ... of循环只循环集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {console.log(x); // 'A', 'B', 'C'
}

更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {// element: 指向当前元素的值// index: 指向当前索引// array: 指向Array对象本身console.log(element + ', index = ' + index);console.log(array);   //
});
/* outputA, index = 0A,B,CB, index = 1A,B,CC, index = 2A,B,C
*/

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {console.log(element);
});

Map的回调函数参数依次为value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {console.log(value);
});

摘自：https://www.liaoxuefeng.com/wiki/1022910821149312/1023024358748480

JS 中的 Map,Set 和 iterable相关推荐

js中数组map方法的使用和实现
js中数组map方法的使用和实现 MDN中定义 map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值. 语法 var new_array = arr.map(fun ...
vue前端弹出新增页面testAdd，弹出页面中进行数据编辑，table编辑，行编辑等。包含JS中使用Map进行数据处理。
使用vue写的新增页面,编辑页面等弹出页面,在页面中进行table数据的行编辑,利用JS中的Map做的实时响应的行编辑数据内容汇总计算.校验等.话不多说,上代码: require(['vue', 'z ...
jquery中的map()方法与js中的map()方法
1.jquery中的map()方法首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
Node.js 中 source map 使用问题总结
起源 Node 应用功能越来越复杂,很多业务都开始尝试使用 TypeScript 来开发.现在前端写的 JS 大部分是经过编译过程的,浏览器中通过 source map 的使用,可以很好的解决源码和编 ...
JS中的Map和Set实现映射对象
使用iterable内置的forEach方法 var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) {// eleme ...
一分钟掌握js中的map方法
目录 map是什么 map方法的结构及入参语法糖 map一般不改变原数组 map是什么 map是操作js数组的方法,也可以说是一个函数,作用是遍历整个数组,对里面的每个值做处理再返回一个新的值. 注 ...
JS中的map函数(会改变不是基本类型的数组的值)
1.数组的值是基本类型时,map不会改变原有数据 2.数组的值是引用类型时(对象),map会修改数组的值
js html utf8编码转换,js中的UTF-8编码与解码
讲解之前我们先了解一些基本概念,什么是字符集?字符集就像一张表,这个表里面有很多的符号,每个符号都可以通过下标(这个符号在表的中的序号)对应到,有点类似js中的map,例如97这个下标代表的就是符号a ...
JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
JS中集合对象(Array.Map.Set)及类数组对象的使用与对比在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...

JS 中的 Map,Set 和 iterable

文章目录

1. Map

2.Set

3. Iterable

JS 中的 Map,Set 和 iterable相关推荐

最新文章

热门文章