JavaScript数组键值匹配合并及TypeScript类型化实现方案

JavaScript 实现 #

你的代码问题在于没处理arrOne的嵌套结构——arrOne的每个元素是包含对象的数组，而非直接是对象，所以item.to取不到值。正确做法是先遍历外层数组，再遍历内层的每个对象：

arrOne = arrOne.map(innerArr => 
  innerArr.map(obj => {
    const matchedUser = arrTwo.find(user => user.num === obj.to);
    return matchedUser ? { ...obj, firstName: matchedUser.firstName, lastName: matchedUser.lastName } : obj;
  })
);

这段代码会遍历嵌套数组的每一层，找到匹配的用户后合并字段，最终得到你期望的结构。

TypeScript 类型定义 #

在TypeScript中，我们需要先明确各数据结构的类型，再做类型安全的处理：

1. 定义基础类型 #

// arrOne中消息对象的类型
interface Message {
  sender: string;
  to: string;
}

// arrTwo中用户对象的类型
interface User {
  firstName: string;
  lastName: string;
  num: string;
}

// 合并后的消息+用户信息类型
interface MessageWithUser extends Message {
  firstName: string;
  lastName: string;
}

2. 类型化数组并处理 #

// 给原数组添加类型声明
const arrOne: Message[][] = [
    [{sender: '0000', to: '1111'}],
    [{sender: '2222', to: '1111'}]
];

const arrTwo: User[] = [
  {
    firstName: 'John',
    lastName: 'Doe',
    num: '1111'
  }
];

// 处理后的数组会被推断为MessageWithUser[][]类型
const processedArr = arrOne.map(innerArr => 
  innerArr.map(obj => {
    const matchedUser = arrTwo.find(user => user.num === obj.to);
    // 若存在匹配则返回合并后的对象，无匹配时做类型断言保证类型一致
    if (!matchedUser) return obj as MessageWithUser;
    return { ...obj, firstName: matchedUser.firstName, lastName: matchedUser.lastName };
  })
);

如果能确保arrTwo中一定有匹配的用户，可以省略无匹配的处理逻辑；若存在无匹配场景，也可以把MessageWithUser里的firstName和lastName设为可选字段（firstName?: string），避免类型断言。

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