JavaScript教程 - 14 常用API

下面介绍一下 JavaScript 中一些常用的工具类。了解一下，知道有这些东西，实际开发的时候，可以再查阅。

13.1 Map

在存储批量的数据的时候，我们可以使用数组，JavaScript 还提供了 Map 容器，也可以用来存储批量数据。

Map 是键值对（key-value）的方式存储数据的，这个和对象很像，但是对象的键（key，属性名）只能是字符串或符号（Symbol），而 Map 的键和值都可以是任意类型，包括基本数据类型、对象、函数。

1 基础使用

举个栗子：

// 创建map
const map = new Map();

// 存入数据，使用set方法
map.set("name", "Doubi");
map.set(123, "number key");
map.set(true, "boolean key");
map.set(null, "null也可以");
map.set(undefined, "undefined也可以");
map.set(NaN, "NaN也行");

// 获取数据，使用get方法
console.log(map.get("name")); // Doubi
console.log(map.get(123)); // number key
console.log(map.get(true)); // boolean key
console.log(map.get(null)); // null也可以
console.log(map.get(undefined)); // undefined也可以
console.log(map.get(NaN)); // NaN也行

• 通过 new Map() 来创建Map，Map没有字面量的创建方式；
• 通过 set() 方法添加元素，通过 get() 方法，根据 key 来获取元素。
• 任意数据都可以作为key和value，甚至 NaN、null、undefined，过于离谱。
• 在匹配key的时候，使用严格相等（===）比较键，但NaN被视为与自身相等。

2 常用方法

• size：获取Map中元素的数量。

// 创建map
const map = new Map();

// 存入数据，使用set方法
map.set("name", "Alice");
map.set(123, "number key");
map.set(true, "boolean key");

console.log(map.size);   // 3

• has(key)：判断是否存在指定的键值。

// 创建map
const map = new Map();
// 存入数据，使用set方法
map.set("name", "Doubi");

console.log(map.has('name'));  // true
console.log(map.has('color'));  // false

• delete(key)：删除某个键值。

const map = new Map();
map.set("name", "Doubi");

map.delete('name');  // 根据key删除元素
console.log(map.size);  // 清空后，元素个数为0

• clear()：清空整个 Map。

const map = new Map();
map.set("name", "Doubi");

map.clear();  // 清空
console.log(map.size);  // 清空后，元素个数为0

• 将 Map 转换为数组：

const map = new Map([
  ["a", 1],
  ["b", 2],
]);

const arr = [...map]; // 或 Array.from(map)
console.log(arr); // [['a', 1], ['b', 2]]

每个元素会被转换为一个数组。

• 将数组转换为Map：

const arr = [['name', 'Alice'], ['age', 25]];  // 数组
const map = new Map(arr);

console.log(map.get('name')); // 'Alice'

通过这种方式可以实现 Map 类似于字面量初始化：

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['isStudent', true]
]);

console.log(map.get('name')); // 'Alice'

内容未完......

查看完整内容 →