javascript中的Map和Set

简介: javascript中的Map和Set

Map类似于Object,但是和Object不同的地方是Map的key可以是任意值,常用的Map的api

  • new Map() 创建Map
  • map.set(key, value) 存储值
  • map.get(key) 取值
  • map.has(key) 判断key是否存在
  • map.delete(key) 删除key
  • map.clear() 清空
  • map.size 获取元素的数量

例如:

let map = new Map();
map.set('1', 'str1');   // a string key
map.set(1, 'num1');     // a numeric key
map.set(true, 'bool1'); // a boolean key
// remember the regular Object? it would convert keys to string
// Map keeps the type, so these two are different:
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'
alert( map.size ); // 3

迭代Map

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);
// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}
// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}
// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});

Map的定义,可以使用数组进行初始化

// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);
alert( map.get('1') ); // str1

可以使用对象进行初始化

let obj = {
  name: "John",
  age: 30
};
let map = new Map(Object.entries(obj));
alert( map.get('name') ); // John

可以使用Object.fromEntries将Map转换为Object

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);
let obj = Object.fromEntries(map.entries()); // make a plain object (*)
// done!
// obj = { banana: 1, orange: 2, meat: 4 }
alert(obj.orange); // 2

Set,没有key,没有重复的值,可以使用的api

  • new Set(iterable) 创建set
  • set.add(value) 添加值
  • set.delete(value) 删除值
  • set.has(value) 值是否存在
  • set.clear() 清空值
  • set.size 返回元素的个数
    示例:
let set = new Set();
let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };
// visits, some users come multiple times
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);
// set keeps only unique values
alert( set.size ); // 3
for (let user of set) {
  alert(user.name); // John (then Pete and Mary)
}

迭代set的方法

let set = new Set(["oranges", "apples", "bananas"]);
for (let value of set) alert(value);
// the same with forEach:
set.forEach((value, valueAgain, set) => {
  alert(value);
});
相关文章
|
9天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
19 3
|
25天前
|
存储 数据格式
Set和Map的应用场景
Set和Map的应用场景
|
28天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
21 7
|
2月前
|
存储 自然语言处理 C++
map和set的简单介绍
map和set的简单介绍
21 1
|
2月前
|
JavaScript 前端开发
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
19 1
|
1天前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
9天前
|
存储 搜索推荐 C++
【C++高阶(二)】熟悉STL中的map和set --了解KV模型和pair结构
【C++高阶(二)】熟悉STL中的map和set --了解KV模型和pair结构
|
19天前
|
存储 JavaScript 前端开发
JavaScript高级主题:JavaScript 中的 Map 和 Set 是什么?它们有什么区别?
JavaScript的ES6引入了Map和Set数据结构。Map用于存储键值对,适合通过键进行查找,而Set则存储唯一值,无键且不支持键查找。两者在性能上表现出色,尤其在频繁的写入删除操作中。选择使用哪个取决于具体应用场景:键值对需求选Map,独特值集合则选Set。
19 2
|
21天前
|
存储 C++ 容器
【C++初阶】STL详解(十)set、map、multiset、multimap的介绍及使用
【C++初阶】STL详解(十)set、map、multiset、multimap的介绍及使用
27 0
|
29天前
|
存储 JavaScript 前端开发
set和map的区别
set和map的区别
43 4