每日一题：燃烧你的卡路里

介绍

为了瘦，为了美，为了穿衣服好看，小蓝决定减肥，管住嘴迈开腿，燃烧卡路里不止需要运动，还需要合理制定饮食规划。

快来帮助小蓝完成减脂饮食规划吧。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
6
7
8
9
├── css
├── img
│   └── food.png
├── index.html
├── js
│   └── index.js
├── lib
└── mock
    └── menu.json

其中：

  • index.html 是主页面。
  • css 是存放项目样式的文件夹。
  • images 是项目图片文件夹。
  • lib 是存放项目依赖 js 库的文件夹。
  • mock 是存放项目数据的文件夹。
  • js/index.js 是需要补充代码的 js 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
wget https://labfile.oss.aliyuncs.com/courses/16474/loseWeight.zip && unzip loseWeight.zip && rm loseWeight.zip

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

初始效果

目标

请在 js/index.js 和 index.html 文件中补全代码，完成以下目标：

  1. 点击“定制方案”按钮后，弹出侧滑页面，所使用的组件为 el-drawer，相关属性如下：
参数 说明 类型 默认值
v-model 是否显示 Drawer boolean false
  1. 封装 sortItem 函数，按照食物属性名称将早餐/午餐/晚餐的数组数据从大到小排序，然后找到排序后的数组中第一个不大于对应摄入量上限的食材对象，并将其返回。

sortItem 参数：

  • arr：早餐/午餐/晚餐的数据。
  • pro：食物属性名称，可取值 carbohydrate/protein/fat。
  • compare：糖类、蛋白质、脂肪的对应摄入量上限值，作为比较条件用的，已传入具体值。

sortItem 返回值示例

1
2
3
4
5
6
7
8
{
   "name": "鸡蛋",
   "carbohydrate": 1.5,
   "protein": 12.7,
   "fat": 9,
   "kcal": 138,
   "weight": 100
}

早餐/午餐/午餐中数据字段说明如下：

名称 说明
name 食材名称
carbohydrate 碳水化合物（单位：克）
protein 蛋白质（单位：克）
fat 脂肪（单位：克）
kcal 食物热量（单位：克）
weight 重量（单位：克）

完成后，点击定制方案按钮，效果如下：

完成效果

规定

  • 请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 344 | 总提交次数: 428 | 通过率: 80.4%

难度: 简单 标签: 2023, 省模拟赛, Web 前端, ElementUI

题解：

1
2
3
4
5
6
7
8
9
10
11
const sortItem = (arr, pro, compare) => {
        // TODO 根据 compare 匹配食材对象后返回这个对象
        console.log(arr);
        console.log(pro);
        console.log(compare);
        const sortArr = arr.sort((a,b) => { 
          return b[pro] - a[pro] 
        })
        console.log(sortArr);
        return sortArr.find(item => item[pro] <= compare)
    };