ES6中map和set用法

--转载自廖雪峰的官方网站

一、map

Map是一组键值对的结构,具有极快的查找速度。

举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

或者通过object键值对的方式来实现存储和查找:
var names = Object.create({'Michael':95,'Bob':75,'Tracy':85});
但是如果这个表十分庞大的时候,查询速度也是很感人的。

所以ES6提供了map方法来提高查询的速度,如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢

var m=new Map();
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
console.log(m);//Map { 'Adam' => 67, 'Bob' => 59 }
console.log(m.has('Adam')); // 是否存在key 'Adam': true
console.log(m.get('Adam')); // 67
console.log(m.delete('Adam')); // 删除key 'Adam':true
console.log(m.get('Adam')); // undefined

ES6中Map相对于Object对象有几个区别:

  1. Object对象有原型, 也就是说他有默认的key值在对象上面, 除非我们使用Object.create(null)创建一个没有原型的对象;

  2. 在Object对象中, 只能把String和Symbol作为key值, 但是在Map中,key值可以是任何基本类型(String, Number, Boolean, undefined, NaN….),或者对象(Map, Set, Object, Function , Symbol , null….);

  3. 通过Map中的size属性, 可以很方便地获取到Map长度, 要获取Object的长度, 你只能用别的方法了;
      Map实例对象的key值可以为一个数组或者一个对象,或者一个函数,比较随意 ,而且Map对象实例中数据的排序是根据用户push的顺序进行排序的, 而Object实例中key,value的顺序就是有些规律了, (他们会先排数字开头的key值,然后才是字符串开头的key值);

二、set

Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

要创建一个Set,需要提供一个Array作为输入:

var arr=[1,2,3,3,'3'];
var s1=new Set(arr);
console.log(s1);//Set { 1, 2, 3, '3' }
s1.add(4);//重复添加无用
console.log(s1);//Set { 1, 2, 3, '3', 4 }
s1.delete(4);
console.log(s1);//Set { 1, 2, 3, '3' }

感觉set的用法可以有两个地方

  1. 因为key不能重复,所以可以用来去掉array中的重复元素。

    'use strict';
    // var set = new Set([1,2,1,2,2,1]);
    var arr = [1,2,1,2,2,1];
    //new Set 数组去重
    function unique(arr){
    return Array.from(new Set(arr));
    };
    //使用ES6的方法可以去重.
    console.log(unique(arr));

  2. 可以用来统计键(这个暂时还没想到应用场景)

小结

Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

ES6中map和set用法的更多相关文章

  1. ES6中Map数据结构学习笔记

    很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...

  2. [转] C++ STL中map.erase(it++)用法原理解析

    总结一下map::erase的正确用法. 首先看一下在循环中使用vector::erase时我习惯的用法: for(vector<int>::iterator it = vecInt.be ...

  3. ES6中map数据结构学习

    在项目中遇到一个很恶心的需求,然后发现ES6中的map可以解决,所以简单学习了一下map. Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是“字符串-值”对,属性只 ...

  4. ES6中Arguments和Parameters用法解析

    原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...

  5. C++中map的介绍用法以及Gym题目:Two Sequences

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字(key),每个关键字只能在map中出现一次,第二个可能称为该关键字的值(value))的数据 处理能力,由于这个特性,它完成有可能 ...

  6. python中map()函数的用法讲解

    map函数的原型是map(function, iterable, -),它的返回结果是一个列表. 参数function传的是一个函数名,可以是python内置的,也可以是自定义的. 参数iterabl ...

  7. ES6中Map与其他数据结构的互相转换

    最近在学习ES6的基础知识,整理了一下Map与其他数据结构相互转换的写法. Map转为数组的方法 let myMap = new Map([[true, 7], [{foo: 3}, ['abc']] ...

  8. Es6中Map对象和Set对象的介绍及应用

    map和set的方法,工作中有使用到,所以学习一下: Map 对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. var myMap = new Map(); myMa ...

  9. python中map函数的用法

    map函数类似一个生成器 具体用例如下: def add(x): a =[,,] b = map(add,[,,]) print( list(map(add,[,,])) ) print(b,type ...

随机推荐

  1. JAVA-6NIO之FileChannel

    Java NIO中的FileChannel是一个连接到文件的通道.可以通过文件通道读写文件. FileChannel无法设置为非阻塞模式,它总是运行在阻塞模式下. 打开FileChannel 在使用F ...

  2. js jq封装ajax方法

    json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"adm ...

  3. [C语言] 数据结构-预备知识动态内存分配

    动态内存分配 静态内存分配数组 int a[5]={1,2,3,4,5}  动态内存分配数组 int len=5; int *parr=(int *)malloc(sizeof(int) * len) ...

  4. java 全自动生成Excel之ExcelUtil篇(上一篇的升级版 [针对实体类对象的遍历赋值])

    看了上一篇随笔之后可以对本篇有更好的了解! 使用的poi的jar包依然是上一篇的poi-3.17.jar.... import pojo.UserPojo(上一篇里有,这里就不粘贴了!) 不废话了,直 ...

  5. 使用DOM创建xml文件

    使用DOM创建xml文件 创建xml的代码如下: public class CreateXML { public static void main(String[] args) { DocumentB ...

  6. 委托,匿名方法,lamda快速理解

    转载于用五分钟重温委托,匿名方法,Lambda,泛型委托,表达式树     这些对老一代的程序员都是老生常谈的东西,没什么新意,对新生代的程序员却充满着魅力.曾经新生代,好多都经过漫长的学习,理解,实 ...

  7. xamarin.Android 选择本地图片、拍摄图片、剪裁图片

    [Activity(Theme = "@style/MyStyleBottom")] public class SelectPicPopupWindow : Activity, I ...

  8. 记一次简单爬虫(豆瓣/dytt)

    磕磕绊绊学python一个月,这次到正则表达式终于能写点有趣的东西,在此作个记录: ————————————————————————————————————————————————— 1.爬取豆瓣电影 ...

  9. JS 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...

  10. react 中使用定时器 Timers(定时器)

    setTimeout,clearTmeout setInterval,clearInterval 在 class 中 class TimersDemo extends Component { cons ...