JavaScript数组筛选不按预期工作。

huangapple
go评论106阅读模式
英文:

JavaScript array filter not working as expected

问题

  1. 我有一个类似这样的数组：
  3. <!-- 开始代码段: js 隐藏: false 控制台: true babel: false -->
  5. <!-- 语言: lang-js -->
  7.     var arrayd = [{
  8.             "CATEGORY_ID": "1",
  9.             "CATEGORY": "a",
  10.           },
  11.           {
  12.             "CATEGORY_ID": "1",
  13.             "CATEGORY": "b",
  14.           },
  15.           {
  16.             "CATEGORY_ID": "1",
  17.             "CATEGORY": "c",
  18.           },
  19.           {
  20.             "CATEGORY_ID": "1",
  21.             "CATEGORY": "d",
  22.           },
  23.           {
  24.             "CATEGORY_ID": "3",
  25.             "CATEGORY": "e",
  26.           },
  27.           {
  28.             "CATEGORY_ID": "18",
  29.             "CATEGORY": "f",
  30.           }
  31.         ];
  32.         
  33.         var searchTerm = 1;
  34.         
  35.         arrayd = arrayd.filter(
  36.           s => parseInt(s.CATEGORY_ID.indexOf(parseInt(searchTerm))) !== -1
  37.         );
  38.         
  39.         console.log(arrayd);
  41. <!-- 结束代码段 -->
  44. 我试图使用 `searchTerm` 来过滤这个数组。
  46. 在这种情况下，`searchTerm` 的值为 1，但是响应中元素的 ID 为 `18` 也被返回了。
  48. 如何修复这个问题？
  50. 注意：`searchTerm` 的值始终为数字。
  52. [Fiddle][1]
  54.   [1]: https://jsfiddle.net/67qkf4vx/
英文:

I have an array like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var arrayd = [{
  2. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  3. &quot;CATEGORY&quot;: &quot;a&quot;,
  4. },
  5. {
  6. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  7. &quot;CATEGORY&quot;: &quot;b&quot;,
  8. },
  9. {
  10. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  11. &quot;CATEGORY&quot;: &quot;c&quot;,
  12. },
  13. {
  14. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  15. &quot;CATEGORY&quot;: &quot;d&quot;,
  16. },
  17. {
  18. &quot;CATEGORY_ID&quot;: &quot;3&quot;,
  19. &quot;CATEGORY&quot;: &quot;e&quot;,
  20. },
  21. {
  22. &quot;CATEGORY_ID&quot;: &quot;18&quot;,
  23. &quot;CATEGORY&quot;: &quot;f&quot;,
  24. }
  25. ];
  26. var searchTerm = 1;
  27. arrayd = arrayd.filter(
  28. s =&gt; parseInt(s.CATEGORY_ID.indexOf(parseInt(searchTerm))) !== -1
  29. );
  30. console.log(arrayd);

<!-- end snippet -->

What I'm trying to dimis filter this array using a searchTerm.

In this scenario, searchTerm has value 1 but in the response, element with id 18 is also getting returned.

How to fix this?

Note: searchTerm will always be numbers.

Fiddle

答案1

得分: 3

问题在于18如果你将其视为字符串，则包含了1。正如String.prototype.indexOf()文档所述：

> indexOf()方法返回指定值在调用的字符串对象中的第一个出现的索引，从fromIndex开始搜索。如果未找到该值，则返回-1。

因此，indexOf返回了一个不是-1的值，这就是为什么你也从数组中获取到了该对象。

只需简单地使用===和parseInt如下所示：

  1. var arrayd = [{
  2.     "CATEGORY_ID": "1",
  3.     "CATEGORY": "a",
  4.   },
  5.   {
  6.     "CATEGORY_ID": "1",
  7.     "CATEGORY": "b",
  8.   },
  9.   {
  10.     "CATEGORY_ID": "1",
  11.     "CATEGORY": "c",
  12.   },
  13.   {
  14.     "CATEGORY_ID": "1",
  15.     "CATEGORY": "d",
  16.   },
  17.   {
  18.     "CATEGORY_ID": "3",
  19.     "CATEGORY": "e",
  20.   },
  21.   {
  22.     "CATEGORY_ID": "18",
  23.     "CATEGORY": "f",
  24.   }
  25. ];
  27. var searchTerm = 1;
  29. arrayd = arrayd.filter(
  30.   s => parseInt(s.CATEGORY_ID) === searchTerm
  31. );
  33. console.log(arrayd);

希望这有所帮助！

英文:

The issue is that 18 is containing 1 if you consider as a string. As String.prototype.indexOf() documentation states:

> The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

So indexOf returned a not -1 value and that's why you got back that object as well from your array.

Just simply use === and parseInt as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var arrayd = [{
  2. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  3. &quot;CATEGORY&quot;: &quot;a&quot;,
  4. },
  5. {
  6. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  7. &quot;CATEGORY&quot;: &quot;b&quot;,
  8. },
  9. {
  10. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  11. &quot;CATEGORY&quot;: &quot;c&quot;,
  12. },
  13. {
  14. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  15. &quot;CATEGORY&quot;: &quot;d&quot;,
  16. },
  17. {
  18. &quot;CATEGORY_ID&quot;: &quot;3&quot;,
  19. &quot;CATEGORY&quot;: &quot;e&quot;,
  20. },
  21. {
  22. &quot;CATEGORY_ID&quot;: &quot;18&quot;,
  23. &quot;CATEGORY&quot;: &quot;f&quot;,
  24. }
  25. ];
  26. var searchTerm = 1;
  27. arrayd = arrayd.filter(
  28. s =&gt; parseInt(s.CATEGORY_ID) === searchTerm
  29. );
  30. console.log(arrayd);

<!-- end snippet -->

I hope this helps!

答案2

得分: 0

将CATEGORY转换为数字并检查是否等于搜索词：

  1. const arrayd = [{"CATEGORY_ID":"1","CATEGORY":"a"},{"CATEGORY_ID":"1","CATEGORY":"b"},{"CATEGORY_ID":"1","CATEGORY":"c"},{"CATEGORY_ID":"1","CATEGORY":"d"},{"CATEGORY_ID":"3","CATEGORY":"e"},{"CATEGORY_ID":"18","CATEGORY":"f"}];
  3. const searchTerm = 1;
  5. const result = arrayd.filter(
  6.   s => +s.CATEGORY_ID === searchTerm
  7. );
  9. console.log(result);
英文:

Convert the CATEGORY to a number and check if it's equal to the search term:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const arrayd = [{&quot;CATEGORY_ID&quot;:&quot;1&quot;,&quot;CATEGORY&quot;:&quot;a&quot;},{&quot;CATEGORY_ID&quot;:&quot;1&quot;,&quot;CATEGORY&quot;:&quot;b&quot;},{&quot;CATEGORY_ID&quot;:&quot;1&quot;,&quot;CATEGORY&quot;:&quot;c&quot;},{&quot;CATEGORY_ID&quot;:&quot;1&quot;,&quot;CATEGORY&quot;:&quot;d&quot;},{&quot;CATEGORY_ID&quot;:&quot;3&quot;,&quot;CATEGORY&quot;:&quot;e&quot;},{&quot;CATEGORY_ID&quot;:&quot;18&quot;,&quot;CATEGORY&quot;:&quot;f&quot;}];
  2. const searchTerm = 1;
  3. const result = arrayd.filter(
  4. s =&gt; +s.CATEGORY_ID === searchTerm
  5. );
  6. console.log(result);

<!-- end snippet -->

答案3

得分: 0

我不知道为什么你要以如此复杂的方式去做这件事，但你可以轻松地通过以下方式实现你想要的效果：

  1. arrayd = arrayd.filter(
  2. s => parseInt(s.CATEGORY_ID)===searchTerm
  3. );

这将返回你期望的4个结果。

英文:

I don't know why you're trying to do that in such a convoluted way but you can easily achieve what you want by using:

  1. arrayd = arrayd.filter(
  2. s =&gt; parseInt(s.CATEGORY_ID)===searchTerm
  3. );

This will return the 4 results you expect.

答案4

得分: 0

我希望以下答案能帮助您。这是一个用于检查searchItem的回调通用函数。

  1. var arrayd = [{
  2.     "CATEGORY_ID": "1",
  3.     "CATEGORY": "a",
  4. },
  5. {
  6.     "CATEGORY_ID": "1",
  7.     "CATEGORY": "b",
  8. },
  9. {
  10.     "CATEGORY_ID": "1",
  11.     "CATEGORY": "c",
  12. },
  13. {
  14.     "CATEGORY_ID": "1",
  15.     "CATEGORY": "d",
  16. },
  17. {
  18.     "CATEGORY_ID": "3",
  19.     "CATEGORY": "e",
  20. },
  21. {
  22.     "CATEGORY_ID": "18",
  23.     "CATEGORY": "f",
  24. }
  25. ];
  26. var searchTerm = 1;
  28. arrayd = arrayd.filter(s => parseInt(s.CATEGORY_ID) == searchTerm)
  29. console.log(arrayd);

您可以在以下链接中查看完整的代码：http://jsfiddle.net/7mx8yj3z/

英文: 
  1. I hope the following answer will help you. It&#39;s a callback common function to check with the searchItem.
  2. var arrayd = [{
  3. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  4. &quot;CATEGORY&quot;: &quot;a&quot;,
  5. },
  6. {
  7. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  8. &quot;CATEGORY&quot;: &quot;b&quot;,
  9. },
  10. {
  11. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  12. &quot;CATEGORY&quot;: &quot;c&quot;,
  13. },
  14. {
  15. &quot;CATEGORY_ID&quot;: &quot;1&quot;,
  16. &quot;CATEGORY&quot;: &quot;d&quot;,
  17. },
  18. {
  19. &quot;CATEGORY_ID&quot;: &quot;3&quot;,
  20. &quot;CATEGORY&quot;: &quot;e&quot;,
  21. },
  22. {
  23. &quot;CATEGORY_ID&quot;: &quot;18&quot;,
  24. &quot;CATEGORY&quot;: &quot;f&quot;,
  25. }
  26. ];
  27. var searchTerm = 1;
  28. arrayd = arrayd.filter(s =&gt; parseInt(s.CATEGORY_ID) == searchTerm)
  29. console.log(arrayd);

http://jsfiddle.net/7mx8yj3z/

huangapple
  • 本文由 发表于 2020年1月3日 19:41:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/59578012.html
  • arrays
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定