ES6 Map与Set

Posted 2021-03-15 jnba

ES6 Map与Set

1、map

<script type="text/javascript">
  //ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
  const m = new Map();//创建Map
  const o = {p: ‘Hello World‘};
  m.set(o, ‘content‘)//对象也可以作为键
  m.get(o) // "content"
  m.has(o) // true
  m.delete(o) // true
  m.has(o) // false
  const m1 = new Map([
      [‘name‘, ‘张三‘],
      [‘title‘, ‘Author‘]
  ]);//Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
  m1.size // 2
  m1.has(‘name‘) // true
  m1.get(‘name‘) // "张三"
  m1.has(‘title‘) // true
  m1.get(‘title‘) // "Author"

    //常用方法
  const m2 = new Map([[‘foo‘,true],[‘bar‘, false]]);
  m2.size; // 获取大小
  m2.set(‘dwd‘,true); //设置键值对
  m2.get(‘dwd‘);//获取键的值
  m2.has(‘dwd‘);//判断是否有键
  m2.delete(‘dwd‘);//删除键
  m2.clear();//清空

    //遍历
  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: %s, Value: %s", key, value);
  });

  //与其他数据结构的互相转换
  //1、map转数组
  const myMap = new Map()
      .set(true, 7)
      .set({foo: 3}, [‘abc‘]);
  [...myMap]
  // [ [ true, 7 ], [ { foo: 3 }, [ ‘abc‘ ] ] ]

  //2、数组转map
  new Map([
      [true, 7],
      [{foo: 3}, [‘abc‘]]
  ])
  // Map {
  //   true => 7,
  //   Object {foo: 3} => [‘abc‘]
  // }
  //3、Map 转为 JSON
  //一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。
  function strMapToJson(strMap) {
      return JSON.stringify(strMapToObj(strMap));
  }

  let myMap = new Map().set(‘yes‘, true).set(‘no‘, false);
  strMapToJson(myMap)
  // ‘{"yes":true,"no":false}‘
  //另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。
  function mapToArrayJson(map) {
      return JSON.stringify([...map]);
  }

  let myMap = new Map().set(true, 7).set({foo: 3}, [‘abc‘]);
  mapToArrayJson(myMap)
  // ‘[[true,7],[{"foo":3},["abc"]]]‘

    //4、JSON 转为 Map
    //JSON 转为 Map，正常情况下，所有键名都是字符串。
  function jsonToStrMap(jsonStr) {
      return objToStrMap(JSON.parse(jsonStr));
  }

  jsonToStrMap(‘{"yes": true, "no": false}‘)
  // Map {‘yes‘ => true, ‘no‘ => false}

    //但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。
  // 这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。
  function jsonToMap(jsonStr) {
      return new Map(JSON.parse(jsonStr));
  }

  jsonToMap(‘[[true,7],[{"foo":3},["abc"]]]‘)
  // Map {true => 7, Object {foo: 3} => [‘abc‘]}
</script>

 

2、set

<script type="text/javascript">
   //Set 数据结构的使用
   //ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
   const s1 = new Set([1, 2, 3, 4, 4]);
   console.log(s1);
   const s2 = new Set([1, 2, 3, 4, 5, 5, 5, 5]);//不会重复，可用于数组去重
   console.log(s2.size) ;// 5
   let s3 = Array.from(new Set(‘abbccddeeee‘)).join(‘ ‘);//去重字符串
   console.log(s3); //a b c d e

    //常用方法
    let s4 = new Set();
    s4.add(1);//添加某个值，返回 Set 结构本身
    s4.size;//返回Set实例的成员总数
    s4.has(1);//返回一个布尔值，表示该值是否为Set的成员
    s4.delete(1);//删除某个值，返回一个布尔值，表示删除是否成功。
    s4.clear();//清除所有成员，没有返回值。

    //遍历
   let s5 = new Set([‘red‘, ‘green‘, ‘blue‘]);
   for (let item of s5.keys()) {
       console.log(item);
   }
   // red
   // green
   // blue

   for (let item of s5.values()) {
       console.log(item);
   }
   // red
   // green
   // blue

   for (let item of s5.entries()) {
       console.log(item);
   }
   // ["red", "red"]
   // ["green", "green"]
   // ["blue", "blue"]

   s5.forEach((value, key) => console.log(key + ‘ : ‘ + value))//也可以forEach遍历

    //set转换数组
   let array = Array.from(s5).join(‘ ‘);
   console.log(array)


</script>