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}
 
相关推荐
吴声子夜歌2 小时前
Vue3——渲染函数
前端·vue.js·vue·es6
吴声子夜歌1 天前
Vue3——过度和动画效果
前端·vue.js·es6
吴声子夜歌3 天前
Vue3——表单元素绑定
前端·vue·es6
吴声子夜歌5 天前
Vue3——元素样式绑定
前端·javascript·vue.js·es6
程序员buddha6 天前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌6 天前
ES6——Module详解
前端·ecmascript·es6
吴声子夜歌6 天前
Vue3——条件判断指令
前端·es6
吴声子夜歌7 天前
ES6——对象的扩展详解
开发语言·javascript·es6
程序员buddha7 天前
ES6 迭代器与生成器
前端·javascript·es6
吴声子夜歌7 天前
ES6——Calss详解
javascript·es6·原型模式