如何在Angular 2中兼容两种数组类型正确渲染ul/li列表

这问题很常见，核心原因是你现在的代码默认数组里每一项都是对象，直接去访问它的 name 属性，但字符串数组里的项根本没有这个属性，自然就渲染不出来啦。咱们只需要给渲染逻辑加个类型判断，区分字符串和对象就行，具体修改方式看你用的是原生JS还是框架：

原生JavaScript写法 #

假设你原来的代码是这样的：

const myArray = ["fgtr1","ghyt2","juki3"]; // 或者对象数组
const ul = document.createElement('ul');
myArray.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name; // 这里对字符串会报错
  ul.appendChild(li);
});
document.body.appendChild(ul);

修改成带类型判断的版本：

const myArray = ["fgtr1","ghyt2","juki3"]; // 两种数组都能兼容
const ul = document.createElement('ul');
myArray.forEach(item => {
  const li = document.createElement('li');
  // 判断当前项是字符串还是对象
  if (typeof item === 'string') {
    li.textContent = item; // 字符串直接显示
  } else {
    li.textContent = `${item.mode}: ${item.name}`; // 对象显示你需要的属性，比如mode+name
  }
  ul.appendChild(li);
});
document.body.appendChild(ul);

React框架写法 #

如果是用React的JSX渲染，原来的代码可能是：

function MyList() {
  const myArray = [{ mode: 'enable', name: 'ashk' }, { mode: 'disable', name: 'qwer' }];
  return (
    <ul>
      {myArray.map(item => <li key={item.name}>{item.name}</li>)}
    </ul>
  );
}

修改后兼容两种数组：

function MyList() {
  const myArray = ["fgtr1","ghyt2","juki3"]; // 切换成对象数组也能正常渲染
  return (
    <ul>
      {myArray.map((item, index) => {
        // 生成唯一key，字符串用自身，对象用name或者id，重复的话用index兜底
        const key = typeof item === 'string' ? item : item.name || index;
        return (
          <li key={key}>
            {typeof item === 'string' ? item : `${item.mode} - ${item.name}`}
          </li>
        );
      })}
    </ul>
  );
}

关键思路就是遍历数组时先判断每一项的类型：如果是字符串就直接输出，是对象就输出你需要的属性（比如name或者组合mode和name）。这样两种数组类型就能完美兼容啦～

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