本文摘要:http://www.liaoxuefeng.com/

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对。

但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题,最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范,请执行以下代码,如果浏览器报ReferenceError错误,那么你需要换一个支持ES6的浏览器:

'use strict';
var m = new Map();
var s = new Set();
alert('你的浏览器支持Map和Set!');

Map     (健——值)

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

举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

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

如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:

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

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set   (值)

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

要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤:

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字3和字符串'3'是不同的元素。

通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}

通过delete(key)方法可以删除元素:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
注:Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用

Map和Set -----JavaScript的更多相关文章

  1. _.each _.map _.filter javascript 语法

    1.forEach():没有返回值,只是针对每个元素调用func     简单来说,就是将数组中的每个值,依次进行遍历,执行功能函数     如果只需对数组元素进行操作,不需返回任何值时适用 var ...

  2. [Javascript] Creating an Immutable Object Graph with Immutable.js Map()

    Learn how to create an Immutable.Map() through plain Javascript object construction and also via arr ...

  3. JavaScript学习笔记(十)——高阶函数之map,reduce,filter,sort

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  4. JavaScript中Map和ForEach的区别

    译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...

  5. javascript source map 的使用

    之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意 ...

  6. JavaScript高阶函数map/reduce、filter和sort

    map() 举例说明,比如我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上. 由于map()方法定义在JavaScript的Array中,我们调用Arr ...

  7. JavaScript中的map方法

    假设有一个函数f(x)=x²;作用在一个数组[1,2,3,4,5,6,7,8,9],通常我们会用遍历的方法来实现. function f(x){ return x * x; } var arr = [ ...

  8. 廖雪峰教程笔记:js中map和reduce的用法

    举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的 ...

  9. Javascript之旅(一)

    Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是 ...

随机推荐

  1. Centos下搭建nginx反向代理

    上一节已经用编译的方式搭建好了一个nginx,链接在下面 https://www.toutiao.com/i6693130510777975300/ 然后这次我们把上次搭建好的nginx作为反向代理的 ...

  2. java 集合解析

    Set集合,放的元素不能重复,请问它的判断重不重复是怎么实现的? 比如说:ArrayList 和 Vector 是用数组的方式存储的Set里的 hashSet 和TreeSet是用什么方式存储的?怎么 ...

  3. ES6工作中常用知识点

    好久不动笔了 第一个知识点:import 和 export import导入模块.export导出模块 //全部导入 import people from './example' //有一种特殊情况, ...

  4. Django-- CRM1客户建表与装饰器

    一.CRM项目(1) 引入三个表:用户表,客户表,校区表,班级表,梳理逻辑关系并迁移数据库,生成表. 使用admin插入数据,admin是Django提供的web形式的后台数据管理页面,它是和用户认证 ...

  5. python_魔法方法(四):属性访问

    通常可以通过点(.)操作符的形式去访问对象的属性,也可以通过BIF适当地去访问属性,看个例子吧 >>> class A(): def __init__(self): self.x = ...

  6. 红黑树(Red-Black Tree),B树,B-树,B+树,B*树

    (一)红黑树(Red-Black Tree) http://www.cnblogs.com/skywang12345/p/3245399.html#a1 它一种特殊的二叉查找树.红黑树的每个节点上都有 ...

  7. MapReduce的输出格式

    1. OutputFormat接口 OutputFormat为输出格式接口,主要用于描述输出数据的格式,它能将输出的键值对写入特定格式的文件中.输出格式的层次结构如下 2. 文本输出 Hadoop默认 ...

  8. 【Linux】linux下vi命令大全

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  9. IO缓冲流

    目录 IO缓冲流 缓冲流 基本原理 字节缓冲流 字符缓冲流 IO缓冲流 缓冲流也叫高效流,能够更高效的进行读取: 转换流:能够进行编码转换 序列化流:持久化存储对象 缓冲流 缓冲流--就是对应4个Fi ...

  10. IE6/IE7下只设置margin-left,左右都有边距问题

    CSS代码 div { border: 1px solid red; } .inner { width: 80px; height: 80px; float: left; position: rela ...