如何在React与JavaScript中遍历数组并将提取结果存入新数组

嘿，我来帮你搞定这个问题！你之前的代码只处理了数组的第一个元素，所以只能得到单个结果。要遍历整个数组并提取每个元素里斜杠后面的内容，有两种简单易懂的方法很适合新手：

方法一：用split分割字符串（直观好懂） #

这个方法不用正则，直接把每个字符串按斜杠拆分成数组，取最后一段就行，逻辑非常清晰：

const array = ["item1/1", "item2/3", "item3/4"];

const extractedArray = React.useMemo(() => {
  // 遍历数组里的每一项
  return array.map(item => {
    // 把字符串按斜杠分割，比如"item1/1"会变成["item1", "1"]
    const parts = item.split('/');
    // 取分割后的最后一个元素就是我们要的内容
    return parts[parts.length - 1];
  });
}, [array]);

// 最终extractedArray就是["1", "3", "4"]

方法二：用正则表达式匹配（适合复杂场景） #

如果以后遇到格式更复杂的字符串，正则会更灵活。我们可以调整正则规则，匹配每个元素最后一个斜杠后面的内容：

const array = ["item1/1", "item2/3", "item3/4"];

const extractedArray = React.useMemo(() => {
  return array.map(item => {
    // 正则匹配最后一个斜杠后的所有非斜杠字符
    const match = item.match(/\/([^/]+)$/);
    // 匹配到结果就返回捕获的内容，没匹配到返回空字符串避免报错
    return match ? match[1] : '';
  });
}, [array]);

关键说明： #

• array.map()是JS里专门用来遍历数组并生成新数组的方法，刚好满足你的需求——每个元素处理后自动存入新数组。
• 两种方法都能处理边界情况：数组为空时会返回空数组；如果某个元素没有斜杠，split方法会返回原字符串，正则方法会返回空字符串（你可以根据需求调整默认值）。

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