Javascript高级-封装实战

✊不积跬步，无以至千里；不积小流，无以成江海。

MDN文档

MDN（Mozilla Developer Network）文档是一个由 Mozilla 维护的开发者文档平台，旨在提供关于 Web 技术的详细和准确的文档。它涵盖了 HTML、CSS、JavaScript、Web API、浏览器扩展等广泛的主题。

MDN文档之所以被广泛认可和使用，有以下几个原因：

1. 完备性和准确性：MDN文档提供了全面、详细和准确的内容，涵盖了各种 Web 技术的方方面面。无论是初学者还是有经验的开发者，都可以在MDN文档中找到所需的信息。
2. 及时更新：MDN文档持续更新，以适应不断发展的 Web 技术和标准。开发者可以获取到最新的规范、最佳实践和新功能的详细介绍。
3. 示例和代码片段：MDN文档提供了丰富的示例代码和代码片段，帮助开发者理解和应用相关的概念。这些示例通常具有清晰的解释和易于理解的代码结构，有助于开发者进行实践和学习。
4. 社区参与：MDN文档的撰写和维护不仅由 Mozilla 的团队完成，还鼓励开发者社区的参与和贡献。这意味着文档可以受益于广泛的专业知识和经验，确保了文档的质量和多样性。
5. 多语言支持：MDN文档提供了多种语言版本，使得世界各地的开发者都能够以自己擅长的语言阅读和学习文档。

Date API

Date API 是 JavaScript 中用于操作日期和时间的内置 API。它提供了许多方法和属性，用于获取、设置和操作日期、时间以及与日期时间相关的值。下面是一些常用的 Date API 方法和属性的示例：

1. 创建 Date 对象：

const now = new Date();  // 创建一个表示当前日期和时间的 Date 对象
const specificDate = new Date(2023, 10, 6);  // 创建一个表示特定日期的 Date 对象（月份从 0 开始，即 0 表示一月）

2. 获取日期和时间的各个部分

const year = now.getFullYear();  // 获取年份
const month = now.getMonth();  // 获取月份（0-11）
const date = now.getDate();  // 获取日期（1-31）
const day = now.getDay();  // 获取星期几（0-6，其中 0 表示星期日）
const hours = now.getHours();  // 获取小时（0-23）
const minutes = now.getMinutes();  // 获取分钟（0-59）
const seconds = now.getSeconds();  // 获取秒数（0-59）
const milliseconds = now.getMilliseconds();  // 获取毫秒数（0-999）

3. 设置日期和时间的各个部分：

now.setFullYear(2024);  // 设置年份
now.setMonth(5);  // 设置月份（0-11）
now.setDate(15);  // 设置日期（1-31）
now.setHours(10);  // 设置小时（0-23）
now.setMinutes(30);  // 设置分钟（0-59）
now.setSeconds(45);  // 设置秒数（0-59）
now.setMilliseconds(500);  // 设置毫秒数（0-999）

4. 格式化日期和时间：

const formattedDate = now.toDateString();  // 将日期部分转换为字符串（如 "Fri Nov 03 2023"）
const formattedTime = now.toTimeString();  // 将时间部分转换为字符串（如 "14:30:00 GMT+0800 (China Standard Time)"）
const formattedDateTime = now.toLocaleString();  // 将日期和时间转换为本地格式的字符串（如 "11/3/2023, 2:30:00 PM"）

5. 获取时间戳：

const timestamp = now.getTime();  // 获取自 1970 年 1 月 1 日以来的毫秒数）

实现time.prototype.parts

要实现 time.prototype.parts，可以通过在 Date.prototype 上扩展一个新的方法来实现。下面是一个示例代码：

// 扩展 Date.prototype.parts 方法
Date.prototype.parts = function () {
  return {
    year: this.getFullYear(),
    month: this.getMonth() + 1,
    day: this.getDate(),
    hour: this.getHours(),
    minute: this.getMinutes(),
    second: this.getSeconds()
  };
};

// 使用示例
const now = new Date();
const parts = now.parts();

console.log(parts);
// 输出：{ year: 2023, month: 11, day: 6, hour: 15, minute: 30, second: 0 }

在上述示例中，我们在 Date.prototype 上定义了一个新的方法 parts，该方法返回一个包含年、月、日、小时、分钟和秒的对象。在方法内部，使用 this 关键字引用了当前的 Date 对象，然后通过调用 get 方法获取相应的日期和时间部分，并将其存储在一个对象中返回。

注意，月份需要加 1，因为 JavaScript 中的月份是从 0 开始计数（0 表示一月）。所以在 month 的属性值上加了 1。

使用示例代码中，我们创建了一个 now 的 Date 对象，并调用 parts 方法来获取日期和时间的各个部分。然后将返回的对象打印到控制台上，展示了年、月、日、小时、分钟和秒的值。

这样，通过扩展 Date.prototype，我们就可以在任意 Date 对象上使用 parts 方法来获取日期和时间的各个部分，使代码更加简洁和可读。

实现 time.prototype.add

要实现 time.prototype.add，可以通过在 Date.prototype 上扩展一个新的方法来实现。下面是一个示例代码：

// 扩展 Date.prototype.add 方法
Date.prototype.add = function (unit, amount) {
  const date = new Date(this.getTime());

  switch (unit) {
    case 'year':
      date.setFullYear(date.getFullYear() + amount);
      break;
    case 'month':
      date.setMonth(date.getMonth() + amount);
      break;
    case 'day':
      date.setDate(date.getDate() + amount);
      break;
    case 'hour':
      date.setHours(date.getHours() + amount);
      break;
    case 'minute':
      date.setMinutes(date.getMinutes() + amount);
      break;
    case 'second':
      date.setSeconds(date.getSeconds() + amount);
      break;
    default:
      break;
  }

  return date;
};

// 使用示例
const now = new Date();
const futureDate = now.add('day', 7);

console.log(futureDate);
// 输出：将来的日期，比当前日期晚7天

在上述示例中，我们在 Date.prototype 上定义了一个新的方法 add。该方法接收两个参数：unit 表示要添加的时间单位，amount 表示要添加的数量。

在方法内部，我们首先通过 new Date(this.getTime()) 创建了一个新的 Date 对象 date，并使用当前日期对象的时间戳初始化它。这样可以确保在修改 date 对象时不会改变原始的日期对象。

然后，使用 switch 语句根据传入的 unit 参数选择相应的时间单位，并使用 amount 参数来增加或减少相应的时间。通过调用相应的 set 方法来修改 date 对象的年、月、日、小时、分钟和秒。

最后，将修改后的 date 对象返回。

使用示例代码中，我们创建了一个 now 的 Date 对象，然后调用 add 方法来添加指定的时间单位和数量。在示例中，我们将当前日期添加了 7 天，并将结果存储在 futureDate 中。然后将 futureDate 打印到控制台上，展示了未来的日期。

这样，通过扩展 Date.prototype，我们可以在任意 Date 对象上使用 add 方法来进行日期和时间的增加或减少操作，使代码更加灵活和便捷。

实战：判断闰年、取当月最后一天、实现格式化输出

实战：判断闰年

判断一个年份是否为闰年的常见方法是根据以下规则：

1. 如果年份能被 4 整除，但不能被 100 整除，则是闰年。
2. 如果年份能被 400 整除，则也是闰年。

下面是一个示例代码，实现了判断闰年的函数：

function isLeapYear(year) {
  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    return true;
  } else {
    return false;
  }
}

// 使用示例
console.log(isLeapYear(2020));  // 输出：true，2020 是闰年
console.log(isLeapYear(2021));  // 输出：false，2021 不是闰年
console.log(isLeapYear(2000));  // 输出：true，2000 是闰年
console.log(isLeapYear(1900));  // 输出：false，1900 不是闰年

在上述示例中，我们定义了一个名为 isLeapYear 的函数，它接收一个年份作为参数。在函数内部，根据闰年的判断规则进行判断，如果满足条件，则返回 true，否则返回 false。

使用示例代码中，我们调用 isLeapYear 函数来判断不同年份是否为闰年，并将结果打印到控制台上。

注意，示例中使用了逻辑运算符 &&（与）、!==（不等于）、||（或）来组合判断条件。可以根据实际情况对函数进行调整，以满足特定的需求。

实战：取当月最后一天

要获取当月的最后一天，可以使用以下步骤：

1. 获取当前日期的年份和月份。
2. 将月份加 1，以获取下个月的第一天。
3. 将下个月的第一天的日期减去一天，即为当月的最后一天。

下面是一个示例代码，演示如何取得当月的最后一天：

function getLastDayOfMonth() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();
  
  // 获取下个月的第一天
  const nextMonthFirstDay = new Date(year, month + 1, 1);

  // 将下个月的第一天减去一天，即为当月的最后一天
  const lastDayOfMonth = new Date(nextMonthFirstDay.getTime() - (24 * 60 * 60 * 1000));

  return lastDayOfMonth.getDate();
}

// 使用示例
console.log(getLastDayOfMonth());  // 输出当月的最后一天的日期

在上述示例中，我们定义了一个名为 getLastDayOfMonth 的函数，它没有参数。在函数内部，我们首先创建一个 today 的 Date 对象，以获取当前日期的年份和月份。

然后，我们使用 year 和 month 的值，通过创建一个新的 Date 对象 nextMonthFirstDay，表示下个月的第一天，即当前月份加 1。

最后，我们将 nextMonthFirstDay 的时间戳减去一天的毫秒数。并创建一个新的 Date 对象 lastDayOfMonth，表示当月的最后一天。

我们使用 nextMonthFirstDay.getTime() - (24 * 60 * 60 * 1000) 来减去一天的毫秒数。一天的毫秒数等于 24 小时乘以 60 分钟乘以 60 秒乘以 1000 毫秒。通过将这个值减去 nextMonthFirstDay 的时间戳，我们实际上是将日期向前移动了一天，得到了当前月份的最后一天的时间戳。

最后，我们返回 lastDayOfMonth.getDate()，即当月的最后一天的日期。

使用示例代码中，我们调用 getLastDayOfMonth 函数来获取当前月份的最后一天的日期，并将结果打印到控制台上。

实战：实现格式化输出

要实现格式化输出，可以使用特定的格式字符串和日期对象的方法来格式化日期、时间和其他值。

以下是一个示例代码，演示如何在 JavaScript 中实现日期格式化输出：

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}

// 使用示例
const today = new Date();
const formattedDate = formatDate(today);
console.log(formattedDate);  // 输出格式化后的日期

在上述示例中，我们定义了一个名为 formatDate 的函数，它接收一个日期对象作为参数。在函数内部，我们使用日期对象的方法来获取年份、月份和日期，并进行必要的格式化。

首先，我们使用 getFullYear 方法获取年份，并将其存储在 year 变量中。

然后，我们使用 getMonth 方法获取月份，并通过 + 1 将月份值从 0 到 11 转换为 1 到 12，然后使用 String 函数将其转换为字符串。我们还使用 padStart 方法在月份字符串前面添加一个零，以确保月份始终有两位数字。（padStart语法详解在下方）

接下来，我们使用 getDate 方法获取日期，并使用类似的方式对日期进行格式化。

最后，我们通过字符串模板（template string）将年份、月份和日期组合在一起，以形成格式化后的日期字符串。（字符串模板详解在下方）

在使用示例中，我们创建一个 today 的 Date 对象，表示当前日期。然后，我们调用 formatDate 函数，并将 today 作为参数传递进去，从而获得格式化后的日期字符串。

最后，我们将格式化后的日期字符串打印到控制台上。

这样，通过定义一个函数来格式化日期，并使用适当的方法和格式字符串，我们可以实现日期的格式化输出。

padStart

当你调用字符串的 padStart 方法时，它会在当前字符串的开头（左侧）填充指定的字符，直到字符串达到指定的长度。

padStart 方法的语法如下：

str.padStart(targetLength [, padString])

其中，str 是要进行填充的字符串，targetLength 是最终期望的字符串长度，padString 是要用于填充的字符（可选参数，默认为空格字符）。

• targetLength：指定字符串的目标长度。如果该参数小于或等于原始字符串的长度，则不会进行填充，直接返回原始字符串。如果大于原始字符串的长度，则会在开头添加足够数量的填充字符，使字符串达到目标长度。
• padString（可选）：要用于填充的字符。它将会重复使用，直到填充满目标长度。如果未提供该参数，默认使用空格字符进行填充。

以下是示例代码，演示如何使用 padStart 方法进行字符串填充：

const str = '5';
const paddedStr = str.padStart(3, '0');

console.log(paddedStr);  // 输出：'005'

在上述示例中，我们有一个字符串 str，其长度为 1。我们希望将其填充到长度为 3 的目标长度。

通过调用 str.padStart(3, '0')，我们指定目标长度为 3，填充字符为 '0'。由于原始字符串长度小于目标长度，所以 padStart 方法会在开头添加适量的 '0' 字符，使字符串的长度达到目标长度。

因此，最终结果是 '005'。

字符串模板（template string）

当你使用字符串模板（template string）时，你可以在字符串中插入表达式、变量或其他字符串，并以一种更简洁、更直观的方式创建复杂的字符串。

字符串模板使用反引号（键盘左上角那个）包围，而不是常规字符串中使用的引号（单引号或双引号）。在字符串模板中，可以使用 ${expression} 的语法来插入表达式或变量。

以下是字符串模板的示例代码：

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);  // 输出：Hello, my name is Alice and I am 25 years old.

在上述示例中，我们定义了两个变量 name 和 age，分别表示姓名和年龄。

然后，我们创建了一个字符串模板 greeting，其中包含了表达式 ${name} 和 ${age}。在字符串模板中，这些表达式会被相应的变量值替换。

当我们使用 console.log(greeting) 输出 greeting 变量时，表达式 ${name} 和 ${age} 会被它们对应的变量值替换，从而形成最终的字符串输出。

使用字符串模板可以极大地简化字符串拼接的代码，并提供了更直观、更易读的方式来创建动态字符串。除了变量，你还可以在字符串模板中执行更复杂的表达式，甚至调用函数等。

还可以在字符串模板中使用多行文本，而无需显式使用换行符。这对于创建格式化的文本块非常有用。