【ES6 Map数据结构】建议日常开发操作数组时使用 new Map

Map数据结构

  • [new Map使用](#new Map使用)
  • 属性及方法:
    • [1. size属性](#1. size属性)
    • [2. set(key,value)](#2. set(key,value))
    • [3. get(key)](#3. get(key))
    • [4. has(key)](#4. has(key))
    • [5. delete(key)](#5. delete(key))
    • [6. clear()](#6. clear())
    • [7. 遍历方法: keys()、values()、entries()、forEach()](#7. 遍历方法: keys()、values()、entries()、forEach())
      • [(1). keys()](#(1). keys())
      • [(2). values()](#(2). values())
      • [(3). entries()](#(3). entries())
      • [(4). forEach()](#(4). forEach())
    • [8. toString()](#8. toString())
    • [9. valueOf](#9. valueOf)

算法使用 Map 还算是不少的,日常开发也可使用 new Map 替代某些数组操作,活到老学到老

new Map使用

JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制

为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对象)都可以当作键

js 复制代码
const map = new Map();

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

js 复制代码
// new Map([key, value], [key, value]...);
const mapObj = new Map([[1,1],[2,2]]); //默认带初始化参数的定义

属性及方法:

1. size属性

js 复制代码
console.log(mapObj.size); // size属性返回Map结构的成员总数: 2

2. set(key,value)

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

js 复制代码
// 常用写法
let obj = new Map();
obj.set("age", 20);
obj.set(0, "attack_type");
obj.set(undefined, "definition");

3. get(key)

get 方法用于返回某个键对应的值。如果该键不存在,则返回 undefined

js 复制代码
let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.get('hello'); // Hello ES6!
obj.get('word');
console.log(obj.get('word')); // undefined

4. has(key)

has 方法返回一个布尔值,表示该 Map 对象是否包含某个键

js 复制代码
let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.has('hello'); // true
obj.has('word'); // false

5. delete(key)

delete 方法用于删除某个键,如果该键存在,则返回 true,否则返回 false

js 复制代码
let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.delete('hello'); // true
obj.delete('word'); // false

6. clear()

clear 方法用于删除 Map 对象中的所有成员

js 复制代码
let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.clear();

7. 遍历方法: keys()、values()、entries()、forEach()

(1). keys()

Map.prototype.keys(): 返回一个新的 Iterator 对象,包含 Map 中所有的键

js 复制代码
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

for (const key of myMap.keys()) {
  console.log(key);
}

(2). values()

Map.prototype.values(): 返回一个新的 Iterator 对象,包含 Map 中所有的值

js 复制代码
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

for (const value of myMap.values()) {
  console.log(value);
}

(3). entries()

Map.prototype.entries(): 返回一个新的 Iterator 对象,包含Map中所有的 [键,值] 数组

js 复制代码
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

for (const [key, value] of myMap.entries()) {
  console.log(key + ": " + value);
}

for (const item of myMap.entries()) {
  console.log(item);
}

(4). forEach()

Map.prototype.forEach(): 传入一个函数,该函数被调用,传入当前的键和值,以及 Map 对象本身

js 复制代码
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

myMap.forEach((value, key, map) => {
  console.log(key, value, map);
});

8. toString()

返回一个字符串,该字符串包含一个由所有键值对组成的字符串,每个键值对由一个逗号分隔的字符串组成

js 复制代码
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

Map.prototype.toString = function() {
  let result = '';
  for (const [key, value] of this.entries()) {
    result += `${key}: ${value}\n`;
  }
  return result;
};

console.log(myMap.toString());

9. valueOf

在调用 valueOf 方法时,Map 对象会返回自身的原始值

js 复制代码
const myMap = new Map();
myMap.set("obj", { a: 1, b: 2 })
console.log(myMap.valueOf()); // 返回 Map 对象本身
相关推荐
非优秀程序员1 分钟前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
程序员大阳4 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
新*6 小时前
从一段 WebSocket 代码聊开:bytes 不是 zlib、binaryType 决定一切,15MB 大消息的零拷贝优化
javascript·python·websocket·性能优化·blob·zlib·arraybuffer
David猪大卫7 小时前
【C++修炼】map 和 set 的使用
c语言·开发语言·数据结构·c++·经验分享·笔记·学习
OpsEye7 小时前
别再挨个充会员了:多模型编码,最麻烦的从来不是选模型
javascript·ai编程
vvilkim9 小时前
数据结构类型、区别与应用场景:一篇讲透选型逻辑
数据结构
学以智用9 小时前
jsencrypt.js 完整详解
javascript
Hilaku11 小时前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
鸿蒙开发12 小时前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
知忆_IS13 小时前
TerriaMap 开发实战04:MVT数据自定义符号化 - terriajs源码修改
javascript·webgis·terriamap·terriajs