将一组值映射到百分比答案

【问题标题】：Map an array of values to percentages将一组值映射到百分比
【发布时间】：2021-02-21 15:01:57
【问题描述】：

为什么 map 不能在这些数组上工作？如何把这个数组变成百分比？

我正在尝试映射并解析从 API 返回的多个数组，但它仅映射每个数组中的第一个字符串，然后将其余字符串作为 NaN 返回。

我怀疑 forloop 可能会干扰地图的功能，但我不知道如何解决这个问题。

此外，当我检查数组上的数据类型时，它会作为对象返回。我的目标是从给定的 8 个数字中取平均值，以百分比表示。

const apiInfo = $(".info");

function init() {
  $.ajax({
    url: "https://api.hatchways.io/assessment/students",
    method: "GET",
  }).then(function (res) {

    for (let i = 0; i < res.students.length; i++) {
      var curr = res.students[i];

      if (curr.id.includes("")) {

        $(".info");
        let img = $(
          "<img class='pPic float-left m-3' src='" +
            res.students[i].pic +
            "'alt = 'profile pic'>"
        );
        let title = res.students[i].firstName + " " + res.students[i].lastName;
        let email = res.students[i].email;
        let company = res.students[i].company;
        let skill = res.students[i].skill;

        let sGrades = res.students[i].grades

        console.log(typeof(sGrades))

        let x = sGrades.map(parseInt)

        let average = ""

        console.log(sGrades, x);

        let list = $("<div class='infoB'>");
        list.append(img);
        list.append("<h4 class='title'>" + title + "<h4>");
        list.append("<p class='mb-1 stats'> email: " + email + "</p>");
        list.append("<p class='mb-1 stats'> comapny: " + company + "</p>");
        list.append("<p class='mb-1 stats'> skill: " + skill + "</p>");
        list.append("<p class='mb-1 stats'> average: " + average + "</p>");

        $(".info").append(list);
      }
    }
  });
}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="info card scroll shadow p-3 mb-5 bg-white rounded"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

【问题讨论】：

我认为parseInt 实际上是如何进行隐式映射的。我刚刚在我的控制台中尝试过，我也得到了NaN。你能不能把它改成这样：let x sGrades.map(num => parseInt(num))
这可以将它们全部变成数字！谢谢！现在我只是将它们全部转换为百分比的问题！哈哈
百分比是什么意思？平均满分100？如果是，您可以使用sGrades.reduce((acc, ch)=> acc + parseInt(ch), 0) / sGrades.length。会给你平均值。

标签： javascript html jquery arrays function

【解决方案1】：

您可以通过以下方式平均这些值：

const avg = (arr) => arr.reduce((acc, val) => acc + val, 0) / arr.length;

您可以通过以下方式调用上述函数：

avg(student.grades.map(grade => parseInt(grade, 10)));

我还建议使用template literals 来构建您的输出 HTML。

演示

const apiInfo = $('.info');
const avg = (arr) => arr.reduce((acc, val) => acc + val, 0) / arr.length;

const renderStudentInfo = (student, $target) => {
  const fullName = student.firstName + ' ' + student.lastName,
    average = avg(student.grades.map(grade => parseInt(grade, 10)));
  $target.append($(`
    <div class="infoB">
      <img class="pPic float-left m-3"
        src="${student.pic}" alt="profile pic" />
      <h4 class="title">${fullName}</h4>
      <p class="mb-1 stats">Email: ${student.email}</p>
      <p class="mb-1 stats">Company: ${student.company}</p>
      <p class="mb-1 stats">Skill: ${student.skill}</p>
      <p class="mb-1 stats">Average: ${average.toFixed(2)}%</p>
    </div>
  `));
};

const init = () => {
  $.ajax({
    url: 'https://api.hatchways.io/assessment/students',
    method: 'GET',
  }).then(({ students }) => {
    students.forEach((student) => {
      if (student.id.includes('')) {
        renderStudentInfo(student, apiInfo);
      }
    });
  });
}

init();

.infoB {
  margin-bottom: 1em;
}

.infoB .title {
  font-weight: bold;
}

.infoB .mb-1.stats {
  color: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container">
  <div class="info card scroll shadow p-3 mb-5 bg-white rounded"></div>
</div>

【讨论】：

【解决方案2】：

您没有为地图提供适当的回调函数。尝试将该行更改为此

let x = sGrades.map((v) => `${parseInt(v)}%`)

但这会返回一个字符串数组。

【讨论】：