React项目需求：实现从数组中打印质数到控制台的函数

先实现高效的质数检测逻辑，再结合数组方法完成筛选与打印：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 质数检测函数：优化判断逻辑提升效率
function isPrime(n) {
  // 小于2的数直接排除
  if (n < 2) return false;
  // 2是唯一的偶质数
  if (n === 2) return true;
  // 偶数直接排除（除了2）
  if (n % 2 === 0) return false;
  // 仅需遍历到目标数的平方根，减少循环次数
  const sqrtN = Math.sqrt(n);
  for (let i = 3; i <= sqrtN; i += 2) {
    if (n % i === 0) return false;
  }
  return true;
}

function printPrimes(arr) {
  // 筛选数组中的质数
  const primes = arr.filter(num => isPrime(num));
  // 按预期格式打印到控制台
  console.log(primes.join('、'));
}

printPrimes(numbers); // 输出：2、3、5、7

核心逻辑说明 #

• 质数检测优化：通过排除偶数、仅遍历到目标数的平方根，避免了不必要的循环，比逐个检查所有小于n的数效率更高。
• 数组筛选与格式化：用filter方法快速筛选质数，再通过join把数组转为符合要求的字符串格式。

在React项目中的整合示例 #

在React组件中，可根据需求在合适时机调用该函数（比如组件挂载、用户交互触发）：

import { useEffect } from 'react';

function PrimeFilterComponent() {
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  function isPrime(n) {
    if (n < 2) return false;
    if (n === 2) return true;
    if (n % 2 === 0) return false;
    const sqrtN = Math.sqrt(n);
    for (let i = 3; i <= sqrtN; i += 2) {
      if (n % i === 0) return false;
    }
    return true;
  }

  function printPrimes(arr) {
    const primes = arr.filter(num => isPrime(num));
    console.log(primes.join('、'));
  }

  // 组件挂载时自动执行
  useEffect(() => {
    printPrimes(numbers);
  }, []);

  // 也可通过按钮点击触发
  const handlePrint = () => {
    printPrimes(numbers);
  };

  return (
    <div>
      <button onClick={handlePrint}>打印数组中的质数</button>
    </div>
  );
}

export default PrimeFilterComponent;

内容的提问来源于stack exchange，提问作者Luis Colon