page contents

WEB前端教程:两个新的数据结构:Map&Set

这一章介绍由 key 值标记的数据容器:Map 和 Set ,掌握它们的创建,遍历,以及应用场景。

attachments-2022-10-IjjpIwou635b44eb6e4f6.png课程目标

这一章介绍由 key 值标记的数据容器:Map 和 Set ,掌握它们的创建,遍历,以及应用场景。

 阅读

Map 是一个带键的数据项的集合,就像一个 Object 一样。 但是它们最大的差别是 Map 允许任何类型的键(key)。Set 是一个特殊的类型集合 —— “值的集合”(没有键),它的每一个值只能出现一次。

请阅读下面材料学习这两位 ES6 新加入的数据结构,体会它们的好处

 编码

学习 Set/Map 的读取、遍历方式,并在 util.js 中实现以下方法:

//使用 Set 去除数组的重复
function dedupe(array) {
  // your complement
}

//利用 Set 实现并集(Union)
function union(arr1, arr2) {
  // your complement
}
//利用 Set 实现交集(Union)
function intersect(arr1, arr2) {
  // your complement
}
//利用 Set 实现差集(Union)
function difference(arr1, arr2) {
  // your complement
}

//测试用例
console.log(dedupe([1, 1, 2, 3])); // [1, 2, 3]
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
console.log(union(a, b)); // -> Set {1, 2, 3, 4}
console.log(intersect(a, b)); // -> Set {2, 3}
console.log(difference(a, b)); // ->  Set {1}
// 封装一个函数实现 Map 转为 数组
function strMapToArray(map) {
  // your compement
}

// 封装一个函数实现 数组 转为 Map
function arrayTostrMap(arr) {
  // your compement
}

// 封装一个函数实现 Map 转为 对象
function strMapToObj(strMap) {
  // your compement
}
// 封装一个函数实现 对象转为 Map
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

// 封装一个函数实现 Map 转为 JSON
function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

// 封装一个函数实现 JSON 转为 Map
function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

//测试用例一
let arr = [
  [true, 7],
  [{ foo: 3 }, ["abc"]],
];
arrayTostrMap(arr); // -> Map {true => 7,Object {foo: 3} => ['abc']}

//测试用例二
const myMap = new Map().set("yes", true).set("no", false);
strMapToObj(myMap); // -> { yes: true, no: false }

//测试用例三

objToStrMap({ yes: true, no: false }); // -> Map {"yes" => true, "no" => false}

//测试用例四
let myMap = new Map().set("yes", true).set("no", false);
strMapToJson(myMap); // -> '{"yes":true,"no":false}'

//测试用例五
jsonToStrMap('{"yes": true, "no": false}'); //-> Map {'yes' => true, 'no' => false}

//测试用例六
const myMap = new Map().set(true, 7).set({ foo: 3 }, ["abc"]);

strMapToArray(myMap); //-> [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

 编码二

参考 示例图 (opens new window)利于 Map 数据结构,实现一个书籍图书馆程序(Book Library)

需求说明

  • 书籍图书馆可以实现书籍的添加删除,以及书籍阅读状态的切换
  • 书籍的信息包括书名,作者,页数,是否阅读,这次为了学习 Map 知识,请使用 Map 数据结构存储书籍对象信息。
  • 还可以根据页面对书籍顺序进行从小大小排序
  • 书籍状态若为已读,对应 Css 背景样式变为 #80808059,若为未读,背景颜色为 #12bbc1a2
  • 具体功能,参考功能说明图(opens new window)

 自测问题

  1. map 与 object 的区别?说说分别的应用场景是什么?
  2. 数组 和 set 区别?
  3. 下面这段代码输出结果是什么?
const map = new Map();

map.set(1, "aaa").set(1, "bbb");

console.log(map.get(1));
  1. weakSet/set,map,weakMap 有什么区别?


更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等

attachments-2022-10-O1IJ19dI635b4497e6238.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1678 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1678 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章