React中实现数组字符串部分匹配：筛选A中匹配B的元素

我来帮你搞定这个需求，下面是React里的具体实现方法，包含完整的组件示例和逻辑说明：

核心匹配逻辑 #

我们的核心目标是从数组A里筛选出所有满足「存在数组B中的某一项（不区分大小写）是其部分子串」的元素。可以结合数组的filter和some方法，再通过统一大小写来避免大小写敏感问题，核心逻辑代码如下：

const getMatchedItems = (arrA, arrB) => {
  return arrA.filter(itemA => {
    // 统一转为小写，消除大小写差异
    const lowerCaseItemA = itemA.toLowerCase();
    // 检查B中是否有任意一项是当前A元素的子串
    return arrB.some(itemB => lowerCaseItemA.includes(itemB.toLowerCase()));
  });
};

完整React组件示例 #

下面是一个可以直接运行的函数组件，包含数据定义、结果计算和页面渲染：

import React from 'react';

const MatchingStringsComponent = () => {
  // 定义题目中的输入数组
  const arrayA = ['Battery mAh', 'Ram', 'Camera', 'Screen', 'Storage(GB)'];
  const arrayB = ['battery', 'ram', 'storage', 'Processor'];

  // 计算匹配结果
  const matchedItems = arrayA.filter(itemA => {
    const lowerA = itemA.toLowerCase();
    return arrayB.some(itemB => lowerA.includes(itemB.toLowerCase()));
  });

  return (
    <div style={{ padding: '20px' }}>
      <h3>匹配到的字符串</h3>
      <ul style={{ listStyleType: 'none', paddingLeft: 0 }}>
        {matchedItems.map((item, idx) => (
          <li key={idx} style={{ margin: '8px 0', padding: '6px', borderBottom: '1px solid #eee' }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MatchingStringsComponent;

关键细节说明 #

• 大小写兼容：通过toLowerCase()把两个数组的元素都转为小写，确保像'Battery'和'battery'这类大小写不同的字符串能成功匹配
• 部分匹配判断：使用includes()方法检查B中的元素是否是A元素的子串，完美满足题目要求的「部分匹配」逻辑
• 高效筛选：filter负责遍历并筛选A数组，some负责判断当前A元素是否存在对应的B元素匹配，两者结合可以高效完成筛选工作

运行这个组件后，页面会渲染出你期望的结果：Battery mAh、Ram、Storage(GB)。

内容的提问来源于stack exchange，提问作者Nazmul Hasan