JavaScript使用filter()方法时如何保持返回结果为二维数组

首先定义如下二维数组：

ar1 = [[1, 10, "Item1", 50], [1, 10, "Item1", 50],[1, 10, "Item3", 50]];

原有代码目标为获取筛选后匹配规则的第一条记录，代码如下：

let ar2 = ar1.filter(e => e[2] === "Item1")[0];//To get only of the filtered records

上述代码实际返回一维数组：

[1, 10, "Item1", 50]

期望返回结果保留二维数组结构，格式如下：

[[1, 10, "Item1", 50]]

返回结构不符合预期的核心原因是：filter返回值是所有匹配项组成的数组，追加[0]是直接取出了数组内的第一个子元素（也就是一维的目标记录），自然丢失了外层的数组包裹。不需要依赖额外工具函数，用JavaScript原生语法即可实现需求，两种常用写法如下：

• 写法1：用find替代filter获取第一条匹配项，再手动包裹为数组

  // find会在匹配到第一个符合条件的元素时立刻终止遍历，相比全量遍历的filter性能更优
  const target = ar1.find(e => e[2] === "Item1");
  // 无匹配项时返回空数组，避免出现[undefined]的异常结果
  const ar2 = target ? [target] : [];
  

• 写法2：保留filter逻辑，用slice截取结果的前1位

  // slice返回截取后的新数组，不会直接取出子元素，天然保留二维结构
  const ar2 = ar1.filter(e => e[2] === "Item1").slice(0, 1);
  

避坑提示：不要直接简写为[ar1.filter(e => e[2] === "Item1")[0]]，当数组中无匹配项时，filter返回空数组，取[0]会得到undefined，最终返回结果会变成[undefined]，不符合边界场景的预期。

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