TypeScript多字符串数组使用问题：服务数据解析遇阻

问题场景 #

需要将服务返回的格式为 abc~sdfgsdg|def~dgdfgdf|cvx~fgdfgfdh| 的字符串拆分后，存入两种结构的数组：

• 二维数组：通过下标访问子元素
• 对象数组：通过属性名访问子元素

原代码错误分析 #

第一种尝试错误 #

let exampleText: string = 'abc~sdfgsdg|def~dgdfgdf|cvx~fgdfgfdh|'
let test: [string, string][];
let test2 = exampleTest.split('|'); // 原代码拼写错误：exampleTest → exampleText
test2.forEach(element => {
          let test3 = element.split('~'); 
          let t6 = test3[0]
          let t8 = test3[1]
          test.push(t6,t8)
        });

报错原因：test 是 [string, string][] 类型（二维数组，每个元素是长度为2的字符串数组），但 push(t6,t8) 传入的是两个独立字符串，而非一个完整的 [string, string] 元素，类型不匹配；同时 test 未初始化，直接调用 push 也会触发运行时错误。

第二种尝试错误 #

let exampleText: string = 'abc~sdfgsdg|def~dgdfgdf|cvx~fgdfgfdh|'
let test: [Pro1:string,Pro2:string];
let test2 = exampleTest.split('|'); // 同样存在拼写错误
test2.forEach(element => {
          let test3 = element.split('~'); 
          let t6 = test3[0]
          let t8 = test3[1]
          test.push(t6,t8)
        });

报错原因：

1. test 被声明为元组类型 [Pro1:string,Pro2:string]，但实际需要的是对象数组，类型定义错误；
2. test 未初始化，值为 undefined，调用 push 自然触发 Cannot read properties of undefined 错误。

正确实现方案 #

方案一：二维数组结构 #

let exampleText: string = 'abc~sdfgsdg|def~dgdfgdf|cvx~fgdfgfdh|';
// 初始化二维数组
let test: [string, string][] = [];
// 拆分后过滤空元素（原字符串末尾的|会生成空字符串）
let test2 = exampleText.split('|').filter(item => item);

test2.forEach(element => {
  let [pro1, pro2] = element.split('~');
  // 推入完整的长度为2的数组元素
  test.push([pro1, pro2]);
});

// 验证输出
console.log(test[0][0]); // 输出 'abc'
console.log(test[0][1]); // 输出 'sdfgsdg'
console.log(test[1][0]); // 输出 'def'
console.log(test[1][1]); // 输出 'dgdfgdf'

方案二：对象数组结构 #

let exampleText: string = 'abc~sdfgsdg|def~dgdfgdf|cvx~fgdfgfdh|';
// 定义对象类型并初始化数组
interface Item {
  Pro1: string;
  Pro2: string;
}
let test: Item[] = [];
let test2 = exampleText.split('|').filter(item => item);

test2.forEach(element => {
  let [pro1, pro2] = element.split('~');
  // 推入符合类型的对象
  test.push({ Pro1: pro1, Pro2: pro2 });
});

// 验证输出
console.log(test[0].Pro1); // 输出 'abc'
console.log(test[0].Pro2); // 输出 'sdfgsdg'
console.log(test[1].Pro1); // 输出 'def'
console.log(test[1].Pro2); // 输出 'dgdfgdf'

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