喔唷网 - 网络从业者技术信息综合门户!

当前位置: 主页 > 教程技术 > 编程语言 > javascript

JavaScript内置对象与方法 开发的"瑞士军刀"

时间 : 2025-04-23 11:58来源 : 喔唷网作者 : 喔唷教程点击 :
各位代码探险家们,今天我们要打开JavaScript的"工具箱",认识那些自带的神奇工具!这些内置对象就像瑞士军刀上的各种小工具,关键时刻能帮你解决大问题。 8.1 String对象 - 文字处理大师 字符串就像

各位代码探险家们,今天我们要打开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]
});

本章总结

  1. String:文本处理工具
  2. Number:数字处理方法
  3. Math:数学计算工具包
  4. Date:日期时间操作
  5. JSON:数据格式转换

实战练习

  1. 写一个函数统计字符串中每个字符出现的次数
  2. 实现一个倒计时函数,计算距离明年元旦还有多少天
  3. 设计一个购物车商品总价计算函数(考虑折扣和税费)

生活剧场

// 电商平台商品处理
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));

下一章我们将深入异步编程的世界,学习如何处理"慢动作"代码!准备好迎接回调地狱的挑战了吗?

栏目列表

关联类容

热点推荐

栏目推荐

猜你喜欢