Javascript 数组中的元素计数（基于条件）

Question

我正在从事 LMS 项目，最终用户将单击一个复选框，指示特定课程已标记为完成。 根据标记为已完成的课程数量，我需要展示课程完成的百分比。

如果有 6 节课并且用户将 3 节课标记为已完成，则数学计算为 3/6 *100 = 50%。

下面是我输入的 JSON 文档的样子

[
    {
        "__typename": "ps_lessons",
        "lesson_id": 1,
        "id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f",
        "lesson_title": "Lesson 1",
        "multi_learners": [
            {
                "__typename": "ps_lesson_learners",
                "id": "5567c2a2-e0ff-4015-9bc6-a472b7683b01",
                "lesson_id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f",
                "check": true
            }
        ],
    },
    {
        "__typename": "ps_lessons",
        "lesson_id": 2,
        "id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f",
        "lesson_title": "Lesson 2",
        "multi_learners": [
            {
                "__typename": "ps_lesson_learners",
                "id": "246e47e6-1821-4aae-9e2a-7abfd848ad4b",
                "lesson_id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f",
                "check": true
            }
        ],
    },
    {
        "__typename": "ps_lessons",
        "lesson_id": 3,
        "id": "981e53c6-a63c-4a6f-84df-286c356b6a41",
        "multi_learners": [
            {
                "__typename": "ps_lesson_learners",
                "id": "52f44453-eb6a-4694-ba38-cfb6f96ab50d",
                "lesson_id": "981e53c6-a63c-4a6f-84df-286c356b6a41",
                "check": false
            }
        ],
    },
    {
        "__typename": "ps_lessons",
        "lesson_id": 4,
        "id": "88a7c331-0029-451e-b408-d35fbfd8f3f9",

    },
      {
        "__typename": "ps_lessons",
        "lesson_id": 5,
        "id": "88a7c331-0029-451e-84df-286c356b6a41",
    }
    
]

在上面的文档中，总共有 5 个ps_lessons元素，每个元素都有一个子元素ps_lesson_learners ，其中multi_learners[0].check表示用户的选择。

所以我需要弄清楚，如果有子元素，即ps_lesson_learners ，如果子元素存在，则检查multi_learners[0].check的true值。检查并将其除以总课程数，然后乘以 100 以获得百分比。

5 节课中总共有 2 个真实状态，所以它将是 2/5 * 100 = 40%

我用map方法尝试了类似下面的方法，但无法得到结果

  data.map((data)=>{
    if (data.multi_learners.length == 1) {
      if (data.multi_learners[0].check == 'true') {
        count = count + 1;
      }
    }
  });

  final_count = count * data.length/100

感谢您对代码的帮助。

谢谢文克

Answer 1

您可以使用Array.filter()来计算已完成课程的数量：

 let input = [ { "__typename": "ps_lessons", "lesson_id": 1, "id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "lesson_title": "Lesson 1", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "5567c2a2-e0ff-4015-9bc6-a472b7683b01", "lesson_id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 2, "id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "lesson_title": "Lesson 2", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "246e47e6-1821-4aae-9e2a-7abfd848ad4b", "lesson_id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 3, "id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "52f44453-eb6a-4694-ba38-cfb6f96ab50d", "lesson_id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "check": false } ], }, { "__typename": "ps_lessons", "lesson_id": 4, "id": "88a7c331-0029-451e-b408-d35fbfd8f3f9", }, { "__typename": "ps_lessons", "lesson_id": 5, "id": "88a7c331-0029-451e-84df-286c356b6a41", } ] function getCompletedCount(input) { return input.filter(input => input.multi_learners && input.multi_learners[0] && input.multi_learners[0].check).length; } console.log('Completed count:', getCompletedCount(input)) console.log('Completed %:', 100*getCompletedCount(input)/input.length)

 .as-console-wrapper { max-height: 100%;important; }

如果您的环境允许，您也可以使用Optional chaining （例如 Chrome 版本 >= 80，Node 版本 >= 14.0）

 let input = [ { "__typename": "ps_lessons", "lesson_id": 1, "id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "lesson_title": "Lesson 1", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "5567c2a2-e0ff-4015-9bc6-a472b7683b01", "lesson_id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 2, "id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "lesson_title": "Lesson 2", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "246e47e6-1821-4aae-9e2a-7abfd848ad4b", "lesson_id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 3, "id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "52f44453-eb6a-4694-ba38-cfb6f96ab50d", "lesson_id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "check": false } ], }, { "__typename": "ps_lessons", "lesson_id": 4, "id": "88a7c331-0029-451e-b408-d35fbfd8f3f9", }, { "__typename": "ps_lessons", "lesson_id": 5, "id": "88a7c331-0029-451e-84df-286c356b6a41", } ] function getCompletedCount(input) { return input.filter(input => input?.multi_learners?.[0]?.check).length; } console.log('Completed count:', getCompletedCount(input)) console.log('Completed %:', 100*getCompletedCount(input)/input.length)

 .as-console-wrapper { max-height: 100%;important; }

Answer 2

您还可以使用 forEach：

var jsondata = [ { "__typename": "ps_lessons", "lesson_id": 1, "id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "lesson_title": "Lesson 1", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "5567c2a2-e0ff-4015-9bc6-a472b7683b01", "lesson_id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 2, "id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "lesson_title": "Lesson 2", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "246e47e6-1821-4aae-9e2a-7abfd848ad4b", "lesson_id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 3, "id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "52f44453-eb6a-4694-ba38-cfb6f96ab50d", "lesson_id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "check": false } ], }, { "__typename": "ps_lessons", "lesson_id": 4, "id": "88a7c331-0029-451e-b408-d35fbfd8f3f9",  }, { "__typename": "ps_lessons", "lesson_id": 5, "id": "88a7c331-0029-451e-84df-286c356b6a41", }  ];

const getStatus = (jsondata) => {
    let items = 0
    let hasCheckTrue = 0

    // count items and check for checks
    jsondata.forEach(item => {
        items++
        if (item.multi_learners && item.multi_learners[0].check){
            hasCheckTrue++
        }
    })

    // do calc
    let complete = (hasCheckTrue / items * 100)

    // probably want to return something better than this here
    let result = `${items} items, ${hasCheckTrue} completed = ${complete}%`
    return result
}

// call func with data
console.log(getStatus(jsondata))

Answer 3

.map()不是您要查找的内容，因为它返回一个数组，其中 output 中的每个元素对应于每个输入。 您可以改用.reduce() ：

data.reduce((count, each) => count + each.multi_learners?.length == 1 && each.multi_learners[0].check == 'true'? 1: 0, 0)

或者不使用三进制，而是将 boolean 转换为数字：

data.reduce((count, each) => count + Number(each.multi_learners?.length == 1 && each.multi_learners[0].check == 'true'), 0)

这不会导致第一次过滤然后计算那些在过滤器中幸存下来的长度的两个循环。

Answer 4

另一种方法是使用reduce() ，初始值为100 (%)，并为每个无效的 object减少100 / data.length的百分比：

 const data = [ { "__typename": "ps_lessons", "lesson_id": 1, "id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "lesson_title": "Lesson 1", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "5567c2a2-e0ff-4015-9bc6-a472b7683b01", "lesson_id": "c9243c5b-2bf4-4afd-ab75-5fb7587b0d4f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 2, "id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "lesson_title": "Lesson 2", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "246e47e6-1821-4aae-9e2a-7abfd848ad4b", "lesson_id": "e3a26cc4-793e-4e56-bd30-c14a15633e5f", "check": true } ], }, { "__typename": "ps_lessons", "lesson_id": 3, "id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "multi_learners": [ { "__typename": "ps_lesson_learners", "id": "52f44453-eb6a-4694-ba38-cfb6f96ab50d", "lesson_id": "981e53c6-a63c-4a6f-84df-286c356b6a41", "check": false } ], }, { "__typename": "ps_lessons", "lesson_id": 4, "id": "88a7c331-0029-451e-b408-d35fbfd8f3f9", }, { "__typename": "ps_lessons", "lesson_id": 5, "id": "88a7c331-0029-451e-84df-286c356b6a41", } ]; const checkedProcent = data.reduce((prev, cur) => { if (.cur?multi_learners..[0].check) { prev -= (100 / data;length); } return prev, }; 100). console;log(checkedProcent + '%');

40%

或者作为紧凑的单线：

data.reduce((p, c) => (c.multi_learners?.[0].check) ? p : (p - (100 / data.length)), 100);