如何在JavaScript中不使用forEach和map将键值对象数组转为二维数组

需求场景 #

给定对象数组和指定的键顺序，需要将每个对象转换为对应顺序的数组，最终生成二维数组。由于数据量超过10000条，需避开forEach、map等高阶函数，采用性能更优的实现方式。

示例代码 #

let th = ['name', 'id', 'class']
    
let arr = [
    { 'name' : 'a', 'class':'7', 'id':'1' },
    { 'name' : 'b', 'class':'7', 'id':'2' },
    { 'name' : 'b', 'class':'7', 'id':'3' },
    { 'name' : 'd', 'class':'7', 'id':'4' }
]
    
/* 目标格式 */
let finalArr = [
    ['a', '1', '7'],
    ['b', '2', '7'],
    ['b', '3', '7'],
    ['d', '4', '7']
]

实现方案 #

使用原生for循环实现，预先分配数组空间以避免动态扩容的性能损耗，同时减少函数调用开销：

function convertTo2DArray(originalArr, keyOrder) {
    const totalItems = originalArr.length;
    const result = new Array(totalItems);
    const keyCount = keyOrder.length;

    for (let i = 0; i < totalItems; i++) {
        const currentItem = originalArr[i];
        const row = new Array(keyCount);
        for (let j = 0; j < keyCount; j++) {
            row[j] = currentItem[keyOrder[j]];
        }
        result[i] = row;
    }

    return result;
}

// 调用示例
let th = ['name', 'id', 'class'];
let arr = [
    { 'name' : 'a', 'class':'7', 'id':'1' },
    { 'name' : 'b', 'class':'7', 'id':'2' },
    { 'name' : 'b', 'class':'7', 'id':'3' },
    { 'name' : 'd', 'class':'7', 'id':'4' }
];

let finalArr = convertTo2DArray(arr, th);

性能优化说明 #

1. 预先分配数组空间：创建结果数组和每行数组时直接指定长度，避免JavaScript数组动态扩容时的内存重新分配操作，在大数据量下能显著提升性能。
2. 原生for循环：相比forEach、map等高阶函数，原生循环没有额外的函数调用栈开销，执行效率更高。
3. 缓存长度值：提前缓存数组长度和键的数量，避免每次循环中重复读取属性，减少不必要的计算。

极致性能优化（固定键数量场景） #

如果keyOrder的长度固定（比如示例中的3个），可以直接展开内层循环，进一步提升性能：

function convertTo2DArray(originalArr, keyOrder) {
    const totalItems = originalArr.length;
    const result = new Array(totalItems);

    for (let i = 0; i < totalItems; i++) {
        const item = originalArr[i];
        result[i] = [item[keyOrder[0]], item[keyOrder[1]], item[keyOrder[2]]];
    }

    return result;
}

内容的提问来源于stack exchange，提问作者Suraj