使用 React 映射 JavaScript 对象键

介绍

在使用 React 编写任何 Web 应用时，您很可能会发现自己需要映射 JavaScript 对象的键。如果您刚刚从服务器获取了远程数据，那么很有可能在某个时候，您需要映射这些数据以填充视图层。在本指南中，您将学习如何以多种方式映射 JavaScript 对象的键，以便您可以选择最适合您应用的解决方案。

让我们开始吧！

使用纯 JavaScript

假设您正在从远程 API 获取狗的列表，并且 JSON 有效负载如下所示：

      
    {
        breed: 'German Shepherd'

如您所见，此有效负载由一个对象数组组成。如果您想使用每个对象的键作为列标题在 React 视图中动态显示表格，该怎么办？此解决方案要求您映射对象的键。

ES6 JavaScript 为此提供了一个内置方法 — Object.keys。此方法接受一个对象并返回一个键数组。以下是使用此内置方法填充简单表的示例：

      render() {
    const firstDog = Array.isArray(this.dogs) && this.dogs.length ? this.dogs[0] : {};

    const headers = Object.keys(firstDog);

    return (
        <table class="table">
            <tr>
                { headers.map(header => <th>{header}</th>) }
            </tr>
            { this.dogs.map(dog => {
                return <tr>{ headers.map(header => <td>{dog[header]}</td>) }</tr>
              }) }
        </table>
    );
}
    

上述 React 组件的渲染函数使用Object.keys映射第一个 dog 对象的可用键。然后使用这些键生成表的<th>和<td>元素。这是一个简单的例子，但它展示了内置Object.keys方法的强大功能和实用性。

使用 Lodash

除了内置方法之外，使用外部库（如 Lodash）来帮助您映射对象的键也很容易。Lodash 提供了_.keys方法来映射对象的键。使用此方法会稍微影响性能，但这种方法也更简洁。下面，您将看到相同的渲染函数被重构为使用_.keys。

      render() {
    const headers = _.keys(_.head(firstDog));

    return (
        <table class="table">
            <tr> { _.map(headers, header => <th>{header}</th>) } </tr>
            { _.map(this.dogs, dog => {
                    return <tr>{ _.map(headers, header => <td>{dog[header]}</td>) }</tr>;
                }) }
        </table>
    );
}
    

上面的代码使用 Lodash 的_.keys函数来映射我们数据中的第一个狗。然后使用这些键来动态填充表中的列和行。_.keys函数的性能略低于内置的Object.keys方法，但它的可读性要高得多——尤其是与其他 Lodash 方法一起使用时。

结论

在本指南中，您学习了如何以多种方式映射 JavaScript 对象的键。首先，您了解了如何使用纯 JavaScript 实现解决方案，这样您就可以避免在应用程序中添加任何不必要的依赖项。您学习了如何使用内置的Object.keys函数映射对象基元并以迭代方式显示其中的底层数据。此后，您学习了如何利用 Lodash 库的_.keys方法通过编写非常简洁但性能稍差的代码来映射对象键。

我希望本指南能帮助您了解如何迭代 JavaScript 对象的键以及如何利用这些解决方案使用 React 创建引人注目的视图。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文