Z
ZHANK
实用技能

常用内置函数

掌握 Math、parseInt、定时器、编码解码等内置工具

常用内置函数

JavaScript 自带大量全局函数和对象方法,不需要引入任何库就能用。掌握这些能省去很多自己造轮子的时间。

学完本章你将: 掌握 Math 数学运算、parseInt 数值解析、定时器、编码解码、类型判断。


Math —— 数学运算

javascript
// 取整
Math.floor(3.9);    // 3 —— 向下取整
Math.ceil(3.1);     // 4 —— 向上取整
Math.round(3.5);    // 4 —— 四舍五入
Math.trunc(3.9);    // 3 —— 去掉小数(ES6)

// 最值
Math.max(1, 5, 3, 9);  // 9
Math.min(1, 5, 3, 9);  // 1

// 随机
Math.random();       // 0~1(不含1)
Math.floor(Math.random() * 10); // 0~9 随机整数

// 常量与幂
Math.PI;             // 3.14159...
Math.pow(2, 10);     // 1024
Math.sqrt(16);       // 4
Math.abs(-5);        // 5

parseInt / parseFloat —— 字符串转数字

javascript
parseInt("42");           // 42
parseInt("42px");         // 42 —— 自动忽略非数字后缀
parseInt("1010", 2);      // 10 —— 指定进制(二进制转十进制)
parseInt("FF", 16);       // 255
parseInt("abc");          // NaN —— 解析失败

parseFloat("3.14");       // 3.14
parseFloat("3.14.15");    // 3.14 —— 只解析第一个
parseFloat("  12.5kg ");  // 12.5 —— 自动去空格

// Number() vs parseInt()
Number("42px");            // NaN —— 严格转换,有非数字就失败
parseInt("42px");          // 42 —— 宽松转换

// ⚠️ parseInt 第二个参数(进制)一定要传!
parseInt("08");            // 老浏览器可能按八进制解析得 0
parseInt("08", 10);        // 8 ✅

isNaN / isFinite —— 数值判断

javascript
// isNaN —— 判断是否"不是数字"
isNaN(NaN);          // true
isNaN("hello");      // true
isNaN("42");         // false —— 会先尝试转数字!
isNaN(42);           // false

// Number.isNaN —— 更严格(ES6,推荐)
Number.isNaN(NaN);       // true
Number.isNaN("hello");   // false —— 不会做类型转换

// isFinite —— 判断是否有限
isFinite(42);        // true
isFinite(Infinity);  // false
isFinite(NaN);       // false

setTimeout / setInterval —— 定时器

javascript
// setTimeout —— 延迟执行(只一次)
setTimeout(() => {
    console.log("2秒后执行");
}, 2000);

// 传递参数
setTimeout((name) => {
    console.log(`Hello, ${name}`);
}, 1000, "Alice");

// 取消定时
let timerId = setTimeout(() => {}, 5000);
clearTimeout(timerId); // 取消了

// setInterval —— 循环执行
let count = 0;
let intervalId = setInterval(() => {
    console.log(++count);
    if (count >= 5) clearInterval(intervalId); // 5次后停
}, 1000);

// ⚠️ 定时器不是精确的——它是最少延迟,不是保证
// 如果主线程忙,回调会排队等

encodeURIComponent / decodeURIComponent —— URL 编码

javascript
let keyword = "你好世界";
let url = "https://example.com?q=" + encodeURIComponent(keyword);
// "https://example.com?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C"

// 解码
decodeURIComponent("%E4%BD%A0%E5%A5%BD"); // "你好"

// encodeURI vs encodeURIComponent
encodeURI("https://a.com/hello world");    // 保留 : /
encodeURIComponent("hello world");          // 连 : / 也编码
// 参数值用 encodeURIComponent,完整 URL 用 encodeURI

eval —— 执行字符串代码(慎用!)

javascript
let x = 10;
eval("x = x + 5");
console.log(x); // 15

// ❌ 危险!永远不要 eval 用户输入
// eval(userInput); // 可能执行恶意代码!

// 几乎总有更好的替代方案
// JSON.parse 代替 eval 解析 JSON
// Function 构造器代替 eval 执行动态代码

快速参考

分类函数用途
数学`Math.max/min/random/floor`计算与随机
解析`parseInt/parseFloat`字符串→数字
判断`isNaN/isFinite`数值合法性
定时`setTimeout/setInterval`延迟与循环
编码`encodeURIComponent`URL 安全
类型`typeof/instanceof`类型检查