🌟秒杀!数组反扁平化!前端常见手写题!

187 阅读4分钟

🧑‍💻秒杀!前端常见手写题!-HowieCong

一、数组反扁平化

  • 固定长度分组

    • 遍历一维数组,按照指定的长度将元素依次分组,将每组元素放入一个新数组里面,最终形成一个二维数组
  • 特定规则分组

    • 根据数组中元素的某种特征(如元素的值、元素的类型等)进行分组,将符合相同特征的元素放在同一个子数组里面

二、实现方法

(1)按固定长度分组

function chunkArray(arr,size){
    // 初始化一个空数组,用于存储分组后的结果
    const result = [];
    // 遍历原数组,每次移动size个位置
    for(let i = 0; i < arr.length; i += size){
        // 使用slice方法截取从当前位置到当前位置 + size的元素
        // slice方法返回一个新数组,包含从start 到 end(不包括end)的原数组元素
        result.push(arr.slice(i, i + size));
    }
    return result
}

// 测试
const flatArray = [1,2,3,4,5,6];
const chunkedArray = chunkArray(flatArray,2);
console.log(chunkedArray)

(2)根据特定规则分组(eg:根据元素的奇偶性分组)

function groudByParity(arr){
    // 初始化两个空数组,分别用于存储偶数和奇数
    const evenGroup =  [];
    const oddGroup = [];
    
    // 遍历原数组
    for(let i = 0; i < arr.length; i++){
        const num = arr[i];
        // 判断元素是否为偶数
        if(num % 2 === 0){
            // 如果是偶数,将其添加到evenGroup数组
            evenGroup.push(num);
        }else{
            // 如果是奇数,将其添加到oddGroup数组
            oddGroup.push(num);
        }
    }
    // 返回包含偶数数组和奇数数组的二维数组
    return [evenGroup,oddGroup];
}
// 测试示例
const numbers = [1, 2, 3, 4, 5, 6];
const groupedArray = groupByParity(numbers);
console.log(groupedArray); 

三、讨论

(1)chunkArray函数中的size参数大于数组的长度,会发生什么?

  • 当 size 参数大于数组的长度时,chunkArray 函数会将整个数组作为一个元素放入结果数组中

  • slice 方法在截取元素时,如果 end 参数超出数组的长度,会截取到数组的末尾,最终只会有一个子数组包含原数组的所有元素

(2)groupByParity函数只能处理数字数组,如果处理其他类型的数据

  • 将判断条件抽象为一个函数作为参数传入,这样可以根据不同的规则对不同类型的数据进行分组
function groupBy(arr, callback) {
    // 定义一个空对象 groups,用于存储分组后的结果
    const groups = {};
    // 遍历输入数组 arr 的每个元素
    for (let i = 0; i < arr.length; i++) {
        // 调用回调函数 callback,传入当前元素 arr[i],获取分组的键值
        const key = callback(arr[i]);
        // 如果 groups 中还没有当前键值 key,则初始化一个空数组
        if (!groups[key]) {
            groups[key] = [];
        }
        // 将当前元素 arr[i] 添加到对应键值 key 的数组中
        groups[key].push(arr[i]);
    }
    // 返回 groups 对象的值数组(即分组后的结果)
    return Object.values(groups);
}

// 使用示例
const data = [1, 2, 3, 4, 5, 6];
const grouped = groupBy(data, num => num % 2 === 0? 'even' : 'odd');
console.log(grouped);

(3)这两种反扁平化方法的性能

  • 按固定长度分组(chunkArray 函数)的时间复杂度是O(n),其中n是数组的长度。因为只需要遍历一次数组,并且 slice 方法的时间复杂度是O(k), k是截取的元素个数,总体性能较好

  • 根据特定规则分组(如 groupByParity 函数)的时间复杂度也是O(n),同样只需要遍历一次数组。但如果规则比较复杂,可能会影响性能

(4)将数组反扁平化为多层嵌套结构,如何实现

  • 递归地使用以上的分组方法。例如,先将数组按固定长度分组得到二维数组,然后对每个子数组再进行分组,以此类推,直到达到所需的嵌套层数。实现过程中需要注意递归的终止条件,避免无限递归

❓其他

1. 疑问与作者HowieCong声明

  • 如有疑问、出错的知识,请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

  • 若想让作者更新哪些方面的技术文章或补充更多知识在这篇文章,请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

  • 声明:作者HowieCong目前只是一个前端开发小菜鸟,写文章的初衷只是全面提高自身能力和见识;如果对此篇文章喜欢或能帮助到你,麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧,欢迎大家来交流!

2. 作者社交媒体/邮箱-HowieCong