面试题：Solid.js中JSX在复杂数据结构下与JavaScript的交互处理

Question

给定一个复杂的JavaScript对象数组，例如 `[{name: 'Alice', scores: [85, 90, 95]}, {name: 'Bob', scores: [70, 75, 80]}]`，在Solid.js的JSX中，如何遍历这个数组，计算每个人的平均分数，并以表格形式展示姓名和平均分数。需要详细说明数据处理逻辑以及JSX和JavaScript代码如何协同工作。

Answer 1

1. 数据处理逻辑：
   • 遍历对象数组，对于每个对象，获取其 scores 数组。
   • 计算 scores 数组的总和，通过对数组元素进行累加实现。
   • 用总和除以 scores 数组的长度，得到平均分数。
2. Solid.js 中代码实现：
   • 首先引入 Solid.js 相关模块：

import { createSignal } from'solid-js';

• 定义数据和计算平均分数的函数：

const data = [{ name: 'Alice', scores: [85, 90, 95] }, { name: 'Bob', scores: [70, 75, 80] }];
const calculateAverage = (scores) => {
    const sum = scores.reduce((acc, score) => acc + score, 0);
    return sum / scores.length;
};

• 在 Solid.js 的 JSX 中遍历展示数据：

import { render } from'solid-js/web';

const App = () => {
    return (
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>平均分数</th>
                </tr>
            </thead>
            <tbody>
                {data.map((item) => (
                    <tr key={item.name}>
                        <td>{item.name}</td>
                        <td>{calculateAverage(item.scores)}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};

render(() => <App />, document.getElementById('app'));

在上述代码中：

• createSignal 用于创建响应式数据（这里未直接用到，但在更复杂场景可能会结合使用）。
• calculateAverage 函数实现了计算平均分数的逻辑。
• 在 JSX 中，通过 data.map 遍历数组，为每个对象创建一行表格数据，将姓名和计算得到的平均分数展示在表格相应列中。render 函数将 App 组件渲染到指定的 DOM 元素（id 为 app 的元素）上。