JavaScript教程 - 14 常用API

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

14.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'

3 遍历

遍历的方式很多，可以根据自己的需要选择：

// 创建map
const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

// 方式1. for...of 遍历键值对
for (const [key, value] of map) {  // 遍历的是每个元素，而[key, value]是对每个元素的解构，得到key和value
  console.log(key, value);
}

// 方式2. forEach()
map.forEach((value, key) => {  // 使用forEach进行变量
  console.log(key, value);
});

// 方式2. keys()
for (const key of map.keys()) {  // map.keys()获取到所有的key，然后遍历所有的key
  console.log(key);
}

// 方式3. values()
for (const value of map.values()) {   // map.values()获取到所有的value，然后遍历所有的value
  console.log(value);
}

Map 和对象很像，你可以在如下的场景，可以考虑使用 Map：

• 需要频繁插入/删除键值对；

• 键数据类型多样（如对象）；

• 保证插入顺序，Map会按照插入顺序保存键值对；

14.2 Set

Set 也是一个集合，用来存储批量的数据，和数组不同的是，Set 中的元素是不能重复的。通过这个特点，我们可以使用 Set 来去重。

1 基础使用

举个栗子：

const set = new Set();
set.add(1);
set.add(2);
set.add(2); // 被忽略

console.log(set); // Set(2) { 1, 2 }

2 常用方法

方法/属性	说明
size	当前Set中元素个数
add(value)	添加元素（若已存在则忽略）
has(value)	是否存在某值，返回boolean值
delete(value)	删除指定值
clear()	清空所有元素

一起举个栗子：

const set = new Set();
set.add("a");
set.add("b");  // 添加元素

console.log(set.has("a")); // 判断是否有某个元素，true
set.delete("a");  // 删除指定元素
console.log(set.size);  // 获取set中元素的个数
set.clear();  // 清空set

需要注意： Set 没有下标，所以不像数组那样可以通过 set[0] 来访问元素。不过你可以通过遍历或转为数组的方式来获取其中的某个元素。

• 将数组转换为 Set：

const arr = [1, 2, 2, 3];
const set = new Set(arr);
console.log([...set]); // [1, 2, 3]

• [...set] 是将 Set 中的元素结构为数组。
• 转换为Set后，元素直接去重了。

• 将 Set 转换为数组：

const set = new Set(['a', 'b', 'c']);
const arr = Array.from(set); // 或 [...set]
console.log(arr);  // ['a', 'b', 'c'] 元素直接去重了

Set 可以用来求交集、并集、差集。

举个栗子：

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

// 并集
const union = new Set([...a, ...b]);
console.log(union);  // {1, 2, 3, 4, 5}

// 交集
const intersection = new Set([...a].filter(x => b.has(x)));
console.log(intersection);  // {3}

// 差集
const difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference);  // {1, 2}

3 遍历

遍历使用 for...of 和 forEach() 就可以了。

举个例子：

const set = new Set(['a', 'b', 'c']);

// 方式1：
for (const value of set) {
  console.log(value);
}

// 方式2“
set.forEach((value) => {
  console.log(value);
});

我们可以在如下的场景，可以考虑使用 Set：

• 数组去重；
• 求交集、并集、差集；
• 数组比较大的时候，查找是否存在指定值的时候（Set 的 has() 比数组的 includes() 更快）。

14.3 Math

Math 是 JavaScript 中的一个内置对象，提供了一系列用于数学计算的属性和方法。

Math 虽然它是一个对象，不能通过 new Math() 创建实例。它的所有方法和属性都是静态的，直接通过 Math. 调用。

1 常用属性

属性	描述	值
Math.PI	圆周率 π	≈ 3.14159
Math.E	自然常数 e	≈ 2.718

还有一些，我没有列出，用的最多可能就是 π 了

2 常用方法

• 取整和舍入
  • Math.floor(x) ：向下取整
  • Math.ceil(x) ：向上取整
  • Math.round(x) ：四舍五入
  • Math.trunc(x) ：去掉小数部分

举个栗子：

console.log(Math.floor(3.7));   // 3
console.log(Math.floor(-2.3));  // -3（比 -2.3 更小的整数是 -3）);

console.log(Math.ceil(3.2));    // 4
console.log(Math.ceil(-1.7));   // -1（比 -1.7 更大的整数是 -1）

console.log(Math.round(3.4));   // 3（0.4 舍去）
console.log(Math.round(3.6));   // 4（0.6 进位）

console.log(Math.trunc(4.9));   // 4
console.log(Math.trunc(-3.7));  // -3（仅去掉小数部分，不改变整数部分）

• 求最大/最小值

Math.max(1, 5, 3) // → 5
Math.min(1, 5, 3) // → 1

求给定数的最大最小值，没什么好说的。

• 生成随机数

使用 Math.random() 可以生成 [0, 1) 范围内（不包含1）的随机浮点数。

如果要生成 [x, y] 包含 x 和 y 范围的随机整数，可以向下面这样写：

function getRandomIntInclusive(x, y) {
  const min = Math.min(x, y);
  const max = Math.max(x, y);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 示例：生成 1~10 的随机整数（包含 1 和 10）
const randomInt = getRandomIntInclusive(1, 10);
console.log(randomInt); // 可能是 1, 2, ..., 10

• Math.random() 生成 [0, 1) 的随机数。

• Math.random() * (max - min + 1) 生成 [0, max - min + 1) 的随机数。

• Math.floor() 向下取整，得到 [0, max - min] 的整数。

• + min 调整范围到 [min, max]。

• 求指数和对数

let x = 2;
let y = 3;

console.log(Math.pow(x, y));  // 计算 x 的 y 次方（等同于 x ** y）
console.log(Math.sqrt(x));    // 计算 x 的平方根（√x）
console.log(Math.cbrt(x));     // 计算 x 的立方根（³√x）
console.log(Math.exp(x));      // 计算 e 的 x 次方（e^x）
console.log(Math.log(x));      // 计算 x 的自然对数（ln x，即以 e 为底的对数）
console.log(Math.log10(x));    // 计算 x 的以 10 为底的对数（log₁₀ x）
console.log(Math.log2(x));     // 计算 x 的以 2 为底的对数（log₂ x）

• 求三角函数

Math.sin(x)     // 正弦
Math.cos(x)     // 余弦
Math.tan(x)     // 正切
Math.asin(x)    // 反正弦
Math.acos(x)    // 反余弦
Math.atan(x)    // 反正切
Math.atan2(y, x) // 计算点 (x, y) 与原点的夹角（更精确）

• 其他实用函数

Math.abs(x)     // 绝对值
Math.sign(x)    // 符号函数，返回 -1 / 0 / 1

在进行数学计算的时候，可以看看 Math 工具类是否满足需求。

14.4 Date

Date 是 JavaScript 中用于处理日期和时间的内建对象。它提供了创建、获取、设置、格式化和操作日期时间的方法。

在介绍 Date 之前，先介绍一下时间戳。

时间戳（timestamp） 是一个表示某一特定“时间点”的数字，也就是从 1970年1月1日00:00:00 到现在所经历的毫秒数。

例如 2025-05-28 转换为时间戳是 1748390400000 。

而 Date 底层就是时间戳来存储时间的，然后在根据需要转换为不同的时间格式进行显示，同一个时间戳，可以根据时区的不同显示不同的时间。

1 基础使用

创建Date时间对象

let now = new Date();                  // 创建Date，默认是当前时间
let specificDate = new Date(2023, 4, 28); // 注意：月份从 0 开始（0 = 一月，4 = 五月）
let fromString = new Date("2023-05-28T20:30:40");  // 根据ISO8601标准的日期时间格式字符串创建时间
let fromTimestamp = new Date(1685267400000); // 根据时间戳（毫秒）创建Date

console.log(new Date());  // 打印时间：Wed May 28 2025 09:46:29 GMT+0800 (中国标准时间)

• 打印时间会输出完整本地时间字符串。

获取时间戳

// 方式1：获取当前时间戳
let timestamp = Date.now();
console.log(timestamp); // 例如：1748399973645

// 方式2，通过Date对象获取，可以获取指定Date的时间戳
let date = new Date("2023-05-28T20:30:40");
let timestamp = date.getTime();
console.log(timestamp);

我们可以对时间戳进行运算，然后通过时间戳再创建 Date 对象，就能得到指定的时间。

举个栗子：

let t1 = Date.now();  // 得到当前时间的时间戳
let t2 = t1 + 1 * 60 * 60 * 1000;  // 加上一个小时

let afterOneHour = new Date(t2);
console.log(afterOneHour); // 得到一个小时后的时间

• 上面在当前的时间上加上一个小时，时间戳是毫秒

获取年月日时分秒

通过Date对象，可以获取到日期的年月日时分秒和星期的信息。

举个栗子：

let date = new Date("2025-05-28T20:30:40"); // 创建Date，默认是当前时间
      
console.log(date.getFullYear());      // 获取完整年份, 输出：2025
console.log(date.getMonth());         // 月份（0-11）, 输出：4
console.log(date.getDate());          // 日期（1-31）, 输出：28
console.log(date.getDay());           // 星期几（0-6，0 是周日）, 输出：3
console.log(date.getHours());         // 小时（0-23）, 输出：20
console.log(date.getMinutes());       // 分钟, 输出：30
console.log(date.getSeconds());       // 秒, 输出：40
console.log(date.getMilliseconds()); // 毫秒, 输出：0

console.log(date.toString());          // 本地格式：Wed May 28 2025 20:30:40 GMT+0800 (中国标准时间)
console.log(date.toUTCString());       // UTC 格式：Wed, 28 May 2025 12:30:40 GMT
console.log(date.toDateString());      // 仅日期：Wed May 28 2025
console.log(date.toTimeString());      // 仅时间：20:30:40 GMT+0800 (中国标准时间)
console.log(date.toISOString());       // ISO 8601 格式，如 "2025-05-28T20:00:00.000Z"

设置年月日时分秒

我们还可以修改 Date 对象的年月日时分秒，得到自己想要的时间。

举个栗子：

let date = new Date(); // 当前时间

date.setFullYear(2026); // 设置年份
date.setMonth(11); // 设置月份（0 = 一月，11 = 十二月）
date.setDate(25); // 设置日（1-31）
date.setHours(18); // 设置小时（0-23）
date.setMinutes(30); // 设置分钟
date.setSeconds(15); // 设置秒
date.setMilliseconds(500); // 设置毫秒

console.log(date.toISOString());  // 2026-12-25T10:30:15.500Z

2 时间和字符串转换

如何按照自己想要的时间格式来输出时间呢？

在 JavaScript 中需要分别获取时间的年月日时分秒，然后来拼接。

举个栗子：

let date = new Date();

let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, '0'); // 补0
let day = String(date.getDate()).padStart(2, '0');

let hour = String(date.getHours()).padStart(2, '0');
let minute = String(date.getMinutes()).padStart(2, '0');
let second = String(date.getSeconds()).padStart(2, '0');

let formatted = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
console.log(formatted); // 例如：2025-05-28 09:50:21

• padStart() 是用于在字符串开头填充指定的字符，达到指定的长度，上面是在前面补0用的。

那么如何将字符串的时间转换为时间呢？

直接根据使用 new Date("2025-05-28 09:50:21"); 可能也可以，但是不保证所有的浏览器都兼容。

可以将空格替换为 T ，符合 ISO 8601标准：

let str = "2025-05-28 09:50:21";
let isoStr = str.replace(" ", "T"); // "2025-05-28T09:50:21"
let date = new Date(isoStr);
console.log(date);

如果想更通用或更复杂的解析，可以拆字符串：

let str = "2025-05-28 19:50:21";
let [datePart, timePart] = str.split(" ");  // 拆分为['2025-05-28', '19:50:21']
let [year, month, day] = datePart.split("-").map(Number);  // 拆分为['2025', '05', '28']
let [hour, minute, second] = timePart.split(":").map(Number);  // 拆分为['19', '50', '21']

// 注意：月份要减 1，因为 JS 中月份从0开始
let date = new Date(year, month - 1, day, hour, minute, second);  // 通过Date创建
console.log(date);

14.5 程序执行时间

在 JavaScript 里，有几种方式可以知晓程序执行所花费的时间。

1 使用Date对象

Date 对象可用于获取当前时间戳。通过在程序开始和结束时分别记录时间戳，再计算两者的差值，就能得到程序的执行时间。

举个栗子：

// 记录程序开始时间
const startTime = Date.now();

// 模拟一段需要执行的程序
for (let i = 0; i < 1000000; i++) {
  // 一些操作
}

// 记录程序结束时间
const endTime = Date.now();

// 计算执行时间（毫秒）
const executionTime = endTime - startTime;

console.log(`程序执行时间为: ${executionTime} 毫秒`);

• Date.now()：获取当前时间的时间戳（从1970年1月1日 00:00:00 UTC 到当前时间的毫秒数）。
• 记录开始时间和结束时间后，用结束时间减去开始时间，得到的差值就是程序的执行时间。

2 使用console.time()和console.timeEnd()

console.time() 和 console.timeEnd() 是浏览器和 Node.js 都支持的控制台方法，使用它们测量执行时间更方便一些。

举个栗子：

// 开始计时，标签为 'programTime'
console.time('programTime');

// 模拟一段需要执行的程序
for (let i = 0; i < 1000000; i++) {
    // 一些操作
}

// 结束计时，标签为 'programTime'
console.timeEnd('programTime');

• console.time('programTime')：开始计时，'programTime' 是计时的标签，可自定义。
• console.timeEnd('programTime')：结束计时，和开始时候的标签需要一致，会在控制台打印执行所花费的时间。