Javascript 比较同一对象中的2个数组键和值

我目前正在使用Firebase（实时数据库）和ReactJS开发一个应用程序。我有以下资料：

我想在sellersList中检查值是否为true。对于每个为true的值，我想在sellers数组中检查包含与“name:XXX”键值对中第一个数组中的键相同值的项

例如：如果我有“Nike”和“Puma”作为

true

，我想在sellers数组中检查名称值为“Nike”和“Puma”的物品，并返回整个父对象（这样我就可以访问虚拟形象、链接等）

编辑：这是我的完整组件代码：

import React, { Component } from 'react';
import Popup from '../Navbar/Popup';
import Upvote from './Upvote';
import actions from '../../actions';
import connectToStores from 'alt-utils/lib/connectToStores';
import ProductStore from '../../stores/ProductStore';

@connectToStores
class ProductPopup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sellers: [],
    };

    this.commentInput = React.createRef();
    this.handleCommentButton = this.handleCommentButton.bind(this);
  }

  static getStores() {
    return [ProductStore];
  }

  static getPropsFromStores() {
    return ProductStore.getState();
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.status && this.props.status != nextProps.status) {
      actions.getComments(this.props.pid);
    }
    return true;
  }

  renderHeader() {
    return (
      <header>
        <section className="product-header-content">
          <div className="product-header-thumb">
            <img src={this.props.thumbnail} />
          </div>
          <div className="product-header-info">
            <h1>{this.props.name}</h1>
            <p>{this.props.tagline}</p>
          </div>
        </section>
      </header>
    );
  }

  renderContent() {
    return (
      <section className="product-container">
        <div className="product-main">
          <section className="product-infos_wrapper">
            <section>
              <img src={this.props.media} className="product-image" />
            </section>
            <section className="product-infos">
              <p>{this.props.description}</p>
            </section>
          </section>
        </div>

        <div className="product-aside">
          <div className="aside-btn">
            <Upvote {...this.props} />
          </div>
          <div className="product-links-list">
            <h3>Ou trouver la paire</h3>

            <ul className="product-sellers">
              {Object.keys(this.state.sellers)}
            </ul>
          </div>
        </div>
      </section>
    );
  }

  handleComment = (e) => {
    if (e.keyCode === 13 && e.target.value.length > 0) {
      var comment = {
        content: e.target.value,
        name: this.props.user.name,
        avatar: this.props.user.avatar,
      };

      actions.addComment(this.props.pid, comment);
      e.target.value = null;
    }
  };

  handleCommentButton() {
    if (this.commentInput.current.value.length > 0) {
      var comment = {
        content: this.commentInput.current.value,
        name: this.props.user.name,
        avatar: this.props.user.avatar,
      };
    }

    actions.addComment(this.props.pid, comment);
    this.commentInput.current.value = null;
  }

  renderBodyDiscussion() {
    return (
      <section className="discussion">
        <h2>Commentaires</h2>
        {this.props.user ? (
          <section className="post-comment">
            <img src={this.props.user.avatar} className="medium-avatar" />
            <input
              placeholder="Que pensez-vous de ce produit ?"
              onKeyUp={this.handleComment}
              ref={this.commentInput}
            />
            <button type="submit" className="btn btn-primary" onClick={this.handleCommentButton}>
              Envoyer
            </button>
          </section>
        ) : null}
        {this.renderComments()}
      </section>
    );
  }

  renderBody() {
    return (
      <section className="product-popup-body">
        <main>{this.renderBodyDiscussion()}</main>
      </section>
    );
  }

  renderComments() {
    return (
      <ul className="comment-list">
        {this.props.comments.map(function (comment, index) {
          return (
            <li key={index} className="comment-item">
              <div className="comment-item_user">
                <img src={comment.avatar} className="medium-avatar" />
                <strong>{comment.name}</strong>
              </div>

              <section className="comment-item_content">
                <p>{comment.content}</p>
              </section>
            </li>
          );
        })}
      </ul>
    );
  }

  render() {

    const allSellers = Object.keys(this.props.sellersList).reduce((o, key) => {
      this.props.sellersList[key] !== false && (o[key] = this.props.sellersList[key]);

      this.state.sellers = o;
      return o;
    }, {});

    console.log(this.props);

    return (
      <Popup {...this.props} style="product-popup">
        {this.renderHeader()}
        {this.renderContent()}
        {this.renderBody()}
      </Popup>
    );
  }
}

export default ProductPopup;

import React，{Component}来自'React'；
从“../Navbar/Popup”导入弹出窗口；
从“/Upvote”导入Upvote；
从“../../actions”导入操作；
从“alt-utils/lib/connectToStores”导入connectToStores；
从“../../stores/ProductStore”导入ProductStore；
@连接商店
类ProductPopup扩展组件{
建造师（道具）{
超级（道具）；
此.state={
卖方：【】，
};
this.commentInput=React.createRef（）；
this.handleCommentButton=this.handleCommentButton.bind（this）；
}
静态getStores（）{
退货[产品店]；
}
静态getPropsFromStores（）{
返回ProductStore.getState（）；
}
shouldComponentUpdate（下一步，下一步状态）{
if（nextrops.status&&this.props.status！=nextrops.status）{
actions.getComments（this.props.pid）；
}
返回true；
}
renderHeader（）{
返回(
{this.props.name}
{this.props.tagline}

);
}
renderContent（）{
返回(
{this.props.description}

你的船在哪里

{Object.keys（this.state.sellers）}

);
}
handleComment=（e）=>{
如果（e.keyCode===13&&e.target.value.length>0）{
var注释={
内容：目标价值，
名称：this.props.user.name，
阿凡达：this.props.user.avatar，
};
actions.addComment（this.props.pid，comment）；
e、 target.value=null；
}
};
handleCommentButton（）{
如果（this.commentInput.current.value.length>0）{
var注释={
内容：this.commentInput.current.value，
名称：this.props.user.name，
阿凡达：this.props.user.avatar，
};
}
actions.addComment（this.props.pid，comment）；
this.commentInput.current.value=null；
}
renderBodyDiscussion（）{
返回(
评论
{this.props.user(
特使
)：null}
{this.renderComments（）}
);
}
renderBody（）{
返回(
{this.renderBodyDiscussion（）}
);
}
renderComments（）{
返回(

{this.props.comments.map（函数（comment，index）{
返回(

{comment.name}
{comment.content}


);
})}

);
}
render（）{
const allSellers=Object.keys（this.props.sellersList）.reduce（（o，key）=>{
this.props.sellersList[key]！==false&（o[key]=this.props.sellersList[key]）；
this.state.sellers=o；
返回o；
}, {});
console.log（this.props）；
返回(
{this.renderHeader（）}
{this.renderContent（）}
{this.renderBody（）}
);
}
}
导出默认产品弹出窗口；

我想这可能就是你想要做的：

const sellers=[
{头像：“1”，名字：“Nike”}，
{阿凡达：“2”，名字：“彪马”}，
{阿凡达：“3”，名字：“某物”}，
];
常量sellersList={
耐克：没错，
彪马：没错，
有些东西：假的，
};
const includedSellers=Object.keys（sellersList.filter）(
（品牌）=>sellersList[品牌]
);
const results=sellers.reduce(
（结果，卖方）=>
includedSellers.includes（卖方名称）【卖方，……结果】：结果，
[]
);
控制台日志（结果）；
//来自@Drew Reese的更好解决方案
const results2=sellers.filter（（{name}）=>includedSellers.includes（name））；
console.log（results2）您必须避免像这样手动改变状态：

  this.state.sellers = o; //

请发布实际数据而不是图片。我已经编辑了我的初始帖子并添加了组件代码。这看起来是正确的，但为什么不使用
（{name}）=>includedSellers.includes（name）筛选
sellersList
？我认为OP需要来自
sellers
arrayy的完整对象您只是将一个数组缩减为一个数组，即filter:
const results=sellers.filter（seller=>includedSellers.includes（seller.name））。只是用你的解决方案测试了一下。不用担心，这会发生在我们所有人身上，这也是代码审查和让其他人关注代码的主要原因之一。；）