JavaScript如何查找数组指定元素？React中统计数组完成项数量的方法

实现方案 #

find() 方法仅返回第一个符合匹配条件的单条数据，无法获取全部符合条件的条目，也不能直接统计总数。
你可以直接使用数组的 filter() 方法实现需求，该方法会返回所有符合条件的元素组成的新数组，不会修改原数组，符合React状态的不可变原则。统计数量直接取筛选后数组的length属性即可。

基础用法示例 #

// 筛选所有已完成条目到新数组
const completedTasks = tasks.filter(task => task.completed === true)
// 直接通过数组长度获取完成条目的count
const completedCount = completedTasks.length

React 组件内优化写法 #

如果是在React组件内使用，推荐搭配useMemo缓存计算结果，避免每次组件渲染都重复执行筛选逻辑，提升性能：

import { useState, useMemo } from 'react'

function TaskComponent() {
  const [tasks, setTasks] = useState([
    {
      id: 1, 
      text: "去湖边", 
      reminder: false,
      time: '08:00',
      completed: false
    },
    {
      id: 2, 
      text: "提交代码到github", 
      reminder: true,
      time: '13:00',
      completed: false
    },
    {
      id: 3, 
      text: "买杂货", 
      reminder: false,
      time: '15:00',
      completed: false
    },
  ])

  // 仅当tasks数组变化时才重新计算已完成条目和数量
  const { completedTasks, completedCount } = useMemo(() => {
    const filteredCompleted = tasks.filter(task => task.completed)
    return {
      completedTasks: filteredCompleted,
      completedCount: filteredCompleted.length
    }
  }, [tasks])

  // 渲染示例
  return (
    <div>
      <p>已完成任务总数：{completedCount}</p>
      <div>
        {completedTasks.map(task => (
          <div key={task.id}>
            {task.time} - {task.text}
          </div>
        ))}
      </div>
    </div>
  )
}

精简计数方案 #

如果不需要保留已完成的条目数组，只需要统计数量，可以直接用reduce方法一次性计算：

const completedCount = tasks.reduce((count, task) => task.completed ? count + 1 : count, 0)

内容的提问来源于stack exchange，提问作者Ramazan Erikli