时间戳

首页 > 解决方案 > 元组/二维数组的 ES6 映射函数

javascript - 元组/二维数组的 ES6 映射函数

问题描述

我正在尝试编写一个地图函数来返回一个导航栏。我有一个数组/字典，我想使用看起来像的 map 函数进行循环

[['Text', './link.html'],
 ['Text2', './link2.html'],
 ['Text3', './link3.html']]

要不然

{'Text', './link.html',
 'Text2', './link2.html',
 'Text3', './link3.html'}

无论我需要循环什么类型都无关紧要，我只想循环遍历 2 个集合，理想情况下我想使用元组，但从我读过的内容来看，这似乎不是一个选项。

在查看使用dict/object 方法的解决方案时，我不知道如何访问键和值。例如。

var NavBar = (props) => {

    return (
        <div id="NavMain">
            {Object.keys(props.links).map((link,index) => {
                return <NavBarItem link={link} />
                {/* Where do I access the key? */}
            })}
        </div>
    )}

如果我尝试将其映射为二维数组，我的 IDE 会在下面的代码中的“行”、“文本”和“/>”下方显示一些错误行

var NavBar = () => {
      
    return (
        <div id="NavMain">
            {this.props.links.map((row,index) => {
                return <NavBarItem link=row[1] text=row[0] />
            })}
        </div>
    )}

我查过的其他解决方案真的很乱。我想知道是否有一种干净的方法可以在 2 组上使用 map 函数。

标签： javascriptarraysreactjsdictionaryecmascript-6

解决方案

.map()您可以在这样的内部使用数组解构：

所以假设你有一个数组数组的数据集：

const arr = [
     ['Text', './link.html'],
     ['Text2', './link2.html'],
     ['Text3', './link3.html']
]

var NavBar = (props) => {
    return(
      <div id="NavMain">
        {arr.map(([text, link]) => {
           return <NavbarItem link={link} text={text}/>
        })}
      </div>
    )
}

我们知道第一项是text，第二项是link预期的。

有关工作示例，请参见沙箱：https ://codesandbox.io/s/stoic-payne-9zdp3

推荐阅读