JS一维数组变二维数组多种实现方式

548 阅读1分钟

一维数组变二维数组多种实现方式 在项目开发中,一些场景下需要将一维数组转变为二维数组,实现需求及结果如下:

const arr = [1,2,3,4,5,6,7,8,9];

image.png

  1. for 循环实现
/**
 * @desc 一维数组变二维数组
 * @author 前端代码仔
 * @param arr 要转变的数组
 * @param num 基数 eg: num = 2 ——— 两个元素为一组
 * @return newArr 转变后的二维数组
 */
function arrGroup(arr,num){
    try{
        const newArr =[]
        if (!(typeof num=== 'number' && !isNaN(num))) throw new Error('请输入数字')
        if (!Array.isArray(arr)) throw new Error('请输入数组')

        for (let i=0,j=arr.length;i<j;i+=num) {
            newArr.push(arr.slice(i,num+i))
        }
        return newArr
    } catch (e) {
        console.log(e)
    }
}

console.log(arrGroup(arr,2))
  1. 数组的 forEach 方法
function arrGroup(arr,num){
    try{
        const newArr =[]
        if (!(typeof num=== 'number' && !isNaN(num))) throw new Error('请输入数字')
        if (!Array.isArray(arr)) throw new Error('请输入数组')

        arr.forEach((item,index) => {
            let arr2 = newArr[newArr.length - 1]
            if (index % num === 0) {
                newArr.push([item])
            } else {
                arr2.push(item)
            }
        })
        return newArr
     } catch (e) {
        console.log(e)
     }
}

console.log(arrGroup(arr,2))
  1. 数组的 reduce 方法
function arrGroup(arr,num){
    try{
        const newArr =[]
        if (!(typeof num=== 'number' && !isNaN(num))) throw new Error('请输入数字')
        if (!Array.isArray(arr)) throw new Error('请输入数组')

        return arr.reduce((total,item,index) => {
            if (index % num === 0) {
                newArr.push([])
            }
            newArr.at(-1).push(item)
            return newArr
        },newArr)
    } catch (e) {
        console.log(e)
    }
}

console.log(arrGroup(arr,2))