ES6 Map

最新推荐文章于 2024-08-16 14:43:16 发布
最新推荐文章于 2024-08-16 14:43:16 发布
阅读量1.2k 收藏 2
点赞数 4
CC 4.0 BY-SA版权
分类专栏： js基本知识 js es6 文章标签： ES6Map mapWeak Map与各数据类型的转换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dwb123456123456/article/details/84112330

1.含义和基本用法

 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 更合适。

下面是Map的簡單用法

{

let map = new Map();

let o = { zjl: 'zjl' }

console.log(map.set(o, 'content'));

console.log(map.has(o));

console.log(map.delete(0))

}

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

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

{

const map = new Map([

['name', '张三'],

['title', 'Author']

]);

console.log(map)

map.size // 2

map.has('name') // true

map.get('name') // "张三"

map.has('title') // true

map.get('title') // "Author"

}

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

{

const item = [['name', '张三'], ['title', 'Author']]

const map = new Map();

item.forEach(([key, value]) => { map.set(key, value) });

console.log(map)

}

事实上，不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。

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

{

const map = new Map();

map.set(1, 'zjl');

map.set(1, 'zmf');

console.log(map);

}

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

{

const map = new Map([[1, 'zjl']])

console.log(map.get('1'))

}

 注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

{

const map = new Map();

map.set(['a'], 555);

map.get(['a']) // undefined

}

 上面代码的set和get方法，表面是针对同一个键，但实际上这是两个值，内存地址是不一样的，因此get方法无法读取该键，返回undefined。

同理，同样的值的两个实例，在 Map 结构中被视为两个键。

{

const map = new Map();

const k1 = ['a'];

const k2 = ['a'];

map.set(k1, 111).set(k2, 222);

map.get(k1) // 111

map.get(k2) // 222

}

上面代码中，变量k1和k2的值是一样的，但是它们在 Map 结构中被视为两个键。

 由上可知，Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。

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

{

let map = new Map();

map.set(-0, 123);

map.get(+0) // 123



map.set(true, 1);

map.set('true', 2);

map.get(true) // 1



map.set(undefined, 3);

map.set(null, 4);

map.get(undefined) // 3



map.set(NaN, 123);

map.get(NaN) // 123

}

 2.实例的属性和操作方法

 屬性

 1）size 属性

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

{

const map = new Map();

map.set('foo', true);

map.set('bar', false);

console.log(map.size) // 2

}

2）set(key, value)

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

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

{

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

}

3）get(key)

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

 

4）has(key)

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

 

5）delete (key)

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

 

 6）clear()

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

{

let map = new Map([[1, 2], [2, 3]]);

console.log(map.clear())

}

上面的属性前面都有案例，就不一一举例了

 

 遍历方法

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

 keys() ：返回键名的遍历器。

 values() ：返回键值的遍历器。

 entries() ：返回所有成员的遍历器。

 forEach() ：遍历 Map 的所有成员。

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

{

let map = new Map([['one', 'zjl'], ['two', 'zmf']]);

for (let key of map.keys()) {

console.log(key)

};

for (let value of map.values()) {

console.log(value)

};

for (let item of map.entries()) {

console.log(item);

console.log(item[0], item[1])

};

for (let [key, value] of map.entries()) {

console.log(key, value)

};

// 上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。

map[Symbol.iterator] === map.entries //true

for (let item of map) { //等同于使用map.entries();

console.log(item)

}

}

 结合数组的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'}

}

 

 此外，Map 还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历。

{

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

map.forEach(function (value, key, map) {

console.log("Key: %s, Value: %s", key, value);

});

 forEach方法还可以接受第二个参数，用来绑定this。

const reporter = {

report: function (key, value) {

console.log("Key: %s, Value: %s", key, value);

}

};

map.forEach(function (value, key, map) {

this.report(key, value);

}, reporter);

// 上面代码中，forEach方法的回调函数的this，就指向reporter。

}


 

3.与其他数据结构的互相转换

 （1）Map 转为数组

 前面已经提过，Map 转为数组最方便的方法，就是使用扩展运算符（...）。

{

let map = new Map().set('zjl', 'dwb').set({ 'zjl': 'dwb' }, ['zmf']);

console.log(map);

console.log([...map])

}

（2）数组 转为 Map

 将数组传入 Map 构造函数，就可以转为 Map。

{

let map = new Map([['zjl', 'dwb'], ['zmf', 'dwb']]);

console.log(map)

}

（3）Map 转为对象

 如果所有 Map 的键都是字符串，它可以无损地转为对象。

{

function strMapToObj(strMap) {

let obj = Object.create(null);

for (let [k, v] of strMap) {

obj[k] = v;

}

return obj;

}

const myMap = new Map()

.set('zjl', true)

.set('zmf', 'love');

console.log(strMapToObj(myMap));

}

// 如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

{

function strMapToObj(strMap) {

let obj = Object.create(null);

for (let [k, v] of strMap) {

obj[k] = v;

}

return obj;

}

const myMap = new Map()

.set({ 'zjl': 'dwb' }, true)

.set(['zjl'], false);

console.log(strMapToObj(myMap))

}

// （4）对象转为 Map

{

function objToStrMap(obj) {

let strMap = new Map();

for (let k of Object.keys(obj)) {

strMap.set(k, obj[k]);

}

return strMap;

}

console.log(objToStrMap({ yes: true, no: false }))

// Map {"yes" => true, "no" => false}

}

 （5）Map 转为 JSON

 Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

{

function strMapToJson(strMap) {

return JSON.stringify(strMapToObj(strMap));

}
let myMap = new Map().set('yes', true).set('no', false);

console.log(strMapToJson(myMap));

// '{"yes":true,"no":false}'

}

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

{

function mapToArrayJson(map) {

return JSON.stringify([...map]);

}

let myMap = new Map().set('zjl', 722).set({ 'zmf': 922 }, ['dwb']);

console.log(mapToArrayJson(myMap))

}

（6）JSON 转为 Map

 JSON 转为 Map，正常情况下，所有键名都是字符串。

{

function jsonToStrMap(jsonStr) {

return objToStrMap(JSON.parse(jsonStr));

}

console.log(jsonToStrMap('{"yes": true, "no": false}'));

// Map {'yes' => true, 'no' => false}

}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

{

function jsonToMap(jsonStr) {

return new Map(JSON.parse(jsonStr));

}

console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]'));

}

 5.weakMap

 WeakMap结构与Map结构类似，也是用于生成键值对的集合。

 

 WeakMap 可以使用 set 方法添加成员

const wm1 = new WeakMap();

const key = { foo: 1 };

wm1.set(key, 2);

wm1.get(key) // 2

 

 WeakMap 也可以接受一个数组，

 作为构造函数的参数

const k1 = [1, 2, 3];

const k2 = [4, 5, 6];

const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);

wm2.get(k2) // "bar"

 

 WeakMap与Map的区别有两点。

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

其次WeakMap的键名所指向的对象，不计入垃圾回收机制。

根据第二个特性

WeakMap 应用的典型场合就是 DOM 节点作为键名。

案例：

let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);

上面代码中，myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

进一步说，注册监听事件的listener对象很适合用WeakMap来实现

let listener=new WeakMap();
listener.set(element1,handler1);
listener.set(element2,handler2);
element1.addEventListener('click',listener.get(element1),false);
element2.addEventListener('click',listener.get(element2),false);

  上面代码中，监听函数放在WeakMap里面，一旦DOM消失，与她绑定的监听函数也会自动消失

WeakMap 的另一个用处是部署私有属性。

const _counter = new WeakMap();
const _action = new WeakMap();

class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

const c = new Countdown(2, () => console.log('DONE'));

c.dec()
c.dec()
// DONE

上面代码中，Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏。

 

【JS】ES6新类型Map与Set
owo_ovo的博客
08-01 1483
【JS】ES6新类型Map与Set
ES6——map
ling_xy的博客
09-13 622
文章目录map集合一、 get set注意对象是引用类型值NaN二、for...of循环遍历遍历方法（1）keys()（2）values()（3）entries()（4）forEach（5）has（6）delete（7）delete三、map对象的操作1.map与array的转换2.克隆map3.合并map map集合 以键值对方法存储值 Object和Map存储的都是键值对组合 区别： （1） object的键的类型是 字符串 或者 Symbols； map的键的类型是 可以是任意类型（要注意是否是引用
ES6之map
qq_15706743的博客
09-28 645
构造函数方式创建一个Map实例 参数是一个数组 数组中的每一项也得是一个单独的数组 new Map([[key,value],[key,value]]) 单独数组放的是两个值 分别是key和value 在一个对象中 它的属性名必须是字符串，如果写的不是字符串默认转为字符串 而Map可以让除了字符串数据类型之外的其他数据类型作为属性名 但是Map不能放入一个未定义的变量作为属性名 属性名不能重复，重...
ES6 Map详解
weixin_44347684的博客
08-16 1223
Map是 ES6 引入的一种新的集合类型，用于存储键值对。与传统的 JavaScript 对象不同，Map的键可以是任何类型的值（包括对象、函数、原始类型等），并且它保持键值对的插入顺序。
ES6之map()方法
热门推荐
weixin_40736319的博客
04-14 9万+
map()方法：map，映射，即原数组映射成一个新的数组； map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。 function myfun_1(arr){ var array = []; arr.map( item => { array.push(item*item); }); console.log(array); } function myfun...
ES6 Map结构的应用实例分析
12-03
本文实例讲述了ES6 Map结构的应用。分享给大家供大家参考，具体如下： Map 数据结构类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构...
js代码-es6 map,filter
07-15
在JavaScript的世界里，ES6（ECMAScript 2015）引入了许多新的特性，极大地提升了开发效率和代码可读性。其中，`Map` 和 `filter` 是两个非常重要的工具，它们在处理数据和数组操作时发挥着关键作用。让我们深入探讨...
gm-storage:同步用户脚本存储API的ES6 Map包装器
04-29
gm-storage-同步用户脚本存储API的ES6 Map包装器 特征 实施完整的Map API，并提供一些有用的附加功能 小（〜1 KB缩小） 没有依赖 全类型（TypeScript） UMD构建方便用户使用脚本 安装 $ npm install gm-storage ...
ES6map映射数组映射 - 副本.md
04-28
ES6map映射数组映射 - 副本
ES6之Map详解
Ray997的博客
07-23 1万+
含义和基本用法 JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。 如下???? obj={ "value":123, "id":1 } 为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Has
ES6内置对象 - Map
若末lan的博客
02-23 1108
接口本质就是调用迭代器对象的next方法，指针会依次指向内部成员。（迭代器之后再详细介绍。如下图及前文，可以看出.key(),.values(),.entries()等方法返回是。我尝试用number类型也是可以做键值的，但是不能。，可以使用 for of遍历。
ES6的Map函数详解
qq_44741577的博客
02-05 4396
Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值Map对象是键值对的集合。Map中的一个键只能出现一次；它在Map的集合中是独一无二的。Map对象在for…of循环在每次迭代后会返回一个形式为的数组返回 Map 对象中的键值对数量。map.set('name','张三')移除 Map 对象中所有的键值对。// 2// 0。
ES6: Map结构
DZQ1223的博客
06-21 7289
如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。上面代码的set和get方法，表面是针对同一个键，但实际上这是两个不同的数组实例，内存地址是不一样的，因此get方法无法读取该键，返回undefined。该数组的成员是一个个表示键值对的数组。
es6 map()
weixin_46733392的博客
02-24 351
Map 和 Array的对比 优势与劣势 实例属性和方法： size、set、get、has、delete、clear let map = new Map(); let arr = new Array(); //增： map.set('a',1); arr.push({'a': 1}); //查： map.has('a'); arr.find(item=>item.a); //改： map.set('a',2); arr.forEach(item=>item.a?item.a=2:''); //
ES6中的Map()
houzming的博客
07-16 125
新建一个Map实例 该实例挂载的属性和方法： Map的本质是JS对象，是键值对的集合（Hash结构），但传统上只能用字符串当做键，即‘字符串——值’的对应， 这样有诸多限制。 所以，ES6的Map数据结构提供了‘值——值’一一对应的解决方案。 注意点 Map的迭代值采用的方式不允许使用一维数组。 即需要是一个所谓的‘entry object’。 正确的迭代值传入方式：二维数组（类似于对象的方式，当然两个子数组的arr[0]不允许重复（和对象一样，key必须唯一），否则前..
map() （es6）
xuxu_qkz的博客
07-11 965
map() （es6） map()的实例是{key:value}结构，但不同于Object. Map 结构的实例有以下属性和操作方法。 （1）size 属性 （2）set(key, value) （3）get(key) （4）has(key) （5）delete(key) （6）clear() 遍历方法 keys()：返回键名的遍历器。 values()：返回键值的遍历器。...
ES6入门——Set和Map数据结构
Dragon.G
07-03 1万+
SetES6提供了新的数据结构Set。类似于数组，只不过其成员值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构。 var s = new Set();// 通过add方法向Set结构中加入成员 [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x))for (i of s) { console.log(i) } // 2 3 4 5 （表明s
ES6 map
周家大小姐
09-05 718
/** * map返回为一个数组, * map需要一个返回值,如果不给return默认会给一个undefined,map返回一个新数组 * 将A数组的数据又倍放入B数组 */ var numbers = [1,2,3]; var doubledNumbers = []; // 定义一个doubled map会把数据返回给到我们的doubled var doubled = number...
ES6-map
weixin_42367621的博客
05-19 236
map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组 [].map(function(value, index, array) { ... }); 第一个参数，数组中当前被传递的元素 第二个参数，数组中当前被传递的元素的索引 第三个参数，调用 map 方法的数组 1.得到新的数据 var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * i
es6map
最新发布
04-01
### ES6 Map 使用指南 #### 基本概念 `Map` 是一种键值对的数据结构，在 JavaScript 中提供了更强大的功能，相较于传统的 `Object`，它可以接受任意类型的键，并且可以通过内置的方法方便地管理键值对[^4]。 --- ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值