Map 数据结构

一、概念

Set 是一种叫【字典(是一些元素的集合,以 [ 键,值 ] 的形式储存)】的数据结构。

二、
1、属性和操作方法
  • size 返回 Map 的元素的个数。
  • set() 增加一个新元素,返回当前的 Map。
  • get() 返回键名对象的键值。
  • delete() 删除某个元素的键名,返回 Boolean 值。
  • has() 检测 Map 中是否包含某个元素,返回 Boolean 值。
  • clear() 清空集合,返回undefined 。
TypeScript 复制代码
const map = new Map();
map.set("foo", "aaaaa"); // {"foo" => 'aaaaa'}
map.set("bar", "bbbbb"); // {"foo" => 'aaaaa'}

map.size; // 2
map.get("foo"); // aaaaa
map.has("foo"); // true
map.delete("bar"); // true
map.clear() // 数据清空  undefined
2、遍历
  • keys() 返回键名。

  • values() 返回键值。

  • entries() 返回所有成员。

  • forEach() 遍历 Map 所有成员。

TypeScript 复制代码
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"


map.forEach(function(value, key, map) {
 console.log( key, value);
});

 // "F" "no"
 // "T" "yes"
3、与其他数据结构的相互转换
(1)、Map 转为数组

使用运算扩展符 【...】

TypeScript 复制代码
const myMap = new Map().set(true, 7).set({ foo: 3 }, ["abc"]);

console.log([...myMap]);

// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
(2)、 数组转为 Map
TypeScript 复制代码
const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
console.log(map)
//  {1 => 'one', 2 => 'two', 3 => 'three'}
(3)、Map 转为对象
TypeScript 复制代码
const strMapToObj = (strMap) => {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  console.log(obj); //  { yes: true, no: false }
  return obj;
};

const myMap = new Map().set("yes", true).set("no", false);
strMapToObj(myMap);
(4)、对象转为 Map
TypeScript 复制代码
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

console.log(map) //  {'a' => 1, 'b' => 2}
 
相关推荐
过期的H2O218 小时前
【H2O2|全栈】JS进阶知识(七)ES6(3)
开发语言·javascript·es6
Fly_hao.belief2 天前
ES6 模块化语法
前端·ecmascript·es6
SofterICer3 天前
ES6 (MNO-eUICC) 接口中 OTA 平台通信概述
前端·网络·es6
不爱说话郭德纲4 天前
理解 Object.create 并正确使用 Object.create
前端·javascript·vue.js·es6·html5
羊小猪~~4 天前
前端入门一之ES6--递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set
开发语言·前端·javascript·css·正则表达式·html·es6
web Rookie5 天前
ES6 Set和Map数据结构用法详解
javascript·数据结构·es6
Moon里5 天前
【JS】ES6
前端·javascript·es6
lvbb667 天前
ES6更新的内容中什么是proxy
前端·ecmascript·es6
谈谈叭7 天前
Vue3中一级导航栏的吸顶导航交互以及Pinia优化重复请求
javascript·vue.js·es6·交互
前端郭德纲7 天前
ES6的Iterator 和 for...of 循环
前端·ecmascript·es6