如何根据类型跳过循环迭代？JSX元素与字符串数组场景

当然可以，你完全可以通过判断元素的类型来跳过对象（包括JSX元素）类型的元素，只对字符串执行逻辑操作。以下是几种具体的实现方式：

补全你提供的for循环写法 #

const array = ['string', <div>JSX元素</div>, <p>另一个JSX</p>, 'string', 'string', <span>JSX</span>];
for (let i = 0; i < array.length ; i++) {
  // 判断是否为对象（含JSX元素），是则跳过当前迭代
  if (typeof array[i] === 'object' && array[i] !== null) {
    continue;
  }
  // 针对字符串的逻辑操作示例
  console.log('正在处理字符串:', array[i]);
}

更简洁的forEach遍历 #

array.forEach(item => {
  // 若为对象则直接返回，跳过后续逻辑
  if (typeof item === 'object' && item !== null) return;
  // 字符串逻辑操作
  console.log('正在处理字符串:', item);
});

先筛选再处理（更清晰） #

如果想先把所有字符串元素单独提取出来，再统一执行逻辑，用filter配合遍历会更直观：

// 筛选出数组中所有字符串类型的元素
const onlyStrings = array.filter(item => typeof item === 'string');
onlyStrings.forEach(str => {
  // 执行字符串相关逻辑
  console.log('正在处理字符串:', str);
});

注意事项 #

• JSX元素在JavaScript中本质是对象（由React.createElement返回的对象），所以用typeof判断会返回'object'。
• typeof null也会返回'object'，如果你的数组里可能存在null值，上述判断条件可以帮你排除它；如果确定数组中没有null，可以简化判断为typeof item === 'object'。

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