网页设计基础第三十五讲:JavaScript 常用对象解析:从基础到实践

767 阅读2分钟

本文通过详实的代码示例,深入探讨了 JavaScript 中 Array、Object、Date 以及 Promise 这些常用对象的功能与使用场景。不仅展示了如何创建和操作这些对象,还提供了具体的案例来帮助读者理解其在实际开发中的应用,旨在加强开发者对 JavaScript 基础特性的掌握。

任务描述

我们将探讨以下几个常用的 JavaScript 对象:

  1. Array 对象:用于处理和操作数组数据。
  2. Object 对象:用于存储键值对。
  3. Date 对象:用于处理日期和时间。
  4. Promise 对象:用于处理异步操作。

通过实际案例来展示如何利用这些对象完成特定任务。

任务实施

1. Array 对象

任务:创建一个数组并实现一些常用操作,如排序、过滤和映射。

代码示例

// 创建一个数字数组
let numbers = [5, 3, 8, 1, 2];

// 排序数组
numbers.sort((a, b) => a - b);
console.log("排序后的数组:", numbers); // [1, 2, 3, 5, 8]

// 过滤出大于3的数字
let filteredNumbers = numbers.filter(num => num > 3);
console.log("大于3的数字:", filteredNumbers); // [5, 8]

// 将数组元素乘以2
let doubledNumbers = numbers.map(num => num * 2);
console.log("每个数字乘以2:", doubledNumbers); // [2, 4, 6, 10, 16]

2. Object 对象

任务:创建一个对象并实现属性的增加、删除和修改。

代码示例

// 创建一个学生对象
let student = {
    name: "张三",
    age: 20,
    major: "计算机科学"
};

// 增加一个属性
student.grade = "大二";
console.log("增加属性后的对象:", student);

// 修改属性
student.age = 21;
console.log("修改年龄后的对象:", student);

// 删除属性
delete student.major;
console.log("删除专业后的对象:", student);

3. Date 对象

任务:获取当前日期,并格式化为特定的字符串。

代码示例

// 获取当前日期
let currentDate = new Date();
console.log("当前日期:", currentDate);

// 格式化日期为 YYYY-MM-DD
let formattedDate = currentDate.toISOString().split('T')[0];
console.log("格式化后的日期:", formattedDate);

4. Promise 对象

任务:实现一个简单的异步操作,模拟网络请求。

代码示例

// 模拟一个网络请求的函数
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 模拟成功的请求
            const data = { id: 1, name: "张三" };
            resolve(data);
            // 如果失败,调用 reject
            // reject("请求失败");
        }, 2000);
    });
}

// 调用异步函数
fetchData()
    .then(data => console.log("获取到的数据:", data))
    .catch(error => console.error(error));

三、实验实训

通过上述示例,学习者可以在实践中加深对 JavaScript 常用对象的理解与使用。可以尝试以下任务:

  1. 使用 Array 对象生成一个随机数组,实施排序和计算平均值。
  2. 创建一个 Object 对象,添加多个不同类型的属性,并打印它们。
  3. 使用 Date 对象获取用户输入的时间戳,并将其格式化为可读的时间字符串。
  4. 使用 Promise 对象实现多个独立的异步请求,并处理它们的结果。