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>

原文地址:https://www.cnblogs.com/jnba/p/12205188.html

时间: 2024-08-29 09:53:19

ES6 Map与Set的相关文章

es6 Map,Set 和 WeakMap,WeakSet

这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的.同时,在进行属性值添加与获取时有专门的get,set 方法. // Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true;

ES6 Map/WeakMap

JS的对象本身就是个键值结构,ES6为什么还需要加Map呢,它与普通的JS对象有何区别? 一.Map 1. Map构造器 先看Map的简单用法 // 字符串作为key, 和JS对象类似 var map = new Map() // set map.set('name', 'John') map.set('age', 29) // get map.get('name') // John map.get('age') // 29 这么对代码,看起来确实没有JS对象简洁 但Map的强大之处在于它的ke

六、es6 map

一.map的特点 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制. 为了解决这个问题,ES6 提供了 Map 数据结构.它类似于对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对象)都可以当作键.也就是说,Object 结构提供了"字符串-值"的对应,Map 结构提供了"值-值"的对应,是一种更完善的 Hash 结构实现.如果

es6 map数据类型,要比set还很多

首先它支持多数据存储,具有增删查功能 set()设置 get()获取; has()查找; delete('obj')删除指定:clear()全部删除 size长度 let json={ name:"websong",skili:"web" }; //设置-增加 var msp=new Map(); msp.set(json,'iam'); console.info(msp) msp.set('niubi','111') console.info(msp) //取值g

es6 map()和filter()详解【转】

原文地址:http://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6%b3%95/ map方法 map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item

es6 map结构

Map结构的实例有以下属性和操作方法. (1)size属性 size属性返回Map结构的成员总数. (2)set(key, value) set方法设置key所对应的键值,然后返回整个Map结构.如果key已经有值,则键值会被更新,否则就新生成该键. (3)get(key) get方法读取key对应的键值,如果找不到key,返回undefined. (4)has(key) has方法返回一个布尔值,表示某个键是否在Map数据结构中. (5)delete(key) delete方法删除某个键,返回

ES6 Map

1.Map Map为“键值对”的数据结构 const m = new Map(); 2.构造函数 作为构造函数,Map 也可以接受一个数组作为参数.该数组的成员是一个个表示键值对的数组. const map = new Map([ ['name', '张三'], ['title', 'Author'] ]); map.size // 2 map.has('name') // true map.get('name') // "张三" map.has('title') // true ma

每天一点点之javascript(ES6) - Map对象

1.语法 键/值对的集合. mapObj = new Map() 注:集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 2.属性下表列出了 Map 对象的属性和描述. 构造函数 指定创建映射的函数. Prototype - 原型 为映射返回对原型的引用. size  返回映射中的元素数. 3.方法 clear 从映射中移除所有元素. delete 从映射中移除指定的元素. forEach 对映射中的每个元素执行指定操作. get 返回映射中的指定元素. has 如果

ES6 Map遍历、filter()筛选对象

目录: -------- 1.map() -------- 2.filter(): ------------- 2.1.filter函数可以看成是一个过滤函数,返回符合条件的元素的数组 -------- 3.filter() 筛选符合条件项 -------- 4.filter() 数组去重 -------- 5.filter() 去掉空字符串.undefined.null -------- 6.filter() 筛选数组对象 ------------ 6.1.单个条件筛选:筛选出对象.a属性不等