2017-03-06 122 views
0

我正在使用React,但概念是在JavaScript中。所以希望我可以为简单起见留下React代码。比较两个数组中的对象并根据javascript中的匹配返回

我有两个数组,我需要过滤掉。我的目标是映射数组并检查该对象的属性是否与另一个数组的对象中的属性相匹配。

第一阵列看起来像这样:

[{id: 1}, {id: 2}, {id: 3}, {id: 4}] 

其次一个看起来像这样:

[{id: 3}, {id: 4}] 

因此,如果一个对象具有相同的id属性作为其他阵列中的一个对象,返回反应元/什么。

这是我得到的工作,但它只是通过索引并比较它们。这似乎正确地循环第一个数组,但我似乎无法循环索引以外的任何其他数组。

return arr1.map((e, i) => { 
    return if (e.id === arr2[i].id) { 
    return <div>Match</div> 
    } else { 
    return <div>No Match</div> 
    } 
}) 
+0

什么似乎没有工作? –

回答

1

你的问题是你要比较索引的索引。你想知道arr1中的元素是,在arr2中的任何地方,对吧?

我会用arr2.filter来搜索所有的arr2。所以,你会是这样的:

return arr1.map((e1, i) => { 
    if (arr2.filter(e2 => e2.id === e1.id).length > 0) { // If there's a match 
    return <div>Match</div> 
    } else { 
    return <div>No Match</div> 
    } 
}) 

UPDATE: 如使用Array.some的意见建议是更好地在这里:

return arr1.map((e1, i) => { 
    if (arr2.some(e2 => e2.id === e1.id)) { // If there's a match 
    return <div>Match</div> 
    } else { 
    return <div>No Match</div> 
    } 
}) 
+1

谢谢,第一个答案我看到了,它的工作完美。谢谢你解释我的错误,帮助我了解我做错了什么:) – Jake

+2

而不是*过滤*,[*某些*](http://www.ecma-international.org/ecma-262/7.0/index .html#sec-array.prototype.some)可能更高效,因为它会在第一次匹配时停止,并且不会创建无用的数组。 – RobG

+0

@RobG很棒的建议!我不知道'有些'。这当然更适合。 – SealedSaint

1

你可以使用第一个阵列上filter,并includes第二阵列上:

arr1 
    .filter(e => arr2.map(e2 => e2.id).includes(e.id)) 
    .map(e => return (<div>Match</div>)); 
1

你可以用香草JS这一个。当执行此操作循环中,检查了比较你正在:

迭代(省略ID): ArrayOne VS ArrayTwo

  1. 1与3
  2. 2比较比较了4
  3. 3比较与未定义(将错误,因为它的要求为undefined.id)
  4. 4与未定义的比较(将错误,因为它要求undefined.id)

如果您的元素是总是将按顺序排列,您可以遍历第一个数组并构建二进制搜索以快速查找第二个元素。这将您的时间复杂性带到o(n * log(n)),并且从长远来看会更好。如果你只是希望打MVP,你可以这样做:

const myFilter = (arrayOne, arrayTwo) => { 
    return arrayOne.map((objectOne) => { 

    // Using findIndex over includes to be able to pass callback 
    // to compare the IDs 
    // returns -1 if not found 

    const matchIndex = arrayTwo.findIndex((objectTwo) => { 
     return objectOne.id === objectTwo.id 
    }) 


    if (matchIndex >= 0) { 
     return <div> Match </div> 
    } else { 
     return <div> NoMatch </div> 
    } 

    }) 
} 

你的时间复杂度将是这种做法o(n^2),但可能会根据您的情况最好的情况。您还可以使用临时数据结构(例如Set)获得o(n)时间,其折衷为o(n)空间。

相关问题