JavaScript 标准库完全指南：从基础到实战

引言

掌握 JavaScript 标准库是成为前端高手的必经之路。本文将全面解析 JS 标准库的核心 API，并通过实际案例帮你彻底掌握它们的使用技巧。

什么是标准库？

在编程中，库（Library） 是一组预先编写好的代码集合，而 API（Application Programming Interface） 是应用程序编程接口。JavaScript 的标准库指的是遵循 ECMAScript 标准提供的一系列内置对象和方法。

掌握 JavaScript 核心 API，提升开发效率与代码质量

Object：万物皆对象

静态方法

Object 提供了一系列实用的静态方法，用于操作对象：

const user = {name: "张三", age: 25, city: "北京"};

// 获取对象的所有键
console.log(Object.keys(user)); // ["name", "age", "city"]

// 获取对象的所有值
console.log(Object.values(user)); // ["张三", 25, "北京"]

// 获取对象的键值对数组
console.log(Object.entries(user)); 
// [["name", "张三"], ["age", 25], ["city", "北京"]]

实例方法

所有 JavaScript 对象都继承自 Object，因此拥有以下实例方法：

const obj = {name: "test", value: 42};

// toString() 方法
console.log(obj.toString()); // "[object Object]"

// valueOf() 方法
console.log(obj.valueOf()); // {name: "test", value: 42}

重要提示 ：在 JavaScript 类型转换中，对象会先调用 valueOf()，再调用 toString()。

Function：函数的强大能力

arguments 对象

在函数内部，可以使用 arguments 获取所有传入参数：

function sum() {
    let total = 0;
    for(let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3, 4)); // 10

注意：arguments 是类数组对象，不是真正的数组。

改变this指向的实例方法

const person = {
    name: "李四",
    introduce: function(greeting) {
        return `${greeting}, 我是${this.name}`;
    }
};

const anotherPerson = {name: "王五"};

// call: 立即调用，参数逐个传递
console.log(person.introduce.call(anotherPerson, "你好")); 
// "你好, 我是王五"

// apply: 立即调用，参数数组传递
console.log(person.introduce.apply(anotherPerson, ["你好"])); 
// "你好, 我是王五"

// bind: 返回新函数，不立即调用
const boundFunc = person.introduce.bind(anotherPerson, "你好");
console.log(boundFunc()); // "你好, 我是王五"

Array：数据处理的利器

静态方法

// 伪数组转真数组
const nodeList = document.querySelectorAll('div');
const divArray = Array.from(nodeList);

// 判断是否为数组
console.log(Array.isArray(divArray)); // true

// 创建数组
const newArray = Array.of(1, 2, 3, 4);
console.log(newArray); // [1, 2, 3, 4]

常用实例方法

基础操作

const numbers = [1, 3, 5, 2, 4];

// 排序
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4, 5]

//颠倒数组
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

// 连接数组
const moreNumbers = numbers.concat([6, 7, 8]);
console.log(moreNumbers); // [5, 4, 3, 2, 1, 6, 7, 8]

// 数组转字符串
console.log(numbers.join(' - ')); // "5 - 4 - 3 - 2 - 1"

// 判断数组在某区间内是否包含某数据
console.log(numbers.includes(2, 0, 2)); // 在下标0-2之间不存在2
console.log(numbers.includes(2, 1, 4)); // 在下标1-4之间存在2

强大的迭代方法

const users = [
    {name: "张三", age: 25, active: true},
    {name: "李四", age: 30, active: false},
    {name: "王五", age: 28, active: true}
];

// forEach - 遍历数组
users.forEach(user => console.log(user.name));

// filter - 过滤数组
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

// map - 映射新数组
const userNames = users.map(user => user.name);
console.log(userNames); // ["张三", "李四", "王五"]

// find - 查找元素
const user = users.find(user => user.age > 28);
console.log(user); // {name: "李四", age: 30, active: false}

// reduce - 累计计算
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge); // 83

// every / some - 条件检查
const allActive = users.every(user => user.active); // false
const hasActive = users.some(user => user.active); // true

String：文本处理专家

常用字符串方法

const text = "  Hello, JavaScript!  ";

// 去除空格
console.log(text.trim()); // "Hello, JavaScript!"

// 填充字符串
console.log("5".padStart(2, "0")); // "05"

// 切片操作
console.log(text.slice(2, 7)); // "Hello"
console.log(text.substring(2, 7)); // "Hello"

// 大小写转换
console.log(text.toLowerCase()); // "  hello, javascript!  "
console.log(text.toUpperCase()); // "  HELLO, JAVASCRIPT!  "

// 分割字符串
const words = "JavaScript,HTML,CSS".split(",");
console.log(words); // ["JavaScript", "HTML", "CSS"]

实用的字符串检查

const filename = "document.pdf";

// 检查开头和结尾
console.log(filename.startsWith("doc")); // true
console.log(filename.endsWith(".pdf")); // true
console.log(filename.includes("ment")); // true

// 查找位置
console.log(filename.indexOf(".")); // 8
console.log(filename.lastIndexOf(".")); // 8

Number 和 Math：数字处理

Number 的实用方法

// 类型检查
console.log(Number.isNaN(NaN)); // true
console.log(Number.isFinite(123)); // true
console.log(Number.isInteger(5.0)); // true

// 数值转换
console.log(Number.parseInt("42px")); // 42
console.log(Number.parseFloat("3.14em")); // 3.14

// 数值格式化
const price = 19.99;
console.log(price.toFixed(2)); // "19.99"

Math 的数学运算

// 常用数学运算
console.log(Math.abs(-5)); // 5
console.log(Math.floor(3.7)); // 3
console.log(Math.ceil(3.2)); // 4
console.log(Math.round(3.5)); // 4

// 最值计算
console.log(Math.max(1, 5, 3, 9, 2)); // 9
console.log(Math.min(1, 5, 3, 9, 2)); // 1

// 幂运算
console.log(Math.pow(2, 3)); // 8
console.log(2 ** 3); // 8 (ES7语法)

// 随机数
console.log(Math.random()); // 0~1之间的随机数

// 圆周率
console.log(Math.PI); // 3.141592653589793

Date：日期时间处理

创建和操作日期

// 创建日期对象
const now = new Date();
const specificDate = new Date(2025, 9, 15); // 注意：月份从0开始
const timestampDate = new Date(1739548800000);

// 获取日期各部分
console.log(now.getFullYear()); // 2025
console.log(now.getMonth() + 1); // 10 (月份需要+1)
console.log(now.getDate()); // 15
console.log(now.getDay()); // 3 (星期三)

// 设置日期
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

实战：友好的日期格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期格式化</title>
</head>
<body>
    <script>
        // 年-月-日 时:分:秒
        function getDateString(date) {
            const year = date.getFullYear().toString().padStart(4, "0");
            const month = (date.getMonth() + 1).toString().padStart(2, "0");
            const day = date.getDate().toString().padStart(2, "0");
            
            const hour = date.getHours().toString().padStart(2, "0");
            const minute = date.getMinutes().toString().padStart(2, "0");
            const second = date.getSeconds().toString().padStart(2, "0");
            
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        }
        
        console.log(getDateString(new Date())); // "2025-10-09 14:30:25"
    </script>
</body>
</html>

正则表达式：强大的模式匹配

什么是正则表达式？

正则表达式（Regular Expression）本质上是一套规则，用于验证和匹配字符串。想象一下，你需要验证用户输入的邮箱格式是否正确，或者从大量文本中提取特定信息------正则表达式正是解决这类问题的利器。

基础篇：正则表达式核心概念

1. 字面量匹配

最简单的正则表达式就是直接书写要匹配的字符：

hello → 匹配字符串中的 "hello"

2. 特殊字符

正则表达式中有一些具有特殊含义的字符：

• . - 匹配除换行符外的任何单个字符

  • a.b 匹配 "aab"、"a1b"、"a b" 等

• ^ - 匹配字符串开始位置

  • ^abc 匹配以 "abc" 开头的字符串

• $ - 匹配字符串结束位置

  • xyz$ 匹配以 "xyz" 结尾的字符串

3. 转义字符

当需要匹配特殊字符本身时，需要使用反斜杠 \ 进行转义：

• \. 匹配实际的点号
• \^ 匹配实际的 ^ 符号
• \$ 匹配实际的 $ 符号

常用的字符类转义：

• \d - 匹配数字，等价于 [0-9]
• \w - 匹配字母、数字、下划线，等价于 [A-Za-z0-9_]
• \s - 匹配空白字符（空格、制表符等）
• \b - 匹配单词边界
• \u4E00-\u9FA5 - 匹配中文字符

4. 字符集

使用方括号定义字符集合：

• [aeiou] - 匹配任意元音字母
• [^0-9] - 匹配任意非数字字符
• [a-z] - 匹配任意小写字母

5. 量词

控制前面规则出现的次数：

• * - 零次或多次

  • ab*c 匹配 "ac"、"abc"、"abbc" 等

• + - 一次或多次

  • ab+c 匹配 "abc"、"abbc" 但不匹配 "ac"

• ? - 零次或一次

  • colou?r 匹配 "color" 和 "colour"

• {n} - 精确匹配 n 次

  • a{3} 匹配 "aaa"

6. 分组和选择

• | - 或关系

  • cat|dog 匹配 "cat" 或 "dog"

• () - 定义子表达式

  • (ab)+ 匹配 "ab"、"abab" 等

JavaScript 中的正则表达式应用

创建正则对象

// 字面量模式
const regex1 = /pattern/flags;

// 构造函数模式
const regex2 = new RegExp('pattern', 'flags');

常用方法

test() - 验证字符串

const emailRegex = /^\w+@\w+\.\w+$/;
console.log(emailRegex.test('user@example.com')); // true

exec() - 提取匹配内容

const regex = /(\d+)-(\d+)-(\d+)/;
const result = regex.exec('2024-05-20');
console.log(result); // ['2024-05-20', '2024', '05', '20']

字符串方法配合正则

const str = 'Hello World Hello';

// match - 查找所有匹配
console.log(str.match(/Hello/g)); // ['Hello', 'Hello']

// search - 查找位置
console.log(str.search(/World/)); // 6

// replace - 替换内容
console.log(str.replace(/Hello/, 'Hi')); // 'Hi World Hello'
console.log(str.replace(/Hello/g, 'Hi')); // 'Hi World Hi'

// split - 分割字符串
console.log('a,b,c'.split(/,/)); // ['a', 'b', 'c']

进阶技巧

捕获组

用小括号包裹的部分会成为捕获组：

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const result = regex.exec('2024-05-20');
console.log(result[1]); // '2024' - 年
console.log(result[2]); // '05' - 月
console.log(result[3]); // '20' - 日

具名捕获组

给捕获组命名，使代码更清晰：

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = regex.exec('2024-05-20');
console.log(result.groups.year); // '2024'
console.log(result.groups.month); // '05'
console.log(result.groups.day); // '20'

非捕获组

仅作为整体匹配，不单独捕获：

const regex = /(?:https?|ftp):\/\/([^/\s]+)/;
// 只捕获域名部分，不捕获协议

反向引用

在正则表达式中引用前面的捕获组：

// 匹配重复的单词
const regex = /\b(\w+)\s+\1\b/;
console.log(regex.test('hello hello')); // true
console.log(regex.test('hello world')); // false

正向断言

检查后面是否满足某个条件，但不纳入匹配结果：

// 匹配后面是 .com 的字符串
const regex = /\w+(?=\.com)/;
console.log(regex.exec('example.com')); // ['example']

负向断言

检查后面是否不满足某个条件：

// 匹配后面不是 .com 的字符串
const regex = /\w+(?!\.com)/;
console.log(regex.exec('example.org')); // ['example']

贪婪 vs 非贪婪模式

默认情况下，量词是贪婪的（尽可能多匹配）：

const greedyRegex = /<.*>/;
const str = '<div>content</div>';
console.log(str.match(greedyRegex)[0]); // '<div>content</div>'

在量词后加 ? 可变为非贪婪模式（尽可能少匹配）：

const lazyRegex = /<.*?>/;
const str = '<div>content</div>';
console.log(str.match(lazyRegex)[0]); // '<div>'

实战案例

1. 邮箱验证

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test('user@example.com')); // true

2. 提取URL参数

function getUrlParams(url) {
  const regex = /[?&]([^=#]+)=([^&#]*)/g;
  const params = {};
  let match;
  
  while (match = regex.exec(url)) {
    params[match[1]] = match[2];
  }
  
  return params;
}

console.log(getUrlParams('https://example.com?name=john&age=30'));
// { name: 'john', age: '30' }

3. 密码强度验证

function validatePassword(password) {
  // 至少8位，包含大小写字母和数字
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
  return regex.test(password);
}

console.log(validatePassword('Password123')); // true

错误处理：优雅地处理异常

基本错误处理

// 抛出错误
function divide(a, b) {
    if (b === 0) {
        throw new Error("除数不能为零");
    }
    return a / b;
}

// 捕获错误
try {
    const result = divide(10, 0);
    console.log(result);
} catch (error) {
    console.error("发生错误:", error.message);
} finally {
    console.log("计算完成");
}

错误类型

try {
    // RangeError
    const arr = new Array(-1);
    
    // ReferenceError  
    console.log(undefinedVariable);
    
    // TypeError
    null.functionCall();
} catch (error) {
    if (error instanceof RangeError) {
        console.log("范围错误:", error.message);
    } else if (error instanceof ReferenceError) {
        console.log("引用错误:", error.message);
    } else if (error instanceof TypeError) {
        console.log("类型错误:", error.message);
    } else {
        console.log("其他错误:", error.message);
    }
}

总结

JavaScript 标准库提供了丰富而强大的工具，掌握这些 API 能够显著提高开发效率和代码质量。关键要点包括：

1. Object 提供了操作对象的通用方法
2. Array 的迭代方法让数据处理变得优雅
3. String 方法简化了文本处理任务
4. Date 对象需要特别注意月份从0开始
5. 正则表达式 是处理复杂模式匹配的利器
6. 错误处理 让程序更加健壮可靠

建议在实际开发中多加练习这些 API，将它们融入到日常编程习惯中，你会发现 JavaScript 编程变得更加得心应手。

希望这篇指南能帮助你更好地理解和运用 JavaScript 标准库！