如何使用 array.find 将其与另一个对象进行比较答案

【问题标题】：How to use array.find comparing it with another object如何使用 array.find 将其与另一个对象进行比较
【发布时间】：2020-02-21 11:24:02
【问题描述】：

我有两个 javascript 数组对象 designs 和 articles。

var designs = [
    {
        design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black"

    }, 
    {
        design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter wand"

    }, 
    {
        design_id:"ztvx3yikkkyx", article_id:5570, name:"hogwarts map"
    }, 
    {
        design_id:"hlzd4afi9en5", article_id:5570, name:"lannister lion"
    }, 
    {
        design_id:"sdwererefwff", article_id:14782, name:"pokemon bulbasaur"
    },
];

var articles = [
    {
        article_id:6508, dsn_shared_art_id:null, name:"tee man two sides"
    },
    {
        article_id:13510, dsn_shared_art_id:null, name:"tee woman two sides"
    },
    {
        article_id:5570, dsn_shared_art_id:null, name:"necktie"
    },
    {
        article_id:14782, dsn_shared_art_id:null, name:"sweetwear with hood"
    },
]

我想获取数组articles中第一个满足这些条件的元素的值：

article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id

我尝试使用 .find，但它不起作用：

this.designs.forEach(function(design) {
    var $artdata = this.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
    console.log($artdata);//undefined
}.bind(this));

我怎样才能做到这一点？

【问题讨论】：

.bind(this) designs 和 articles 而不是 this.designs 和 this.articles 可以正常工作。拥有整个 vuejs 组件部分会很有帮助。

标签： javascript arrays vue.js

【解决方案1】：

对我来说效果很好：

var designs = [
    {
        design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black"

    }, 
    {
        design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter wand"

    }, 
    {
        design_id:"ztvx3yikkkyx", article_id:5570, name:"hogwarts map"
    }, 
    {
        design_id:"hlzd4afi9en5", article_id:5570, name:"lannister lion"
    }, 
    {
        design_id:"sdwererefwff", article_id:14782, name:"pokemon bulbasaur"
    },
];

var articles = [
    {
        article_id:6508, dsn_shared_art_id:null, name:"tee man two sides"
    },
    {
        article_id:13510, dsn_shared_art_id:null, name:"tee woman two sides"
    },
    {
        article_id:5570, dsn_shared_art_id:null, name:"necktie"
    },
    {
        article_id:14782, dsn_shared_art_id:null, name:"sweetwear with hood"
    },
]


designs.forEach(function(design) {
var $artdata = articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
console.log($artdata);//undefined
}.bind(this));

我怀疑您的问题可能与this 上下文有关。试试箭头函数，designs.forEach(design => ... )

【讨论】：

.bind(this) 需要什么？

【解决方案2】：

你也可以试试下面的方法

var self = this;
self.designs.forEach(function(design) {
    var artdata = self.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
    console.log(artdata);
});

问题在于this 的范围。在您的 forEach this.articles 内部不存在。因此出现未定义的错误。

【讨论】：

【解决方案3】：

只需从this.designs 和this.articles 中删除this。然后删除.bind(this)，因为您不需要将它们与this 绑定。 Here 是一个工作中的 jsfiddle。但是如果你在 vuejs 中这样做，那么只需像这样更改你的 forEach 方法：

this.designs.forEach((design) => {
  var $artdata = this.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
  console.log($artdata);//undefined
})

this 的范围是您代码中的内部 function。刚刚更换了将箭头功能。或者您可以尝试在let self = this 之外设置this 的值，如其他答案中所述

【讨论】：