JavaScript 对象数组日期格式化：转换为半年度（H1/H2）格式教程-js教程-PHP中文网

JavaScript 对象数组日期格式化：转换为半年度（H1/H2）格式教程

碧海醫心

发布： 2025-11-15 17:12:01

原创

858人浏览过

javascript 对象数组日期格式化：转换为半年度（h1/h2）格式教程

本教程详细介绍了如何在 JavaScript 中将对象数组中的日期字符串转换为半年度格式（如 'H1'2024' 或 'H2'2024'）。文章将演示如何解析日期、判断所属的半年度，并提供两种实现方式：生成新的数组或原地修改现有数据，旨在帮助开发者高效地处理日期格式转换需求。

在现代Web开发中，处理和展示日期数据是常见的任务。有时，我们需要将标准的日期格式（如 'YYYY.MM.DD'）转换为更具业务意义的表示形式，例如将一年划分为上半年（H1）和下半年（H2）。本教程将指导您如何在 JavaScript 中实现这一转换，特别是针对包含日期信息的对象数组。

理解需求与核心逻辑

我们的目标是将以下格式的日期字符串：

[
    {'description': 'halfyear', date: '2024.01.01'},
    {'description': 'halfyear', date: '2024.07.01'},
    {'description': 'halfyear', date: '2016.01.01'},
    {'description': 'halfyear', date: '2016.07.01'},
    {'description': 'halfyear', date: '2020.06.15'} // 增加一个6月的示例
]

登录后复制

转换为半年度表示，例如：

立即学习“Java免费学习笔记（深入）”；

[
    {'description': 'halfyear', date: 'H1\'2024'},
    {'description': 'halfyear', date: 'H2\'2024'},
    {'description': 'halfyear', date: 'H1\'2016'},
    {'description': 'halfyear', date: 'H2\'2016'},
    {'description': 'halfyear', date: 'H1\'2020'}
]

登录后复制

核心逻辑在于：

解析日期字符串： 从 'YYYY.MM.DD' 格式中提取年份和月份。
判断半年度： 根据月份确定是上半年（H1）还是下半年（H2）。根据业务定义，通常1月到6月为上半年（H1），7月到12月为下半年（H2）。
构建新格式字符串： 将提取的年份和判断出的半年度组合成目标格式 'H1\'YYYY' 或 'H2\'YYYY'。

核心逻辑实现

为了实现上述逻辑，我们可以按照以下步骤进行：

1. 日期字符串解析

对于 'YYYY.MM.DD' 这种固定格式的日期字符串，最简单且高效的解析方法是使用 String.prototype.split('.') 方法。

const dateString = '2024.01.01';
const [year, monthStr, day] = dateString.split('.');
// year: '2024', monthStr: '01', day: '01'

登录后复制

2. 判断半年度

获取到月份字符串 monthStr 后，我们需要将其转换为数字进行比较。

const month = parseInt(monthStr, 10); // 将 '01' 转换为 1
const halfYear = month <= 6 ? 1 : 2; // 1-6月为H1，7-12月为H2

登录后复制

这里使用 parseInt(monthStr, 10) 确保将月份字符串正确解析为十进制整数，避免潜在的字符串比较问题。

3. 构建新格式字符串

使用 JavaScript 的模板字面量（Template Literals）可以简洁明了地构建新的字符串。

吉卜力风格图片在线生成

将图片转换为吉卜力艺术风格的作品

121

查看详情

const newDateString = `H${halfYear}\'${year}`; // 例如 'H1\'2024'

登录后复制

注意，在模板字面量中，如果需要输出单引号 '，可以直接写，或者在需要动态插入变量的地方使用 \ 进行转义，但在这里直接写是可行的，因为 \' 是在最终输出的字符串中作为字符。

两种处理方式

根据是否需要保留原始数据，我们可以选择两种不同的数组处理方法：

方式一：生成新数组（非破坏性操作）

当您希望保留原始数据结构，并在不修改原数组的情况下生成一个包含新格式日期的新数组时，可以使用 Array.prototype.map() 方法。

const originalData = [
    { 'description': 'halfyear', date: '2024.01.01' },
    { 'description': 'halfyear', date: '2024.07.01' },
    { 'description': 'halfyear', date: '2016.01.01' },
    { 'description': 'halfyear', date: '2016.07.01' },
    { 'description': 'halfyear', date: '2020.06.15' }
];

const transformedData = originalData.map(item => {
    const [year, monthStr] = item.date.split('.');
    const month = parseInt(monthStr, 10);
    const halfYear = month <= 6 ? 1 : 2;
    return {
        ...item, // 使用展开运算符保留对象中除date之外的其他属性
        date: `H${halfYear}\'${year}`
    };
});

console.log("--- 方式一：生成新数组 ---");
console.log("原始数据 (未改变):", JSON.stringify(originalData, null, 2));
console.log("转换后的新数组:", JSON.stringify(transformedData, null, 2));

登录后复制

优势：

不可变性： 原始数据保持不变，这对于函数式编程范式和避免副作用非常有利。
灵活性： 您可以根据需要多次转换原始数据，而无需担心数据被修改。

方式二：原地修改原数组（破坏性操作）

如果您希望直接修改原始数组中的日期，而不需要创建新的数组，可以使用 Array.prototype.forEach() 方法。这种方法会直接更新数组中的每个对象的 date 属性。

const dataToModify = [
    { 'description': 'halfyear', date: '2024.01.01' },
    { 'description': 'halfyear', date: '2024.07.01' },
    { 'description': 'halfyear', date: '2016.01.01' },
    { 'description': 'halfyear', date: '2016.07.01' },
    { 'description': 'halfyear', date: '2020.06.15' }
];

dataToModify.forEach(item => {
    const [year, monthStr] = item.date.split('.');
    const month = parseInt(monthStr, 10);
    const halfYear = month <= 6 ? 1 : 2;
    item.date = `H${halfYear}\'${year}`; // 直接修改对象的date属性
});

console.log("\n--- 方式二：原地修改原数组 ---");
console.log("修改后的原数组:", JSON.stringify(dataToModify, null, 2));

登录后复制

优势：

内存效率： 不需要创建新的数组，可以节省内存，尤其是在处理大型数据集时。
直接更新： 如果您的应用程序逻辑要求直接更新现有数据，这是一个直接有效的方法。

关键考量与最佳实践

日期解析的精确性：
- 对于本例中严格的 'YYYY.MM.DD' 格式，split('.') 是最直接和可靠的方法，因为它避免了 new Date() 可能引入的地区、时区或无效日期字符串解析问题。
- 如果日期格式不固定或更复杂，则可能需要更强大的日期解析库（如 Moment.js 或 date-fns）或更复杂的正则表达式。
操作符优先级与模板字面量：
- 在尝试构建复杂字符串时，使用模板字面量（反引号 `）远比使用+运算符和大量括号更清晰、更不容易出错。例如，原始问题中尝试的new Date(x.date).getMonth() + 1 < 6 ? '1': '2' + new Date(x.date).getFullYear() + ''表达式，由于运算符优先级问题（+优先级高于?:），会导致逻辑错误。模板字面量通过${}` 结构明确了变量插入的位置，避免了此类问题。
选择合适的数组方法：
- map() 用于转换： 当您需要将数组中的每个元素转换为新形式，并返回一个新数组时，map() 是理想选择。它体现了函数式编程中“不可变性”的原则。
- forEach() 用于副作用： 当您需要对数组中的每个元素执行某些操作（例如修改其属性、打印到控制台或触发其他副作用）而不需要返回新数组时，forEach() 是合适的。
- 理解这两种方法的区别对于编写健壮和可维护的代码至关重要。
代码可读性：
- 使用有意义的变量名（如 year, monthStr, halfYear）可以大大提高代码的可读性和可维护性。