使用array.filter().map()返回jsx而不是空数组

Array.prototype.filter() 和 Array.prototype.map() 是 JavaScript 中非常常用的数组方法，它们分别用于过滤数组元素和映射数组元素到新的值。当你想要基于某些条件过滤数组，并对过滤后的每个元素执行某种转换时，这两个方法通常会被组合使用。

基础概念

filter(): 创建一个新数组，包含通过所提供函数实现的测试的所有元素。
map(): 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

优势

链式调用: 可以很方便地将 filter() 和 map() 方法链接在一起，使代码更加简洁和易读。
函数式编程: 这种组合体现了函数式编程的思想，即通过组合简单的函数来构建更复杂的操作。
性能优化: 在某些情况下，使用这些方法比传统的 for 循环更加高效，尤其是在处理大型数据集时。

类型

这两个方法都返回一个新的数组，不会改变原始数组。

应用场景

当你需要对数组中的元素进行筛选和转换时，例如：

过滤出满足特定条件的元素。
对过滤后的元素进行某种计算或转换。

示例代码

假设我们有一个包含对象的数组，我们想要过滤出年龄大于 18 的人，并将他们的名字转换为大写。

const people = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 25 }
];

const filteredAndMapped = people
  .filter(person => person.age > 18)
  .map(person => person.name.toUpperCase());

console.log(filteredAndMapped); // 输出: ['ALICE', 'CHARLIE']

遇到问题：返回 JSX 而不是空数组

如果你在使用 filter() 和 map() 方法时遇到了返回 JSX 而不是空数组的问题，可能是因为你的过滤条件没有匹配到任何元素，或者你的映射函数没有正确返回 JSX 元素。

原因

过滤条件不正确: 可能你的过滤条件过于严格，导致没有元素通过测试。
映射函数问题: 可能你的映射函数没有返回 JSX 或者返回了 undefined。

解决方法

检查过滤条件: 确保你的过滤条件是正确的，并且至少有一个元素能够通过测试。
确保映射函数返回 JSX: 在映射函数中，确保你返回了一个有效的 JSX 元素。

const people = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 25 }
];

const filteredAndMappedJSX = people
  .filter(person => person.age > 18)
  .map(person => <div key={person.name}>{person.name.toUpperCase()}</div>);

// 如果 filteredAndMappedJSX 是空数组，那么渲染时不会有任何 JSX 元素显示
// 如果你想在没有符合条件的元素时显示一些默认内容，可以这样做：
constjsxToRender = filteredAndMappedJSX.length > 0 ? filteredAndMappedJSX : <div>No one is over 18.</div>;

ReactDOM.render(jsxToRender, document.getElementById('root'));

在这个例子中，如果 filteredAndMappedJSX 是空数组，jsxToRender 将会是 <div>No one is over 18.</div>，这样即使没有符合条件的元素，也会有内容显示在页面上。