两个新的数据结构：Map&Set

课程目标

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

阅读

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

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

• Map and Set（映射和集合） (opens new window)
• 带键的集合 - JavaScript | MDN (opens new window)
• 【译】Object 与 Map 的异同及使用场景 (opens new window)
• Set 和 Map 数据结构 - ECMAScript 6 入门 (opens new window)
• 史上最全 Set 和 Map 详解 (opens new window)
• Map 和 Set - 廖雪峰的官方网站 (opens new window)
• Map - JavaScript | MDN (opens new window)
• Set、WeakSet、Map 及 WeakMap · Issue #24 · sisterAn/blog (opens new window)
• ES6 — Map vs Object — What and when? (opens new window)

编码

学习 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));

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