如何通过单次循环从未知对象数组中精准解构指定值到对应变量（无匹配则设为undefined）

嘿，我明白你的问题了——你现在用filter的方式有个隐形坑：返回的数组顺序完全取决于原数组里元素的出现顺序，万一table_delete先出现，那tableEdit变量拿到的就不是你想要的编辑权限对象了。而且你希望只用一次循环，就把对应type的元素精准分配到指定变量，没匹配到的就设为undefined对吧？

这里给你两种靠谱的实现方式，都只需要一次遍历数组：

方法一：用数组累积结果（直接对应解构位置） #

const [tableEdit, tableDelete] = useMemo(() => {
  // 初始化结果数组，两个位置分别对应tableEdit和tableDelete，默认值为undefined
  const permissionPairs = panelPermissionsPerWidget?.reduce((acc, ele) => {
    if (ele.type === 'table_edit') {
      acc[0] = ele;
    } else if (ele.type === 'table_delete') {
      acc[1] = ele;
    }
    return acc;
  }, [undefined, undefined]);

  // 处理原数组为undefined的情况，避免解构报错
  return permissionPairs || [undefined, undefined];
}, [panelPermissionsPerWidget]);

方法二：用对象累积结果（可读性更强） #

如果你觉得数组下标不够直观，也可以用对象存储结果，最后解构对象：

const { tableEdit, tableDelete } = useMemo(() => {
  const permissionObj = panelPermissionsPerWidget?.reduce((acc, ele) => {
    if (ele.type === 'table_edit') {
      acc.tableEdit = ele;
    } else if (ele.type === 'table_delete') {
      acc.tableDelete = ele;
    }
    return acc;
  }, { tableEdit: undefined, tableDelete: undefined });

  return permissionObj || { tableEdit: undefined, tableDelete: undefined };
}, [panelPermissionsPerWidget]);

为什么这两种方法符合要求？ #

• 仅单次循环：reduce遍历数组一次就完成所有匹配判断，比两次find调用少一次遍历操作
• 精准匹配：不管原数组元素顺序如何，tableEdit只会拿到type为table_edit的元素，tableDelete同理
• 无匹配自动设为undefined：初始化时已经把默认值设为undefined，遍历完没找到对应元素就保持这个默认值

备注：内容来源于stack exchange，提问作者Rt7 Rt7