一维数组处理成二维数组 并保证二维数组中每个子项长度相同

111 阅读1分钟

出现场景

进行grid布局时,需要保证行列均处于对齐状态,且当行中设置多种对齐方式时,列依旧保持对齐。

处理方式

拿到的数据多为一维数组,处理如下

1、扩展一维数组为列的倍数

2、一维数组分割,取与列数相同的子项,合并成一个数组,作为新数组的值

函数如下

let sourceList = [1,2,3,4,5,6,7] // 源数组

let times = 5 // 列数

let remain = times - sourceList.length % times // 需要给源数组补充的元素个数

sourceList.length = sourceList.length + remain

sourceList.fill('补充值', sourceList.length - remain, sourceList.length) 

const handleArr = (arr, num) => {
    let result = new Array(Math.ceil(arr.length / num))
    result.fill(null, 0, result.length)
    for (let i = 0; i < arr.length; i++) {
        Array.isArray(result[Math.floor(i / num)]) ? 
            result[Math.floor(i / num)].push(arr[i]) : 
            result[Math.floor(i / num)] = [arr[i]]
    }
  return result
}

let showList = handleArr(sourceList, times)
console.log(showList)

展示结果

image.png