各位代码探险家们,今天我们要打开JavaScript的"工具箱",认识那些自带的神奇工具!这些内置对象就像瑞士军刀上的各种小工具,关键时刻能帮你解决大问题。
8.1 String对象 - 文字处理大师
字符串就像一条珍珠项链,每个字符都是一颗珍珠:
let message = "Hello, 世界!";
// 常用属性和方法
console.log(message.length); // 10(注意中文也算一个长度)
console.log(message[1]); // 'e'(索引访问)
console.log(message.includes("世界")); // true(是否包含)
console.log(message.startsWith("Hello")); // true(是否开头)
console.log(message.replace("世界", "World")); // 替换
实用技巧 - 用户输入处理:
let userInput = " Kobe Bryant ";
let processed = userInput
.trim() // 去除首尾空格 → "Kobe Bryant"
.toUpperCase() // 转大写 → "KOBE BRYANT"
.slice(0, 4); // 截取前4字符 → "KOBE"
console.log(processed);
8.2 Number对象 - 数字处理专家
JavaScript中所有数字都是64位浮点数,Number对象提供了很多实用方法:
let pi = 3.1415926;
let price = 9.99;
// 常用方法
console.log(pi.toFixed(2)); // "3.14"(保留两位小数)
console.log(price.toString()); // "9.99"(转字符串)
// 静态属性
console.log(Number.MAX_SAFE_INTEGER); // 最大安全整数
console.log(Number.parseFloat("3.14abc")); // 3.14(解析浮点数)
金融计算注意:
// 浮点数精度问题
console.log(0.1 + 0.2); // 0.30000000000000004
// 解决方案:转换成整数计算
let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3
8.3 Math对象 - 数学运算宝箱
Math对象就像你的数学工具箱,不需要实例化就能使用:
// 常用方法
console.log(Math.PI); // 3.141592653589793
console.log(Math.pow(2, 3)); // 8(2的3次方)
console.log(Math.sqrt(16)); // 4(平方根)
console.log(Math.round(4.6)); // 5(四舍五入)
console.log(Math.random()); // 0-1之间的随机数
// 生成1-100的随机整数
let randomNum = Math.floor(Math.random() * 100) + 1;
实战例子 - 验证码生成:
function generateCaptcha() {
const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
let captcha = "";
for (let i = 0; i < 6; i++) {
captcha += chars[Math.floor(Math.random() * chars.length)];
}
return captcha;
}
console.log("验证码:", generateCaptcha());
8.4 Date对象 - 时间管理大师
Date对象帮你处理所有时间相关操作:
// 创建日期对象
let now = new Date(); // 当前时间
let birthday = new Date("1995-12-17"); // 指定日期
// 获取日期组件
console.log(now.getFullYear()); // 2023(年份)
console.log(now.getMonth() + 1); // 1-12(月份要+1)
console.log(now.getDate()); // 日(1-31)
console.log(now.getDay()); // 星期几(0是周日)
// 设置日期
birthday.setFullYear(1996);
console.log(birthday.toDateString());
日期格式化示例:
function formatDate(date) {
let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, '0');
let day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date())); // "2023-01-15"
8.5 JSON对象 - 数据转换魔术师
JSON是JavaScript对象表示法,用于数据交换:
let product = {
id: 1,
name: "智能手机",
price: 2999,
specs: ["6.1英寸", "128GB"]
};
// 对象转JSON字符串
let jsonStr = JSON.stringify(product);
console.log(jsonStr);
// '{"id":1,"name":"智能手机","price":2999,"specs":["6.1英寸","128GB"]}'
// JSON字符串转对象
let jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // "智能手机"
AJAX请求示例:
// 模拟从服务器获取数据
function fetchData(callback) {
setTimeout(() => {
let response = '{"status":200,"data":[1,2,3]}';
callback(JSON.parse(response));
}, 1000);
}
fetchData(data => {
console.log("收到数据:", data.data); // [1, 2, 3]
});
本章总结:
- String:文本处理工具
- Number:数字处理方法
- Math:数学计算工具包
- Date:日期时间操作
- JSON:数据格式转换
实战练习:
- 写一个函数统计字符串中每个字符出现的次数
- 实现一个倒计时函数,计算距离明年元旦还有多少天
- 设计一个购物车商品总价计算函数(考虑折扣和税费)
生活剧场:
// 电商平台商品处理
let products = [
{id: 1, name: "无线耳机", price: 199, stock: 15},
{id: 2, name: "智能手表", price: 599, stock: 8}
];
// 1. 价格增加10%
products.forEach(p => p.price = Math.round(p.price * 1.1));
// 2. 生成商品列表HTML
let html = products.map(p => `
<div class="product">
<h3>${p.name}</h3>
<p>价格:¥${p.price.toFixed(2)}</p>
<p>库存:${p.stock}件</p>
</div>
`).join("");
// 3. 保存到本地存储
localStorage.setItem("products", JSON.stringify(products));
下一章我们将深入异步编程的世界,学习如何处理"慢动作"代码!准备好迎接回调地狱的挑战了吗?