实用技能
常用内置函数
掌握 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` | 类型检查 |