React中如何按数组对象name首字符是否为数字拆分出两个数组

代码问题汇总 #

• 重复声明teams变量：你先用useState声明了teams常量，后面又用const teams = [...]二次声明同个常量，JS会直接抛出语法错误，代码无法正常执行。
• 正则表达式格式错误：match方法传入的参数被包裹在单引号中变成了普通字符串，不是有效的正则对象，匹配逻辑完全失效。
• 匹配规则不符合需求：你写的正则/^[A-Z0-9]/i是匹配首字符为字母或者数字的内容，无法区分「首字符是数字」和「首字符是字母」两类数据。
• 第二个filter的判断逻辑错误：match方法返回的是匹配结果数组或者null，你直接拿obj.name（字符串类型）和匹配结果对比，永远不会相等，所以teamsWithOUTNumber永远是空数组。
• 你写的预期结果存在语法错误，数组中的对象缺了大括号和name属性，修改后的代码会按照正确结构输出结果。

修改方案 #

调整正则为匹配首字符是否为数字即可，同时避免重复声明变量，优化逻辑：

// 如果是使用模拟数据，直接把数组作为useState的初始值即可，不要重复声明teams
const [teams, setTeam] = useState([
  {id: 1, name: "1-First"},
  {id: 2, name: "Winner"},
  {id: 3, name: "2-Second"}
]);

// 首字符为数字的队伍
const teamsWithNumber = teams.filter(obj => /^\d/.test(obj.name));
// 首字符不为数字的队伍
const teamsWithOUTNumber = teams.filter(obj => !/^\d/.test(obj.name));

输出验证 #

执行后打印结果和预期完全一致：

console.log(teamsWithNumber)
// 输出：[{id: 1, name: "1-First"}, {id: 3, name: "2-Second"}]
console.log(teamsWithOUTNumber)
// 输出：[{id: 2, name: "Winner"}]

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