微信小程序项目实战遇到的问题

我们以学生成绩平台来作为例子。这是我们想得到的效果。

以下是完整代码:

index.js

// index.js
Page({
  //页面的初始数据
  data: {
    hello: '欢迎进入微信小程序的编程世界',
    score: 80,
    userArray: [{
        name: '张三',
        score: [66, 77, 86, 70, 90]
      },
      {
        name: '李四',
        score: [88, 76, 95, 84, 85]
      },
      {
        name: '王二',
        score: [80, 75, 90, 65, 59]
      },
      {
        name: '麻子',
        score: [82, 58, 75, 45, 57]
      }
    ],
    userIndex: -1, // 初始化为-1,表示还没有找到第一名
    totalScore: 0, // 初始化为0,表示还没有找到总分
  },

  modifyScore: function () {
    this.setData({
      score: 100
    });
  },

  modifyScore60: function () {
    for (var i = 0; i < this.data.userArray.length; i++) {
      for (var j = 0; j < this.data.userArray[i].score.length; j++) {
        var score = this.data.userArray[i].score[j];
        if (score >= 58 && score < 60) {
          this.setData({
            ["userArray[" + i + "].score[" + j + "]"]: 60
          });
        }
      }
    }
    console.log(this.data.userArray);
  },

  getFirstTotalScoreIndex: function () {
    var index = -1;
    var maxScore = -Infinity;

    for (var i = 0; i < this.data.userArray.length; i++) {
      
      var user = this.data.userArray[i];

      if (Array.isArray(user.score)) {    //检查是否是数组
        var sum = user.score.reduce((acc, cur) => acc + cur, 0);  
        //当我们执行 user.score.reduce((acc, cur) => acc + cur, 0); 时,它会对数组中的每个元素执行累加操作:
        if (sum > maxScore) {
          maxScore = sum;
          index = i;
        }
      }
    }

    return index;
  },

  getFailingStudents: function () {
    var FAIL_SCORE_THRESHOLD = 60;
    var failingStudents = [];
    this.data.userArray.forEach((user, index) => {            //forEach 方法遍历这个数组
      var failingCourses = user.score.filter(score => score < FAIL_SCORE_THRESHOLD);  //箭头函数作为 filter 方法的参数,它指定了一个条件。    
      //它的意思是对于数组中的每个元素 score,只有当 score 的值小于 FAIL_SCORE_THRESHOLD 时,该元素才会被保留到新数组 failingCourses 中。
      if (failingCourses.length > 0) {
        failingStudents.push({ name: user.name, count: failingCourses.length });  //每次循环就把东西传入到挂科的同学
      }
    }
    );
    return failingStudents;
  },


  onLoad: function (options) {
    var firstIndex = this.getFirstTotalScoreIndex();

    if (firstIndex !== -1) {
      var totalScore = this.data.userArray[firstIndex].score.reduce((acc, cur) => acc + cur, 0);
      this.setData({
        userIndex: firstIndex,
        totalScore: totalScore,
      });
    }

    var failingStudents = this.getFailingStudents();
    this.setData({
      failingStudents
    });
  },

  //其他生命周期函数和事件处理函数...
});

index.wxml

<view>{{hello}}</view>
<view>你希望小程序考{{score}}分。
</view>
<button bindtap="modifyScore">修改分数</button>
<button bindtap="modifyScore60">改58、59为60</button>

<view>
  <text>班级第一名:{{userArray[userIndex].name}}, 总分:{{totalScore}}</text>
</view>

<view>
  <!-- 显示挂科学生信息 -->
  <block wx:for="{{failingStudents}}" wx:key="index">
    <text>有挂科的同学:{{item.name}},有{{item.count}}门课挂科。</text>
  </block>
  <!-- 如果没有挂科学生,显示相应信息 -->
  <text wx:if="{{failingStudents.length === 0}}">没有学生挂科。</text>
</view>

理清楚它为什么这么写。

user.score是分数的数组,比如[66, 77, 86, 70, 90]

先介绍一下reduce((acc, cur) => acc + cur, 0)   

        对于数组中的每个元素,回调函数中的acc表示累加器,pcur表示当前元素。初始值0被作为第一次调用回调函数时的累加器的值。  总而言之,该行代码会返回数组[66, 77, 86, 70, 90]的总和。

filter 方法在使用回调函数的过程中,遍历数组的每个元素,并返回满足条件的元素组成的新数组。

score => score < 60 是一个箭头函数作为 filter 方法的参数,它指定了一个条件。它的意思是对于数组中的每个元素 score只有当 score 的值小于 FAIL_SCORE_THRESHOLD 时,该元素才会被保留到新数组 failingCourses 中。

还有一点,在调用方法的时候,不是像python、c一样的逻辑,需要在本页面找寻方法,使用this

还有,failingStudents是一个数组。通过 wx:for="{{failingStudents}}" 循环遍历这个数组。

在这种情况下,item 是在 wx:for 循环中当前迭代的对象,在这种情况下,item 是在 wx:for 循环中当前迭代的对象。

因此,item.name 实际上表示当前迭代对象(学生对象)的 name 属性,即当前学生的名字。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/469175.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

中国传统游戏-幻方-c/c++实现

幻方&#xff08;Magic Square&#xff09;是一种将数字安排在正方形格子中&#xff0c;使每行、列和对角线上的数字和都相等的方法。 幻方也是一种中国传统游戏。旧时在官府、学堂多见。它是将从一到若干个数的自然数排成纵横各为若干个数的正方形&#xff0c;使在同一行、同…

由浅到深认识Java语言(2):Java语言概述

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…

CSS案例-4.padding导航栏练习

效果 相关数据: 上边框:3px,颜色#ff8500 下边框:1px,颜色#edeef0 背景颜色:#fcfcfc 高度:41px 内边距20px 字体颜色#4c4c4c 知识点 盒子边框border 属性 作用 border-width 定义边框粗细,单位px border-style 边框的样式 border-color 边框颜色 边框样式

拿捏指针(三)

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 前言 在这之前我们学习了《拿捏指针&#xff08;一&#xff09;》&#xff0c;《拿…

Ansible基本介绍与模块使用

目录 引言 一、Ansible简介 &#xff08;一&#xff09;基本概述 &#xff08;二&#xff09;主要特点 二、Ansible安装及基本组件 &#xff08;一&#xff09;yum安装 &#xff08;二&#xff09;编译安装 &#xff08;三&#xff09;基本配置信息 1.主配置文件 2.主…

【Linux】自动化构建工具-make/Makefile

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. 认识make/Makefile3. 了解make/Makefile原理3.1 依赖关系和依赖方法3.2 make检测的顺序3.3 PHONY:XXX 4. makefile内置符号 1. 前言 在上一篇中已经了解了【Linux】编译器-gcc/g使用&#xff0c;这次来一起…

01|模型IO:输入提示、调用模型、解析输出

Model I/O 可以把对模型的使用过程拆解成三块&#xff0c;分别是输入提示&#xff08;对应图中的Format&#xff09;、调用模型&#xff08;对应图中的Predict&#xff09;和输出解析&#xff08;对应图中的Parse&#xff09;。这三块形成了一个整体&#xff0c;因此在LangCha…

idea将非UTF-8的properties修改为UTF-8编码的文件

需求背景 由于项目初始化时&#xff0c;properties文件的编码格式为ASCII编码格式&#xff0c;此时用idea打开该文件会默认展示UTF-8的编码内容&#xff0c;其中汉字可以正常展示&#xff0c;但是使用notepad打开却依旧时ASCII编码格式 idea配置 打开idea-setting-editor-f…

TCP - 传输控制协议

TCP - 传输控制协议 是一种面向连接的可靠传输协议。 特点&#xff1a; TCP是面向连接&#xff08;虚连接&#xff09;的传输层协议。 每一条TCP连接有且只能有两个端点。 可靠、有序、无丢弃和不重复。 TCP协议提供全双工通讯。 发送缓存 存放发送方TCP准备发送的数据。T…

Springboot笔记-01

简化spring应用开发&#xff0c;约定大于配置 简化Spring应用开发的一个框架&#xff1b; 整个Spring技术栈的一个大整合&#xff1b; J2EE开发的一站式解决方案&#xff1b; 优点&#xff1a; 快速创建独立运行的spring项目以及于主流框架集成 使用嵌入式的Servlet容器&#x…

Reactor线程模型

线程模型 一、背景1.socket网络通信2.IO模型与线程模型3.线程模型分类3.1 阻塞模型3.2 Reactor模型3.3 Proactor模式 二、阻塞模型1.代码示例 三、Reactor模型1.单Reactor单线程1.1 处理过程1.2 优缺点1.3 代码示例 2.单Reactor多线程2.1 处理机制2.2 优缺点 3.主从Reactor3.1 …

深度学习_卷积

卷积 卷积&#xff08;Convolution&#xff09;是数学和计算机科学中的一个重要概念&#xff0c;特别在信号处理和图像处理中应用广泛。在信号处理领域&#xff0c;卷积是两个函数之间的一种数学操作&#xff0c;它表示两个函数的重叠部分的积分量。 在图像处理中&#xff0c…

JavaScript数组排序sort自定义函数不生效

背景 刷LeetCode时&#xff0c;遇到一道简单的数组排序题&#xff1a; 问题 想着直接用js的数组sort自定义排序即可&#xff0c;奈何测试用例运行总是不通过&#xff0c;返回的一直都是原数组。 代码排查 复制代码到Firefox浏览器控制台运行&#xff0c;结果输出的是正确结果&a…

搭建Hadoop集群(完全分布式运行模式)

目录 一、准备模板机(最小化安装)二、配置一台纯净的模板机修改主机名固定IP地址通过yum安装方式安装必要的软件关闭防火墙且禁止自启修改hosts映射文件创建普通用户 并让他能用sudo命令在/opt下创建software和module完成 三、搭建完全分布式运行模式3.1克隆第一台机器hadoop10…

基于PCA(主成分分析)的人面识别,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

Vue学习日记 Day7 —— json-server工具、基于VueCli自定义创建项目、postcss插件

一、前一天Vuex总结 1、state作用&#xff1a;存放数据定义&#xff1a;state:{//数据 }使用&#xff1a;//放在data下(1)根节点直接访问this.$store.state.数据名(2)模块直接访问this.$store.state.模块名.数据名(3)根节点辅助函数mapState([所需要的数据])(4)模块辅助…

JDK21虚拟线程

目录 虚拟线程 话题 什么是平台线程&#xff1f; 什么是虚拟线程&#xff1f; 为什么要使用虚拟线程&#xff1f; 创建和运行虚拟线程 使用线程类和线程创建虚拟线程。生成器界面 使用Executor.newVirtualThreadPerTaskExecutor&#xff08;&#xff09;方法创建和运行…

【一】【单片机】有关LED的实验

点亮一个LED灯 根据LED模块原理图&#xff0c;我们可以知道&#xff0c;通过控制P20、P21...P27这八个位置的高低电平&#xff0c;可以实现D1~D8八个LED灯的亮灭。VCC接的是高电平&#xff0c;如果P20接的是低电平&#xff0c;那么D1就可以亮。如果P20接的是高电平&#xff0c;…

CSS基础属性(学习笔记)

一、CSS介绍 CSS即层叠样式表/级联样式表&#xff0c;简称样式表 html&#xff1a;写网页结构内容 css&#xff1a;写网页样式 实现了内容与表现的分离&#xff0c;提高了代码的重用性和维护性 CSS注释不被浏览器解析&#xff0c;给开发人员一个标注 快捷键&#xff1a;ctrl/ 语…

YOLOv5独家改进:block改进 | RepViTBlock和C3进行结合实现二次创新 | CVPR2024清华RepViT

💡💡💡本文独家改进:CVPR2024 清华提出RepViT:轻量级新主干!从ViT角度重新审视移动CNN,RepViTBlock和C3进行结合实现二次创新 改进结构图如下: 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/category_12511931.html 💡💡💡全网独家首发创…