映射除最后一个键之外的对象 - Reactjs答案

【问题标题】：Map over object except for last key - Reactjs映射除最后一个键之外的对象 - Reactjs
【发布时间】：2017-05-24 05:17:53
【问题描述】：

我使用Object.entries() 映射Object 的键：

<div>
return Object.entries(obj).map([key, value]){
    <span key={key}> {key}: {value} </span>
}
</div>

而obj 看起来像这样：

{
    group: ‘name’,
    address: ‘Address’,
    manager: ‘John’,
    products: [
        {
        electronic: ‘laptop’,
        team: ‘Awesome’
        }
    ]
}

使用上面的映射，我可以理解地得到以下内容：

group: name
address: Address
manager: John
products: [object object] [object object]

如何渲染除最后一个键（产品）之外的所有内容以在 div 中显示以下内容：

group: name
address: Address
manager: John

【问题讨论】：

标签： arrays reactjs object

【解决方案1】：

使用 arr.length 作为 map 函数的第三个参数获取对象中的键数，并与 map 函数中的 index 进行比较，如下面的 sn-p。此外，您从地图返回的数据不正确

var data = {
    group: 'name',
    address: 'Address',
    manager: 'John',
    products: [
        {
        electronic: 'laptop',
        team: 'Awesome'
        }
    ]
}
var len = Object.keys(data).length;
Object.entries(data).map(([key, val], index, arr) => {
     if(index !== arr.length - 1) {
     console.log(key, val, index);
     }
})

你的代码是

<div>
 {Object.entries(obj).map([key, value], index, arr){
    if(index < arr.length) {
          return   <span key={key}> {key}: {value} </span>
    } 
}
</div>

【讨论】：

【解决方案2】：

试试：

<div>
return Object.entries(obj).map([key, value], i, arr){
    if (i !== arr.length - 1) {
      <span key={key}> {key}: {value} </span>
    }
}
</div>

【讨论】：

【解决方案3】：

检查值的类型，如果类型是object，则从渲染中跳过该部分。这样会跳过objects and arrays。

typeof([])  ==> 'object'

typeof({})  ==> 'object'

像这样：

var data = {
    group: 'name',
    address: 'Address',
    manager: 'John',
    products: [
        {
           electronic: 'laptop',
           team: 'Awesome'
        }
    ]
}

Object.entries(data).map(([key, val], index) => {
     if(typeof(val) != 'object') {
        console.log(key, val, index);   //return the span 
     }
     else null;
})

将console.log(key, val, index) 替换为<span key={key}> {key}: {value} </span>。

【讨论】：

【解决方案4】：

您可以在地图之前使用过滤器：

var data = {
    'group': 'name',
    'address': 'Address',
    'manager': 'John',
    'products': [
        {
            'electronic' 'laptop',
            'team': 'Awesome
        }
    ]
}

return Object.entries(data).filter(([key, value]) => {
  if (typeof value !== 'object' ) return 1;
}).map(([key, value]) => {
    <span key={key}> {key}: {value} </span>
});

在这里，任何作为对象具有价值的键都将被删除。

将返回：

group: name
address: Address
manager: John

【讨论】：