首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

array.filter未返回reactjs中父数组的嵌套数组

在ReactJS中,array.filter()是一个用于数组的高阶函数,它用于过滤数组中的元素并返回一个新的数组。然而,当过滤的数组是父数组中的嵌套数组时,array.filter()并不能直接返回父数组的嵌套数组。

为了解决这个问题,我们可以使用递归或使用Array.prototype.map()方法来处理嵌套数组的过滤。

使用递归方法,可以创建一个递归函数来遍历父数组和嵌套数组,并在遍历过程中使用array.filter()来过滤嵌套数组。以下是一个示例代码:

代码语言:txt
复制
function filterNestedArray(arr, predicate) {
  return arr.reduce((acc, curr) => {
    if (Array.isArray(curr)) {
      const filteredNestedArray = filterNestedArray(curr, predicate);
      if (filteredNestedArray.length > 0) {
        acc.push(filteredNestedArray);
      }
    } else if (predicate(curr)) {
      acc.push(curr);
    }
    return acc;
  }, []);
}

const nestedArray = [1, 2, [3, 4, [5, 6]], 7, [8, 9]];
const filteredArray = filterNestedArray(nestedArray, num => num % 2 === 0);
console.log(filteredArray); // 输出 [2, 4, 6, 8]

在上面的示例中,filterNestedArray()函数采用了递归的方式遍历了父数组和嵌套数组,并使用predicate函数来过滤符合条件的元素。最后,返回的结果是一个包含过滤后元素的新数组。

另一种方法是使用Array.prototype.map()方法和递归结合。以下是一个示例代码:

代码语言:txt
复制
function filterNestedArray(arr, predicate) {
  return arr.map(item => {
    if (Array.isArray(item)) {
      const filteredNestedArray = filterNestedArray(item, predicate);
      return filteredNestedArray.length > 0 ? filteredNestedArray : undefined;
    }
    return predicate(item) ? item : undefined;
  }).filter(Boolean);
}

const nestedArray = [1, 2, [3, 4, [5, 6]], 7, [8, 9]];
const filteredArray = filterNestedArray(nestedArray, num => num % 2 === 0);
console.log(filteredArray); // 输出 [2, 4, 6, 8]

在上面的示例中,filterNestedArray()函数使用Array.prototype.map()方法对数组进行遍历,并根据元素的类型进行不同的处理。对于嵌套数组,使用递归调用filterNestedArray()函数来过滤嵌套数组;对于非数组元素,根据predicate函数来过滤元素。最后,使用Array.prototype.filter()方法过滤掉undefined值,返回过滤后的新数组。

总结:对于ReactJS中父数组的嵌套数组,可以使用递归或结合Array.prototype.map()方法和递归的方式来进行过滤。以上给出的示例代码可以实现这一功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue2两个数组嵌套循环返回数组item顺序要一致

this.allOriC.forEach(item2 => { if (item.dataIndex === item2.dataIndex) { newArr.push(item2) } }) })优化下这个代码,返回数组...allOriC​​查找匹配元素。...如果找到匹配项,则将其放入新数组;如果没有找到(​​find()​​返回​​undefined​​),则用​​null​​填充当前位置。...最后,使用​​filter(Boolean)​​去除新数组所有​​null​​值。 这样不仅提高了代码效率,而且确保了返回数组中元素顺序与​​arr2​​一致。...理解您需求,您希望返回数组中新添加元素顺序与​​arr2​​​中元素顺序一致,即使它们在​​this.allOriC​​位置不同。上面提供代码确实能实现这一目标。

6700
  • 小心这个陷阱: 为什么JS every()对空数组返回 true

    在我理解,我认为回调函数必须被调用并返回true , every() 才会返回 true ,但实际上并非如此。...你可以看到 every() 假设结果是 true ,并且只有在回调函数对数组任何一项返回 false 时才返回 false 。...如果数组没有任何项目,那么就没有机会执行回调函数,因此,该方法无法返回 false 。 现在问题是:为什么 every() 会表现出这样行为?...在数学和JavaScript“对所有”量词 MDN页面 提供了为什么 every() 会对空数组返回 true 答案: every 行为就像数学“全称量词”。...回调函数代表要测试条件,如果由于数组没有值而无法执行它,那么 every() 必须返回 true。

    19920

    Excel公式练习45: 从矩阵数组返回满足条件所有组合数

    本次练习是:如下图1所示,在一个4行4列单元格区域A1:D4,每个单元格内都是一个一位整数,并且目标值单元格(此处为F2)也为整数,要求在单元格G2编写一个公式返回单元格A1:D4四个不同值组合数量...但是,这不仅限制了结果数组大小(我们至少不能生成比工作表行数即1,048,576多元素数组),而且意味着,取决于我们所需输出,最终可能想要比预期更多元素。...虽然我们可以将诸如SMALL之类函数与其他一些函数例如LARGE、FREQUENCY或MODE.MULT一起使用,返回一个大小与传递给函数大小不同数组,但是通常根本没有必要将数组缩减到这样程度:...),{1;1;1;1})=4,MID(ROW(INDIRECT("1234:4321")),{1,2,3,4},1)-1,"") 虽然会在一开始就生成一个比必需值大得多数组,但是由于存在最小和最大返回值...数组中标红TRUE值与ROW生成数组1234、1243、1324相对应。

    3.3K10

    Math.max()方法获取数组最大值返回NaN问题分析

    今天群里边有人问到 Math.max() 方法返回 NaN 问题,我简单举个例子,看下图: 看上去没什么问题,但为什么返回 NaN 呢?...我们先简单看一下  Math.max() 方法: Math.max() Math.max() 函数返回一组数最大值。...返回值: 返回给定一组数字最大值。 注意:如果给定参数至少有一个参数无法被转换成数字,则会返回 NaN。 问题解决 仔细观察可以发现,代码中使用了 ......解构,这没问题,ES6 语法是支持这样了,会把数组解构成一组值。 但这里问题是 array 是一个二维数组,解构完还是一个数组,而非数字,所以返回 NaN 了。...未经允许不得转载:w3h5 » Math.max()方法获取数组最大值返回NaN问题分析

    4.3K20

    PHP json_encode 处理数组返回信息为 NULL 时处理

    背景 今天在处理消息队列逻辑时,因为连接不上服务器,返回错误信息存在中文乱码 以前处理方式,就是对返回信息,使用 json_encode() 编码处理,记录到 错误日志,方便后期问题排查...但是,此时发现,json_encode() 返回是 false|NULL ,无法满足我需求 通过网上建议,找到一种解决方案 :【PHP json_decode/json_encode 中文内容为...NULL或乱码】 源码 /************************************************************** * * 处理因为数组元素中含有中文乱码时问题...* @param string &$array 要处理字符串 * @param string $function 要执行函数 *...new_key] = $array[$key]; unset($array[$key]); } } } } /** * 处理因为数组元素中含有中文乱码问题时

    2.3K30

    React 代码共享最佳实践方式

    history,location等 export default withRouter(TopHeader) 由于高阶组件本质是获取组件并且返回新组件方法,所以理论上它也可以像mixin一样实现多重嵌套...同样由于HOC是一个纯函数,支持传入多个参数,增强其适用范围; HOC返回是一个组件,可组合嵌套,灵活性强; 当然HOC也会存在一些问题: 当多个HOC嵌套使用时,无法直接判断子组件props是从哪个...HOC负责传递; 当父子组件有同名props,会导致组件覆盖子组件同名props问题,且react不会报错,开发者感知性低; 每一个HOC都返回一个新组件,从而产生了很多无用组件,同时加深了组件层级...以上可以看出,render props是一个真正React组件,而不是像HOC一样只是一个可以返回组件函数,这也意味着使用render props不会像HOC一样产生组件层级嵌套问题,也不用担心props...本是很简单功能组件,但是却需要大量代码去实现。由于函数组件不包含状态,所以我们并不能用函数组件来声明一个具备如上功能组件。

    3K20

    一看就懂ReactJs入门教程(精华版)

    1、ReactJS背景和原理 在Web开发,我们总需要将变化数据实时反应到UI上,这时就需要对DOM进行操作。...如果这个变量是一个数组,则会展开这个数组所有成员,代码如下: 显示结果如下: 这里星号只是做标识用,大家不要被迷惑了~~ 你看到这里,说明你对React还是蛮感兴趣,恭喜你,坚持下来了,那么下面...先看代码: 这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化时候执行,必需返回NULL或者一个对象。...4、组件嵌套 React是基于组件化开发,那么组件化开发最大优点是什么?...2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部结果传递到级组件(留给大家研究);要对某些值变化做DOM操作,要把这些值放到state

    6.4K70

    关于前端面试你需要知道知识点

    和React.Children区别 在React,当涉及组件嵌套,在组件中使用props.children把所有子组件显示出来。...React Hooks 限制主要有两条: 不要在循环、条件或嵌套函数调用 Hook; 在 React 数组调用 Hook。 那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 设计是基于数组实现。在调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...非嵌套关系组件通信方式? 即没有任何包含关系组件,包括兄弟组件以及不在同一个非兄弟组件。...即:Hooks 组件(使用了Hooks数组件)有生命周期,而函数组件(使用Hooks数组件)是没有生命周期

    5.4K30

    ReactJS简介

    2、ReactJS背景和原理 在Web开发,我们总需要将变化数据实时反应到UI上,这时就需要对DOM进行操作。...与此同时,推荐在 JSX 代码外面扩上一个小括号,这样可以防止 分号自动插入 bug。 上面我们声明了一个names数组,然后遍历names数组在前面加上Hello,生成了element数组。...ReactJS是基于组件化开发,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页插入这个组件: function Welcome(props) {...组件返回值只能有一个根元素。 组件生命周期:如同人有生老病死,自然界有日月更替。每个组件在网页也会被创建、更新和删除,如同有生命机体一样。...可以通过属性,将值传递到组件内部,同理也可以通过属性将内部结果传递到级组件(留给大家研究);要对某些值变化做DOM操作,要把这些值放到state

    3.9K40
    领券