ES6 Map

最新推荐文章于 2024-08-16 14:43:16 发布

雾里看花叹朦胧

最新推荐文章于 2024-08-16 14:43:16 发布

阅读量856

点赞数

分类专栏： es6 文章标签： es6 map

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/78251783

版权

es6 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

const m = new 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

Map 的赋值方式：

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

const items = [
  ['name', '张三'],
  ['title', 'Author']
];

items.forEach(
  ([key, value]) => map.set(key, value)
);

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);

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

const map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"
map.get(2) //如果读取一个未知的键，则返回undefined。

另外，undefined和null也是两个不同的键

let map = new Map();

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

实例的属性和操作方法

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

（1）size属性

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

（2）set(key, value)

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

（3）get(key)

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

（4）has(key)

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

（5）delete(key)

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

（6）clear()

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

遍历方法

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

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。

需要特别注意的是，Map 的遍历顺序就是插入顺序。

结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。

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

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}