数组多值对比结果存储及按日期筛选在职员工报表开发技术问询

Got you covered on both of these tasks! Let's break them down with practical, actionable code examples that fit your use cases.

First, let's clarify what "multi-value对比" typically means here—usually comparing multiple properties of objects across two arrays, then storing matching or differing items in a new array. Here's a flexible approach for common scenarios:

Example: Find matches & differences across two arrays (comparing multiple fields) #

Suppose you have two arrays of employee objects, and you want to find employees that exist in both arrays (matching on id and department), plus items unique to each array:

const teamA = [
  { id: 1, name: "Alice", department: "Engineering" },
  { id: 2, name: "Bob", department: "Marketing" }
];

const teamB = [
  { id: 1, name: "Alice", department: "Engineering" },
  { id: 3, name: "Charlie", department: "Engineering" }
];

// Collect items that exist in both arrays (match on id + department)
const crossTeamMatches = teamA.filter(memberA => 
  teamB.some(memberB => 
    memberA.id === memberB.id && memberA.department === memberB.department
  )
);

// Collect items only present in teamA
const uniqueToTeamA = teamA.filter(memberA => 
  !teamB.some(memberB => 
    memberA.id === memberB.id && memberA.department === memberB.department
  )
);

console.log("Cross-team matches:", crossTeamMatches);
console.log("Unique to Team A:", uniqueToTeamA);

This uses filter and some to check for multi-property matches, then stores results in new arrays. Adjust the comparison conditions based on exactly which values you need to validate.

Since you already have formatted startDate and endDate as props, the core work is setting up the right filter logic based on the user's clicked date. Here's how to implement this in a React component (fitting your Reports component context):

import { useState } from 'react';

const Reports = ({ employees }) => {
  // Track the user's selected date (default to today)
  const [selectedDate, setSelectedDate] = useState(
    new Date().toISOString().split('T')[0]
  );

  // Filter logic to get active employees for the selected date
  const getActiveEmployees = () => {
    return employees.filter(employee => {
      // Convert all dates to Date objects for consistent comparison
      const start = new Date(employee.startDate);
      const end = employee.endDate ? new Date(employee.endDate) : null;
      const selected = new Date(selectedDate);

      // Key rules:
      // 1. Employee started on or before the selected date
      // 2. Either hasn't left yet (no end date) OR left after the selected date
      return start <= selected && (end === null || end > selected);
    });
  };

  const activeEmployees = getActiveEmployees();

  return (
    <div className="reports-container">
      {/* Date picker for user input */}
      <div className="date-picker">
        <label>Select Date:</label>
        <input
          type="date"
          value={selectedDate}
          onChange={(e) => setSelectedDate(e.target.value)}
        />
      </div>

      {/* Render filtered employee list */}
      <section className="active-staff-list">
        <h2>Active Employees as of {selectedDate}</h2>
        {activeEmployees.length === 0 ? (
          <p>No active employees found for this date.</p>
        ) : (
          <ul>
            {activeEmployees.map(emp => (
              <li key={emp.id}>
                {emp.name} | {emp.department} | Joined: {emp.startDate}
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
};

export default Reports;

Quick Logic Breakdown: #

• We handle employees who haven't left yet (no endDate) by treating them as permanently active until an end date is added.
• Converting all dates to Date objects avoids formatting mismatches, even if your props are string dates (as long as they're parseable by JavaScript's Date constructor).
• The native HTML5 date input returns dates in YYYY-MM-DD format—ensure your formatted startDate/endDate props match this, or tweak the conversion logic if needed.

内容的提问来源于stack exchange，提问作者Dženis H.