javascript - 如果不为空,则将多个数组合并在一起

标签 javascript arrays reactjs

我正在构建一个 React 应用程序并使用异步操作向外部 API 发出请求并将数据引入我的应用程序。我有 4 个数组需要合并在一起。由于我使用的是异步操作,因此如果没有数据则默认值为空。我想检查数组是否不为空,如果它有一个值,然后将它与其他数组合并到一个数组中。将所有数据放入单个数组后,我将使用 includes 方法查看数组中是否存在任何值。我不认为使用传播运算符会在这里工作,因为它会失败,因为 null 不是可迭代的。有没有一种方法可以通过 reduce 来检查 4 个单独数组中的每一个,确保值不为 null,然后将它们组合到一个数组中。

最佳答案

您的问题会引导您找到答案。 :)

本质上,您是在询问如何过滤所有非数组输入,然后将它们组合(或连接)到一个新数组中。

关于以下方法的一些注意事项:

  • 为了在过滤中获得更好的稳定性,而不是使用黑名单(不是null),而是使用白名单(Array.isArray)来确保只合并数组。<
  • 展开运算符随后可用于为新数组的 concat 方法创建参数列表。

const arr1 = [1,2];
const arr2 = null;
const arr3 = [3,4];
const arr4 = [5];

const concat = (...arrays) => [].concat(...arrays.filter(Array.isArray));

console.log(concat(arr1, arr2, arr3, arr4));

有趣的是,如果组合数组需要是唯一值(假设值的类型简单),然后快速转换为 Set 并返回到Array 可以做到这一点:

const arr1 = [1,2];
const arr2 = null;
const arr3 = [3,4];
const arr4 = [4,5];

const concat = (...arrays) =>[].concat(...arrays.filter(Array.isArray));

const unique = (array) => [...new Set(array)];

const concated = concat(arr1, arr2, arr3, arr4);
const uniqued = unique(concated);

console.log({concated, uniqued});

关于javascript - 如果不为空,则将多个数组合并在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52322420/

相关文章:

Javascript 通过输入更改纯文本

javascript - 为什么 shouldComponentUpdate 说当前的 props 是 React 中的新 props?

c++ - 我可以逆转数组到指针衰减的过程吗?

java - 使用 jsp(java) 数组和复选框

reactjs - 使用 react router v6 实现 protected 路由

javascript - 在 Gatsby 中使用 useStaticQuery 填充数据的 SEO 效果

javascript - 以 GET 方法形式创建自定义 url

php - jquery 循环不适用于 php 数据

javascript - Angular JS : How to call a function inside link from controller in angular directive

c - Memsetting 指向数组的指针