JavaScript 数组如何合并到头部

计算机信息技术 程序语言
1

JavaScript 数组如何合并到头部。

考察下面的代码：

const headers = ['Date', 'Time', 'Action', 'Process', 'Details', 'Editor', 'Network Address'];

return [date, time, action, '', details, '', meta];
    });

要求是把 header 合并到前面去。

想将 headers 数组作为第一行，然后后面跟着 items 数组中的所有数据，形成一个大的二维数组，通常用于准备 CSV 或表格数据。

有几种方法可以实现这个合并：

方法 1: 使用 concat() 方法

concat() 是最直接的方法，它会将两个数组连接起来并返回一个新数组。

const headers = ['Date', 'Time', 'Action', 'Process', 'Details', 'Editor', 'Network Address'];
const items = Array.from(timeline.querySelectorAll('.timeline-item')).map(item => {
    const date = item.getAttribute('data-audit-date') || '';
    const time = item.querySelector('.timeline-time')?.textContent.trim() || '';
    const action = item.querySelector('.timeline-title')?.textContent.trim() || '';
    const details = item.querySelector('.timeline-description')?.textContent.trim() || '';
    const meta = item.querySelector('.timeline-meta')?.textContent.trim() || '';
    
    // 确保每个 item 数组的长度与 headers 匹配，即使某些字段为空。
    // 这里 Process 和 Editor 字段是空的，与 headers 对应。
    return [date, time, action, '', details, '', meta];
}); 

// 将 headers 数组放在 items 数组前面
const dataForExport = [headers].concat(items); 

console.log(dataForExport);
// 结果示例 (假设 items 中有一些数据):
// [
//   ['Date', 'Time', 'Action', 'Process', 'Details', 'Editor', 'Network Address'],
//   ['2023-10-26', '10:00', '用户登录', '', '成功登录系统', '', '192.168.1.100'],
//   ['2023-10-26', '10:05', '修改配置', '', '更改了设置A', '', '192.168.1.100']
// ]

解释：

  • [headers] 将 headers 数组包装成一个包含单个数组元素的数组。
  • [headers].concat(items) 这样就可以将 headers 数组作为第一个元素，然后后面跟着 items 数组中的所有子数组。

方法 2: 使用扩展运算符 (...)

扩展运算符提供了一种更简洁的语法。

const headers = ['Date', 'Time', 'Action', 'Process', 'Details', 'Editor', 'Network Address'];
const items = Array.from(timeline.querySelectorAll('.timeline-item')).map(item => {
    const date = item.getAttribute('data-audit-date') || '';
    const time = item.querySelector('.timeline-time')?.textContent.trim() || '';
    const action = item.querySelector('.timeline-title')?.textContent.trim() || '';
    const details = item.querySelector('.timeline-description')?.textContent.trim() || '';
    const meta = item.querySelector('.timeline-meta')?.textContent.trim() || '';
    
    return [date, time, action, '', details, '', meta];
}); 

// 将 headers 数组作为第一个元素，然后展开 items 数组
const dataForExport = [headers, ...items];

console.log(dataForExport);
// 结果与上面相同

解释：

  • [headers, ...items] 创建一个新数组。
  • headers 直接作为新数组的第一个元素（一个数组）。
  • ...items 将 items 数组中的所有子数组“展开”并作为新数组的后续元素添加。

哪种方法更好？

两种方法都非常有效，并且最终结果相同。

  • 扩展运算符 (...) 通常被认为是现代 JavaScript 中更简洁、更可读的方法，尤其是在创建新数组时。
  • concat() 方法同样清晰，并且在旧版浏览器中可能具有更好的兼容性（尽管现代浏览器都支持扩展运算符）。

在您提供的场景中，两种方法都非常适合。我个人会倾向于使用扩展运算符，因为它更短、更直观。