算法：将一维数组转变为二维数组

在做项目的时候遇到一个将一维数组转为二维数组的问题。应用到的问题是这样的。我需要做一个轮播的一个页面里嵌套着多个item选择项。……说的苍白无力。图↓

这个时候需要接收一个二维数组，用swiper嵌套在外面，循环遍历里面的数组。这不是重点……问题在于接口里拿到的是一维数组，如何将一维数组转为二维数组嘞……

介里……↓（以uni-app为例）
现在data中定义两个列表，一个用于接收接口拿来的一维数组列表，另一个用于存放转成二位之后的数组列表

data() {
		return {
			//这个是给接口传递的参数，不是重点
			queryInfo: {
				name: '',
				pageNum: 1,
				pageSize: 100
			},
			// 银行列表，这里这里才是定义的量的数组列表！！！
			bankList: [],
			newBankList: [],
			}
		}

先在methods方法中设置获取接口数据的方法

methods:{
		// 获取银行列表
		async getBank() {
			//这里的/api/bankClass接口是我的，你们根据个人情况自己放自己的咯！！this.queryInfo是传递的参数……吧
			const res = await this.$http.get('/api/bankClass', this.queryInfo);
			//此处判断是否获取数据，如果code不正确，就会toast错误
			if (res.code !== 0) {
				return uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
			//这里接口的数组列表数据传值给刚定义的一维数组列表
			this.bankList = res.data.data;
		},
	}

接着，在onLoad方法中初始化获取接口数据的方法

onLoad() {
		this.getBank();
	},

……接下来是重点：将一维数组转化为二维数组
同样在methods方法中写入(注意是异步的！异步的！异步的！)

	// 对获取到的银行列表数据进行重新组合
		async trimData() {
			//调用刚刚的getBank方法，已将bankList赋上了接口的数据
			await this.getBank();
			//在方法中定义一个空的子数组列表
			let childBankList = [];
			//这个是在data中定义的列表，此处为了方便，又定义给newBankList
			let newBankList = this.newBankList;
			//当从接口拿的bankList数组列表有数据时
			if (this.bankList.length > 0) {
				//就循环遍历该数组列表
				this.bankList.forEach((val, index) => {
					//将遍历的值追加给子列表
					childBankList.push(val);
					//此处的12代表一个页面展示多少个小数据。12个数据组成一个数组，
					//12个数据的数组外面在包裹一个大数组，便成了二维数组
					if ((index + 1) % 12 == 0) {
						//这里把追加在子数组里面的12条数据再追加在新的数组里面
						newBankList.push(childBankList);
						//并将子数组里的12条数据清空，再次循环遍历
						childBankList = [];
					}
					//这里出现一种情况，循环遍历的最后一组数据小于12，那就不会走上一个条件了，
					//这里当循环到最后一条数据的时候，他的下标数加一  一定会！ 等于 原来的一维数组的长度，
					//满足这个条件时，走下面的语句
					if (index + 1 == this.bankList.length) {
						//这里要判断子数组里是否还存在数据，如果不存在直接跳出循环
						if (childBankList.length > 0) {
							//当还存在数据的时候，将剩余的最后几个不足12条数组数据全部追加给newBankList
							newBankList.push(childBankList);
						}
					}
				});
			}
		},

这样newBankList里面存放的就是二位数组，bankList存放的是一维数组列表

最后给你们看看我是怎么实现上图的效果的，利用了swiper轮播和uview的宫格布局

<!-- 银行列表 -->
	<view class="pt-2 px-2">
		<swiper :style="'height:' + scrollswiper + 'px;'" indicator-dots indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#FFFFFF">
			<swiper-item v-for="(item, index) in newBankList" :key="index">
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item1, index1) in item" :key="index1" :customStyle="customStyle(index1)">
						<!-- <u-avatar :src="item1.iconUrl"></u-avatar> -->
						<view class="px-5 rounded-10" :style="myColor(index1)" @click="chooseBank(index, index1)">
							<view :style="'height:' + scrollItemH + 'px'" class="d-flex flex-column j-center a-center">
								<u-image :src="item1.iconUrl" width="120" height="120" mode="scaleToFill"></u-image>
								<view class="text-white">
									<text>{{ item1.name }}</text>
								</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
	</view>

😊😊😊😊😊😊😊😊😊😊
★,°:.☆(￣▽￣)/$:.°★ 。