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

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

但是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需要一个二维数组,或者直接初始化一个空MapMap具有以下方法:

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   (值)

SetMap类似,也是一组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}
注:MapSet是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. 运算符优先级 (JavaScript)

    运算符优先级描述了在计算表达式时执行运算的顺序.先执行具有较高优先级的运算,然后执行较低优先级的运算.例如,先执行相乘,再执行相加. JavaScript 运算符     下表列出了 JavaScri ...

  2. 关于苹果出现NaN的情况----由Date格式解析方式不同引起的Bug

    源于一个工作中遇到的问题:IOS 上时间显示为 NaN,而安卓上时间显示正常. 问题的根源在于 安卓 和 苹果 对于 JS Date 对象的不同解析. 安卓: new Date("2018- ...

  3. Linux--5 mariadb和redis的安装

    一.MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL ...

  4. C. Destroying Array 并查集,逆向思维

    用并查集维护线段,从后往前枚举没个删除的位置id[i] 那么,现在删除了这个,就是没有了的,但是上一个id[i + 1]就是还没删除的. 然后现在进行合并 int left = id[i + 1];( ...

  5. 牛客网Java刷题知识点之全局变量(又称成员变量,分为类变量和实例变量)、局部变量、静态变量(又称为类变量)

    不多说,直接上干货! 定义类其实就是在定义类中的成员.成员:成员变量<-->属性,成员函数<-->行为. 局部变量在方法内部声明,并且只能在方法内部使用,在外层的方法被调用时被 ...

  6. ruby firefox23报错:waiting for evaluate.js load failed

    解决方法 gem install selenium-webdriver -v='2.34.0'

  7. 使用URLRewriter实现URL重写

    优点 1)隐藏真实URL,提高安全性 2)更加友好的URL,好记(看博客园就行知道啦) 3)便于搜素引擎收录 ......... 可能的缺点 使用URL重写可能导致: 1)图片路径的问题 2)CSS路 ...

  8. File 元素 都有files属性

    File 元素 都有files属性 必须有 name 才能传到后台 Html data-* 存储string 值 Jquery data() 可以存储对象 ,但是执行后页面看不到,可以取到     P ...

  9. 命名空间namespace、smarty使用(视图分离,MVC)、smarty模板语法、smarty缓存、MVC模式

    一.命名空间:namespace 命名空间 可以理解为逻辑上的使用,为了防止重名 namespace :关键字 加载:require_once();//加载一次 include_once() 申明命名 ...

  10. Django组件:用户认证组件

    一丶用户认证 1.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: (1).authent ...