0
点赞
收藏
分享

微信扫一扫

【JS】130-重温基础:Map和Set对象

舍予兄 2022-11-29 阅读 207

【JS】130-重温基础:Map和Set对象_数组

本文是 重温基础 系列文章的第十一篇。
今日感受:注意身体,生病花钱又难受。

本章节复习的是JS中的Map和Set对象,是个集合。

前置知识:
Map和Set对象是在ES6中被引入的,作为一种由 ​​key​​值标记的数据容器。
Map和Set对象承载的数据元素可以按照插入时的顺序,被迭代遍历。

1 Set对象

介绍:
​​Set​数据结构类似数组,但所有成员的值唯一
​​Set​​本身为一个构造函数,用来生成 ​Set​​数据结构,使用 ​add​方法来添加新成员。

  1. ​let a = new Set();​
  2. ​[1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));​
  3. ​for(let k of a){​
  4. ​    console.log(k)​
  5. ​};​
  6. ​// 1 2 3 4 5​

基础使用

  1. ​let a = new Set([1,2,3,3,4]);​
  2. ​[...a]; // [1,2,3,4]​
  3. ​a.size; // 4​

  4. ​// 数组去重​
  5. ​[...new Set([1,2,3,4,4,4])];// [1,2,3,4]​

注意

  • 向 ​Set​​中添加值的时候,不会类型转换,即 ​5​和 ​'5'​是不同的。
  1. ​[...new Set([5,'5'])]; // [5, "5"]​

属性和方法


  • 属性:
  • Set.prototype.constructor​​:构造函数,默认就是 ​Set​函数。
  • Set.prototype.size​​:返回 ​Set​实例的成员总数。

  • 操作方法:




  • add(value)​:添加某个值,返回 Set 结构本身。

  • delete(value)​:删除某个值,返回一个布尔值,表示删除是否成功。

  • has(value)​:返回一个布尔值,表示该值是否为Set的成员。

  • clear()​:清除所有成员,没有返回值。

  1. ​let a = new Set();​
  2. ​a.add(1).add(2); // a => Set(2) {1, 2}​
  3. ​a.has(2);        // true​
  4. ​a.has(3);        // false​
  5. ​a.delete(2);     // true  a => Set(1) {1}​
  6. ​a.clear();       // a => Set(0) {}​

数组去重

  1. ​let a = new Set([1,2,3,3,3,3]);​

2 Set的应用

数组去重

  1. ​// 方法1​
  2. ​[...new Set([1,2,3,4,4,4])]; // [1,2,3,4]​
  3. ​// 方法2​
  4. ​Array.from(new Set([1,2,3,4,4,4]));    // [1,2,3,4]​

遍历和过滤

  1. ​let a = new Set([1,2,3,4]);​

  2. ​// map 遍历操作​
  3. ​let b = new Set([...a].map(x =>x*2));// b => Set(4) {2,4,6,8}​

  4. ​// filter 过滤操作​
  5. ​let c = new Set([...a].filter(x =>(x%2) == 0)); // b => Set(2) {2,4}​

获取并集、交集和差集

  1. ​let a = new Set([1,2,3]);​
  2. ​let b = new Set([4,3,2]);​

  3. ​// 并集​
  4. ​let c1 = new Set([...a, ...b]);  // Set {1,2,3,4}​

  5. ​// 交集​
  6. ​let c2 = new Set([...a].filter(x => b.has(x))); // set {2,3}​

  7. ​// 差集​
  8. ​let c3 = new Set([...a].filter(x => !b.has(x))); // set {1}​
  • 遍历方法:
  • keys()​:返回键名的遍历器。
  • values()​:返回键值的遍历器。
  • entries()​:返回键值对的遍历器。
  • forEach()​:使用回调函数遍历每个成员

Set​遍历顺序是插入顺序,当保存多个回调函数,只需按照顺序调用。但由于 ​Set​结构没有键名只有键值,所以 ​keys()​​和 ​values()​是返回结果相同。

  1. ​let a = new Set(['a','b','c']);​
  2. ​for(let i of a.keys()){console.log(i)};   // 'a' 'b' 'c'​
  3. ​for(let i of a.values()){console.log(i)}; // 'a' 'b' 'c'​
  4. ​for(let i of a.entries()){console.log(i)}; ​
  5. ​// ['a','a'] ['b','b'] ['c','c']​

并且 还可以使用 ​for...of​​直接遍历 ​Set​。

  1. ​let a = new Set(['a','b','c']);​
  2. ​for(let k of a){console.log(k)};   // 'a' 'b' 'c'​

forEach​与数组相同,对每个成员执行操作,且无返回值。

  1. ​let a = new Set(['a','b','c']);​
  2. ​a.forEach((v,k) => console.log(k + ' : ' + v));​

3 Map对象

由于传统的 ​JavaScript​​对象只能用字符串当做键,给开发带来很大限制,ES6增加 ​Map​数据结构,使得各种类型的值(包括对象)都可以作为键。
​​Map​结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。 基础使用

  1. ​let a = new Map();​
  2. ​let b = {name: 'leo' };​
  3. ​a.set(b,'my name'); // 添加值​
  4. ​a.get(b);           // 获取值​
  5. ​a.size;      // 获取总数​
  6. ​a.has(b);    // 查询是否存在​
  7. ​a.delete(b); // 删除一个值​
  8. ​a.clear();   // 清空所有成员 无返回​

注意

  • 传入数组作为参数,指定键值对的数组
  1. ​let a = new Map([​
  2. ​    ['name','leo'],​
  3. ​    ['age',18]​
  4. ​])​
  • 如果对同一个键多次赋值,后面的值将覆盖前面的值
  1. ​let a = new Map();​
  2. ​a.set(1,'aaa').set(1,'bbb');​
  3. ​a.get(1); // 'bbb'​
  • 如果读取一个未知的键,则返回 ​undefined​。
  1. ​new Map().get('abcdef'); // undefined​
  • 同样的值的两个实例,在 Map 结构中被视为两个键。
  1. ​let a = new Map();​
  2. ​let a1 = ['aaa'];​
  3. ​let a2 = ['aaa'];​
  4. ​a.set(a1,111).set(a2,222);​
  5. ​a.get(a1); // 111​
  6. ​a.get(a2); // 222​

遍历方法: Map 的遍历顺序就是插入顺序。

  • keys()​:返回键名的遍历器。
  • values()​:返回键值的遍历器。
  • entries()​:返回所有成员的遍历器。
  • forEach()​:遍历 Map 的所有成员。
  1. ​let a = new Map([​
  2. ​    ['name','leo'],​
  3. ​    ['age',18]​
  4. ​])​

  5. ​for (let i of a.keys()){...};​
  6. ​for (let i of a.values()){...};​
  7. ​for (let i of a.entries()){...};​
  8. ​a.forEach((v,k,m)=>{​
  9. ​    console.log(`key:${k},value:${v},map:${m}`)​
  10. ​})​

将Map结构转成数组结构

  1. ​let a = new Map([​
  2. ​    ['name','leo'],​
  3. ​    ['age',18]​
  4. ​])​

  5. ​let a1 = [...a.keys()];   // a1 => ["name", "age"]​
  6. ​let a2 = [...a.values()]; // a2 =>  ["leo", 18]​
  7. ​let a3 = [...a.entries()];// a3 => [['name','leo'], ['age',18]]​

4 Map与其他数据结构互相转换

  • Map 转 数组
  1. ​let a = new Map().set(true,1).set({f:2},['abc']);​
  2. ​[...a]; // [[true:1], [ {f:2},['abc'] ]]​
  • 数组 转 Map
  1. ​let a = [ ['name','leo'], [1, 'hi' ]]​
  2. ​let b = new Map(a);​
  • Map 转 对象 如果所有 Map 的键都是字符串,它可以无损地转为对象。
    如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
  1. ​function fun(s) {​
  2. ​  let obj = Object.create(null);​
  3. ​  for (let [k,v] of s) {​
  4. ​    obj[k] = v;​
  5. ​  }​
  6. ​  return obj;​
  7. ​}​

  8. ​const a = new Map().set('yes', true).set('no', false);​
  9. ​fun(a)​
  10. ​// { yes: true, no: false }​
  • 对象 转 Map
  1. ​function fun(obj) {​
  2. ​  let a = new Map();​
  3. ​  for (let k of Object.keys(obj)) {​
  4. ​    a.set(k, obj[k]);​
  5. ​  }​
  6. ​  return a;​
  7. ​}​

  8. ​fun({yes: true, no: false})​
  9. ​// Map {"yes" => true, "no" => false}​
  • Map 转 JSON
    (1)Map键名都是字符串,转为对象JSON:
  1. ​function fun (s) {​
  2. ​    let obj = Object.create(null);​
  3. ​    for (let [k,v] of s) {​
  4. ​        obj[k] = v;​
  5. ​    }​
  6. ​    return JSON.stringify(obj)​
  7. ​}​
  8. ​let a = new Map().set('yes', true).set('no', false);​
  9. ​fun(a);​
  10. ​// '{"yes":true,"no":false}'​

(2)Map键名有非字符串,转为数组JSON:

  1. ​function fun (map) {​
  2. ​  return JSON.stringify([...map]);​
  3. ​}​

  4. ​let a = new Map().set(true, 7).set({foo: 3}, ['abc']);​
  5. ​fun(a)​
  6. ​// '[[true,7],[{"foo":3},["abc"]]]'​
  • JSON 转 Map
    (1)所有键名都是字符串:
  1. ​function fun (s) {​
  2. ​  let strMap = new Map();​
  3. ​  for (let k of Object.keys(s)) {​
  4. ​    strMap.set(k, s[k]);​
  5. ​  }​
  6. ​  return strMap;​
  7. ​  return JSON.parse(strMap);​
  8. ​}​
  9. ​fun('{"yes": true, "no": false}')​
  10. ​// Map {'yes' => true, 'no' => false}​

(2)整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组:

  1. ​function fun2(s) {​
  2. ​  return new Map(JSON.parse(s));​
  3. ​}​
  4. ​fun2('[[true,7],[{"foo":3},["abc"]]]')​
  5. ​// Map {true => 7, Object {foo: 3} => ['abc']}​

参考资料

1.阮一峰ES6入门

【JS】130-重温基础:Map和Set对象_字符串_02



举报

相关推荐

0 条评论