前端页面如何输出数组

前端页面通常使用JavaScript来操作数组并将其显示给用户。以下是几种常见的方法：

1. **DOM操作**：可以直接遍历数组并将每个元素插入到HTML元素中，例如使用`innerHTML`属性。

let arr = ['苹果', '香蕉', '橙子'];
for(let i = 0; i < arr.length; i++) {
  let li = document.createElement('li');
  li.textContent = arr[i];
  document.getElementById('fruit-list').appendChild(li);
}

2. **模板字符串或模板 literal (`<template>` 或 `<script type="text/html">`)**：可以将数组作为字符串字面量的一部分。

let fruits = ['苹果', '香蕉', '橙子'];
document.write(`<ul>
${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
</ul>`);

3. **使用数组方法和 `textContent`**：利用数组的map、join等方法处理后再设置元素文本。

let arr = ['苹果', '香蕉', '橙子'];
let ul = document.getElementById('fruit-ul');
ul.innerHTML = arr.join('<li>' + '</li><li>');

4. **React, Angular或Vue**：在MVVM框架中，可以使用特定的语法或组件来渲染数组数据。

function ListItem({ fruit }) {
  return <li>{fruit}</li>;
}

function App() {
  const fruits = ['苹果', '香蕉', '橙子'];
  return (
    <ul>
      {fruits.map(fruit => <ListItem key={fruit} fruit={fruit} />)}
    </ul>
  );
}