博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6 Map数据结构
阅读量:6849 次
发布时间:2019-06-26

本文共 3569 字,大约阅读时间需要 11 分钟。

Map

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

const m = new Map();const o = {p:"hello world"};m.set(o,'content');console.log(m.get(o)); // contentconsole.log(m.has(o)); // trueconsole.log(m.delete(o)); // trueconsole.log(m.has(o)); // false

上面代码使用 Map 结构的set方法,将对象o当作m的一个键,然后又使用get方法读取这个键,接着使用delete方法删除了这个键。

上面的例子展示了如何向 Map 添加成员。作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map = new Map([['name','张三']]);console.log(map.size); // 1console.log(map.has('name')); // trueconsole.log(map.get('name')); // 张三

Map构造函数接受数组作为参数,实际上执行的是下面的算法。

const items = [  ['name', '张三'],  ['title', 'Author']];const map = new Map();items.forEach(  ([key, value]) => map.set(key, value));

如果对同一个键多次赋值,后面的值将覆盖前面的值。

const map = new Map();map.set(1, 'aaa').set(1, 'bbb');console.log(map.get(1)); // "bbb"

上面代码对键1连续赋值两次,后一次的值覆盖前一次的值。

如果读取一个未知的键,则返回undefined。

如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,比如0和-0就是一个键,布尔值true和字符串true则是两个不同的键。另外,undefined和null也是两个不同的键。虽然NaN不严格相等于自身,但 Map 将其视为同一个键。

let map = new Map();map.set(-0, 123);console.log(map.get(+0)) // 123map.set(true, 1);map.set('true', 2);console.log(map.get(true)) // 1map.set(undefined, 3);map.set(null, 4);console.log(map.get(undefined)) // 3map.set(NaN, 123);console.log(map.get(NaN)) // 123

实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。

(1)size 属性

size属性返回 Map 结构的成员总数。

const map = new Map();map.set('foo', true);map.set('bar', false);map.size // 2

(2)set(key, value)

set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

const m = new Map();m.set('edition', 6)        // 键是字符串m.set(262, 'standard')     // 键是数值m.set(undefined, 'nah')    // 键是 undefined

set方法返回的是当前的Map对象,因此可以采用链式写法。

let map = new Map()  .set(1, 'a')  .set(2, 'b')  .set(3, 'c');

(3)get(key)

get方法读取key对应的键值,如果找不到key,返回undefined

const m = new Map();const hello = function() {console.log('hello');};m.set(hello, 'Hello ES6!') // 键是函数m.get(hello)  // Hello ES6!

(4)has(key)

has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

const m = new Map();m.set('edition', 6);m.set(262, 'standard');m.set(undefined, 'nah');m.has('edition')     // truem.has('years')       // falsem.has(262)           // truem.has(undefined)     // true

(5)delete(key)

delete方法删除某个键,返回true。如果删除失败,返回false

const m = new Map();m.set(undefined, 'nah');m.has(undefined)     // truem.delete(undefined)m.has(undefined)       // false

(6)clear()

clear方法清除所有成员,没有返回值。

let map = new Map();map.set('foo', true);map.set('bar', false);map.size // 2map.clear()map.size // 0

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历 Map 的所有成员。
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 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。

const map = new Map([  [1, 'one'],  [2, 'two'],  [3, 'three'],]);[...map.keys()]// [1, 2, 3][...map.values()]// ['one', 'two', 'three'][...map.entries()]// [[1,'one'], [2, 'two'], [3, 'three']][...map]// [[1,'one'], [2, 'two'], [3, 'three']]

转载地址:http://xxrul.baihongyu.com/

你可能感兴趣的文章
[Windows Phone]AnimationHelper管理分散的Storyboard
查看>>
[产品设计]我对移动互联网产品的观点
查看>>
理解和上手Redux
查看>>
安装office2016 64位时提示64位与32位的office程序不兼容,在系统是64位的情况下,由于应用的需要,必须装64位的office,怎么办...
查看>>
6.1指针的概念?
查看>>
格林威治时间(时间戳)转换成标准时间
查看>>
OpenGL中各种坐标系的理解[转]
查看>>
iOS - 正则表达式判断邮箱、身份证..是否正确
查看>>
linux基础—课堂随笔04_文件查找和压缩
查看>>
RegExp(正则表达式)常用知识点小结
查看>>
iOS 上架
查看>>
网络编程之UDP编程
查看>>
Carthage使用
查看>>
dede栏目添加自定义字段方法
查看>>
跟着实例学习设计模式(9)-桥接模式bridge(结构型)
查看>>
Visual studio 2005 cannot break at breakpoint
查看>>
linux高级技巧:heartbeat+lvs(三)
查看>>
Swift新手教程系列5-函数+selector在swift中的使用方法
查看>>
留言版
查看>>
11.Vue安装Axios及使用
查看>>