Electron Node.js下自定义消息字符映射表的实现与问题解决

项目需求背景 #

客户委托开发一款桌面端消息工具，核心功能是支持用户配置自定义字符映射表完成消息编解码：原消息中的每个字母可由用户指定固定替换字符，比如原消息Hello!可以转换为Atco!——对应规则是H替换为A、e替换为t、l替换为c、o保持o、感叹号不做替换；接收消息的用户只要和发送方约定好同一套字符映射表，就可以把密文还原成原始内容。
目前UI代码已经启动开发，核心的映射处理逻辑还没落地，最初的实现思路是用存储全量字母的数组作为基础，支撑用户自定义映射规则配置，参考的初始代码片段：

// 原始字符映射表（存储全量基础字母序列）
const charMap = ['a','b','c', ...];

// 待实现的用户自定义映射表结构？
const customCharMap = { a: 'f', b: 'h', c: 'n' };

待解决的核心问题 #

1. 自定义映射配置的UX优化方案
   最初设计是为每个字母单独配置一个<select>下拉选择框，让用户逐个选择对应替换字符，但担心26个下拉框逐个手动设置的操作流程体验太差，想找最高效、操作成本最低的映射配置实现方式。
2. 随机映射表的生成与跨端传递方案
   如果要做「不开放逐字手动设置入口、仅允许用户查看系统自动生成的随机映射」的模式，需要找到JavaScript下实现该功能的最优方案；同时需要明确生成的随机映射表采用什么格式传递给消息接收方，保证接收方可以正常完成消息解码。

补充说明
目前测试的随机映射生成代码存在替换字符重复赋值的问题，不符合每个原字母对应唯一替换字符的预期，测试代码与实际输出如下：

const customCharMap = () => {
    const originalCharMap = ['a','b','c','d','e','f','g','h','i','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
    let outputCharMap = {};
    for(let i = 0; i < originalCharMap.length; i++){
        let rnd = Math.floor(Math.random() * originalCharMap.length);
        outputCharMap[originalCharMap[i]] = originalCharMap[rnd];
    }
    return outputCharMap;
}

const result = customCharMap();
console.log(result);

实际控制台输出存在大量重复映射值：

{
  a: 'd',
  b: 'd',
  c: 'd',
  d: 'f',
  e: 'o',
  f: 'p',
  g: 'q',
  h: 'a',
  i: 'o',
  l: 'x',
  m: 'm',
  n: 'r',
  o: 'i',
  p: 'i',
  q: 'e',
  r: 'e',
  s: 't',
  t: 'u',
  u: 'p',
  v: 'g',
  w: 'l',
  x: 'u',
  y: 'y',
  z: 'r'
}

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