React中如何对二维数组进行筛选？

在React应用中有如下二维数组，需基于第一列（企业名称列）进行筛选：

const rowData = [
  ['Capri LLC', '0012345', 'A0012', 'Y', 'View Details'],
  ['Capricorn INC', '0022345', 'B0012', 'N', 'View Details'],
  ['Cancer INC', '0033345', 'A0012', 'Y', 'View Details'],
  ['Gemini LLC', '0052345', 'C0012', 'Y', 'View Details'],
  ['Leo Land INC', '0052345', 'D0012', 'Y', 'View Details'],
  ['Capri LLC', '0012345', 'A0012', 'Y', 'View Details'],
  ['Capricorn INC', '0022345', 'B0012', 'N', 'View Details'],
  ['Cancer INC', '0033345', 'A0012', 'Y', 'View Details'],
  ['Gemini LLC', '0052345', 'C0012', 'Y', 'View Details'],
  ['Leo Land INC', '0052345', 'D0012', 'Y', 'View Details'],
];

当搜索“Capri”时，期望输出如下结果：

const filteredData = [
  ['Capri LLC', '0012345', 'A0012', 'Y', 'View Details'],
  ['Capricorn INC', '0022345', 'B0012', 'N', 'View Details'],
  ['Capri LLC', '0012345', 'A0012', 'Y', 'View Details'],
  ['Capricorn INC', '0022345', 'B0012', 'N', 'View Details'],
];

尝试使用一维数组的.filter()方法，但应用于二维数组时出现语法错误，寻求正确的实现方式。

解决方案 #

二维数组同样可以使用.filter()方法，核心是在回调函数中访问子数组的第一个元素（即企业名称），判断其是否包含搜索关键词即可。

实现代码 #

const searchKeyword = 'Capri';
const filteredData = rowData.filter(row => {
  // 取子数组第一列的企业名称，统一转小写实现不区分大小写的搜索
  return row[0].toLowerCase().includes(searchKeyword.toLowerCase());
});

关键说明 #

• .filter()会遍历二维数组的每个子数组row，row[0]就是对应行的企业名称
• 若需要严格区分大小写的搜索，直接去掉.toLowerCase()即可
• includes()方法用于判断字符串是否包含目标关键词，返回true的子数组会被保留到结果集合中

内容的提问来源于stack exchange，提问作者Kalpesh Tawde