Object.keys.map 仅返回第 n 个值并排除其余值答案

【问题标题】：Object.keys.map only return the nth values and exclude the restObject.keys.map 仅返回第 n 个值并排除其余值
【发布时间】：2020-01-08 21:15:46
【问题描述】：

我有一个对象tooltip

var showTooltip = Object.keys(tooltip).map(function(e) {
  console.log(tooltip[e])
  <div className="tooltip bold" style={{left: x, top: y, padding: '5px', fontSize: '12px'}}>{tooltip[e].Company}</div>
});

当前返回的内容

<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;">Company X, LLC</div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>

返回6个<div>的（1,2,4,5,6我不用）；如何仅返回具有公司名称数据的第三个 <div>，或删除带有空 innerHTML 的那些？

【问题讨论】：

你真的不应该map over keys 或filter 他们。您应该知道tooltip 对象的哪个键包含数据，然后直接引用该属性。

标签： javascript reactjs object javascript-objects

【解决方案1】：

filter他们先出来：

var showTooltip = Object.keys(tooltip).filter(k => !!tooltip[k].Company).map(function(e) {
    console.log(tooltip[e])
    <div className="tooltip bold" style={{left: x, top: y, padding: '5px', fontSize: '12px'}}>{tooltip[e].Company}</div>
});

【讨论】：

【解决方案2】：

对于没有公司的项目返回null：

class Demo extends React.Component {
  render() {
    var tooltip = this.props.tooltip;
    
    var showTooltip = Object.keys(tooltip).map(function(e) {
      var company = tooltip[e].Company;

      return company ? (
        <div key={e} className="tooltip bold" style={{left: 0, top: 0, padding: '5px', fontSize: '12px'}}>{company}</div>
      ) : null;
    });
    
    return (
      <div>
        {showTooltip}
      </div>
    );
  }
}

var tooltip = { a: { Company: 'a' }, b: {}, c: { Company: 'c' }};

ReactDOM.render(
  <Demo tooltip={tooltip} />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案3】：

Object.keys(tooltip) 返回给定对象中的键数组。这就是为什么这里可以使用所有数组函数的原因。

map() 方法创建一个填充了调用结果的新数组调用数组中每个元素的提供函数。

filter() 方法创建一个包含所有通过由提供的函数实现的测试。

根据问题，您似乎想根据公司名称进行过滤。所以你可以简单地尝试（可能是语法错误）：

var showTooltip = Object.keys(tooltip).map( e => tooltip[e].Company && 
   tooltip[e].Company !== '');

    showTooltip.map(tooltip => {
         console.log(tooltip[e])
         <div className="tooltip bold" style={{left: x, top: y, padding: '5px', 
          fontSize: '12px'}}>{tooltip[e].Company}</div>
       })

参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

【讨论】：