元组/二维数组的 ES6 映射函数答案

【问题标题】：ES6 map function for tuples/2d arrays元组/二维数组的 ES6 映射函数
【发布时间】：2019-11-21 23:23:01
【问题描述】：

我正在尝试编写一个地图函数来返回一个导航栏。我有一个数组/字典，我想使用类似于

的 map 函数进行循环

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

否则

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

我需要循环的任何类型都没有关系，我只想循环 2 组，理想情况下我想使用元组，但从我读过的内容来看，这似乎不是一个选项.

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

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 函数。

【问题讨论】：

第二种方法很正常。唯一“混乱”的事情是您必须使用索引，但鉴于您有两个项目，这是意料之中的。
@Jacob，在集成解决方案时运气好 :)

标签： javascript arrays reactjs dictionary ecmascript-6

【解决方案1】：

您可以像这样在.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

【讨论】：

【解决方案2】：

你几乎拥有它。试试这个：

/*
props.links = {
    'Text' : './link.html',
    'Text2' : './link2.html',
    'Text3' : './link3.html'
}
*/

var NavBar = (props) => {
    return (
        <div id="NavMain">
            {Object.keys(props.links).map((key, index) => {
                return <NavBarItem link={props.links[key]} text={key}  />
            })}
        </div>
    )
}

【讨论】：