微信小程序——for与foreach

目录

一、for语句

1、示例语法

2、示例代码

二、foreach语句

1、使用方法

2、多层嵌套

总结


        在微信小程序的开发之中,循环是我们不可避免的会遇到的东西,其中呢,我们使用最多的就是for语句和foreach语句了,今天我们来详细了解一下这两种语句的具体使用方法吧。

一、for语句

1、示例语法

for (语句; 语句; 语句)
  语句;

for (语句; 语句; 语句) {
  代码块;
}

其支持使用break、continue 关键词。

2、示例代码

for (var i = 0; i < 3; ++i) {
  console.log(i);
  if( i >= 1) break;
}

输出:

0
1

for语句的使用方法大致就是这样,各种编程语言的for循环语句都是一样的,所以我们就不做过多的讲述了,这里只是给一个简单的示范。

二、foreach语句

1、使用方法

allArr.forEach((item:any) => {
      console.log(item);
    });

此处allArr为你的数组,item为你的这个数组里面每一个元素的替代值,例如:allArr = [{1},{2},{3},{4}],则item分别为{1}、{2}、{3}、{4},然后在后面的{}则可以对数据进行处理。

2、多层嵌套

foreach作为一种循环语句,嵌套自然是每一个循环语句都要掌握的知识。

 /**
   * 处理数组
   */
  transformData(arrs: any, weekNumber: number, cache: any) {
    let professionArr = cache as any;
    let d = 0;
    // 创建新的数组
    let result: { item: any[]; }[] = [];
    // 初始化每一天的课程数组
    for (let i = 0; i < 7; i++) {
      let dayObj = {
        day: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][i],
        item: new Array(6) // 创建长度为6的课程数组
      };
      result.push(dayObj);
    }
    arrs.forEach((arr: any) => {
      let professionName = professionArr[d].zy;
      // 获取指定周数的课程数据
      let weekData = arr.week[weekNumber - 1].data;
      d++;
      // 遍历课程数据,将课程安排到新数组中对应的位置
      weekData.forEach((dayObj: { item: any; day: string; }) => {
        let myItems = dayObj.item;
        let dayOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'].indexOf(dayObj.day);//查找对应的日期
        let items: { num: any[]; zy: any; }[] = [];
        myItems.forEach((item: any) => {
          let num = item.num;
          if (num.length > 2) {
            let arr = num;
            for (let i = 0; i < num.length / 2; i++) {
              let myArr: any[] = [];
              myArr.push(arr[i * 2]);
              myArr.push(arr[i * 2 + 1]);
              let newItem = { ...item }; // 创建新的对象并复制属性值
              newItem.num = myArr;
              items.push(newItem);
            }
          } else {
            items.push(item);
          }
        });
        items.forEach((arrs: { num: any[]; zy: any; }) => {
          let startTime = arrs.num[0];
          let endTime = arrs.num[1];
          //将专业加到课程之中
          let zy = professionName;
          arrs.zy = zy;
          // 处理课程重叠
          for (let i = (startTime - 1) / 2; i <= (startTime - 1) / 2 + (endTime - startTime) / 2; i++) {
            if (!result[dayOfWeek].item[i]) {
              // 当前时间段没有安排课程,直接放置
              result[dayOfWeek].item[i] = {
                mergedItem: [result[dayOfWeek].item[i], arrs], // 重叠的课程的数组
              };
            } else {
              // 当前时间段有已安排的课程,处理重叠逻辑(例如合并、拆分等)
              result[dayOfWeek].item[i].mergedItem.push(arrs)//向其中推一个
            }
          }
        });
      });
    });
    return result;
  },

在此处我们可以看到我是使用了四个foreach语句对我们的数组进行了处理,其中就存在着foreach语句的嵌套。

总结

        就小编个人写小程序的代码来看的话,个人还是在处理数组的时候更喜欢foreach语句一些,它能给到开发者的根据小编的感觉来说,比for语句更加的便捷一些,开发者可以通过自定义的名字直接拿到数据,不需要像for语句中使用for循环中的比如:i,之类的数字来去到数组里面拿数据,当然这是小编自己的总结感受了,希望和各位一起变强呀!

### 微信小程序贪吃蛇游戏源码示例 #### 游戏界面布局 为了创建一个简单的微信小游戏——贪吃蛇,首先需要定义页面结构。在`index.wxml`文件中设置基本的游戏区域。 ```html <view class="game-board"> <block wx:for="{{board}}" wx:key="*this" wx:for-item="row"> <view class="row"> <block wx:for="{{row}}" wx:key="*this" wx:for-item="cell"> <view class="cell {{ cell === 'snake' ? 'snake-cell' : (cell === 'food' ? 'food-cell' : '') }}"></view> </block> </view> </block> </view> <button bindtap="startGame">Start Game</button> ``` 此部分代码构建了一个二维数组来表示游戏板,并通过循环渲染每个单元格的状态[^1]。 #### JavaScript逻辑处理 接下来,在`index.js`里编写主要业务逻辑: ```javascript Page({ data: { boardSize: 20, snake: [{ x: 1, y: 1 }], direction: "right", foodPosition: null, intervalId: null, board: Array.from({ length: this.boardSize }, () => Array(this.boardSize).fill(null)) }, onLoad() { this.generateFood(); }, generateFood() { let emptyCells = []; for (let i = 0; i < this.data.board.length; ++i) { for (let j = 0; j < this.data.board[i].length; ++j) { if (!this.isSnakePart(i, j)) { emptyCells.push([i, j]); } } } const randomIndex = Math.floor(Math.random() * emptyCells.length); this.setData({ ['foodPosition']: emptyCells[randomIndex], }); // 更新棋盘状态 this.updateBoardState(); }, updateBoardState(){ // 初始化空白棋盘 let newBoard = Array.from({ length: this.data.boardSize }, () => Array(this.data.boardSize).fill(null)); // 设置食物位置 if (this.data.foodPosition){ newBoard[this.data.foodPosition[0]][this.data.foodPosition[1]]='food'; } // 设置蛇身位置 this.data.snake.forEach(part=>{ newBoard[part.y][part.x]='snake'; }); this.setData({'board':newBoard}); }, startGame(e) { clearInterval(this.data.intervalId); function moveSnake() { // 移动逻辑... // 检查碰撞条件... // 如果未发生碰撞,则继续移动并更新UI this.updateBoardState(); // 否则结束游戏 }.bind(this) this.setData({ intervalId: setInterval(moveSnake.bind(this), 200), }) } }) ``` 上述脚本实现了初始化、生成食物以及启动游戏的核心功能[^2]。 #### 样式美化 最后不要忘了给游戏添加一些样式使其看起来更美观,在`index.wxss`加入如下CSS规则: ```css .game-board { display: grid; width: 400px; height: 400px; } .row { display: contents; } .cell { border: 1px solid black; width: calc(100% / var(--size)); aspect-ratio: 1; } .snake-cell { background-color: green; } .food-cell { background-color: red; } ``` 这段样式表设置了网格布局用于显示游戏面板中的方块,并根据不同类型的方块应用不同的背景颜色[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

日月为卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值