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

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

课程目标

这一章介绍由 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)

自测问题

map 与 object 的区别？说说分别的应用场景是什么？
数组和 set 区别？
下面这段代码输出结果是什么？

const map = new Map();

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

console.log(map.get(1));

weakSet/set,map,weakMap 有什么区别？

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

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

发表于 2022-10-28 10:56
阅读 ( 480 )
分类：WEB前端开发

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

课程目标

阅读

编码

编码二

自测问题

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »