JavaScript中指定大小分割陣列的一種實現

胡编乱码發表於2024-05-08
JavaScript陣列

今天分享一個使用JavaScript分割陣列為多個自陣列的方法實現。我使用它的場景如下：

給定一個陣列 arr 和指定大小 fixed：

const arr = [
	{
		id: 1,
		name: 'name1'
	},
	{
		id: 2,
		name: 'name2'
	},
	{
		id: 3,
		name: 'name3'
	},
	{
		id: 4,
		name: 'name4'
	},
	{
		id: 5,
		name: 'name5'
	},
	{
		id: 6,
		name: 'name6'
	},
	{
		id: 7,
		name: 'name7'
	},
	{
		id: 8,
		name: 'name8'
	},
	{
		id: 9,
		name: 'name9'
	}
]
const fixed = 2;

期望的結果是生成一個陣列，陣列中包含5個陣列，如下：

[
  [ { id: 1, name: 'name1' }, { id: 2, name: 'name2' } ],
  [ { id: 3, name: 'name3' }, { id: 4, name: 'name4' } ],
  [ { id: 3, name: 'name3' }, { id: 6, name: 'name6' } ],
  [ { id: 3, name: 'name3' }, { id: 6, name: 'name6' } ],
  [ { id: 3, name: 'name3' }, {} ]
]

按照 fixed 的大小分割，如果遇到不夠 fixed 大小的，使用空物件填充。這種場景對錶格資料填充需要等寬或者等數量會有所幫助。
具體實現程式碼如下：

/**
 *
 * @param {arr} 要分割的陣列
 * @param {fixed} 指定分割的大小
 **/
function splitArr(arr, fixed) {
	let result = [];
	let size = arr.length;
	let len = Math.ceil(arr.length / fixed);//向上取整
	for(let i=0; i<len; i++){
		let tempArr = [];
		for(let j=0; j<fixed; j++){
			if((i*fixed)+j >= size){
				tempArr[j] = {}
			}else{
				tempArr[j] = arr[j];
			}
		}
		result.push(tempArr);
		if(arr.length > 0){
			arr.splice(i, fixed);
		}
	}
	return result;
}

const arr = [
	{
		id: 1,
		name: 'name1'
	},
	{
		id: 2,
		name: 'name2'
	},
	{
		id: 3,
		name: 'name3'
	},
	{
		id: 4,
		name: 'name4'
	},
	{
		id: 5,
		name: 'name5'
	},
	{
		id: 6,
		name: 'name6'
	},
	{
		id: 7,
		name: 'name7'
	},
	{
		id: 8,
		name: 'name8'
	},
	{
		id: 9,
		name: 'name9'
	}
]

const result = splitArr(arr, 2);

console.log(result);

希望本次分享的程式碼對你有所幫助，Thanks！！！

相關文章