JS数组查找值答案

【问题标题】：JS array find valuesJS数组查找值
【发布时间】：2021-07-21 08:48:58
【问题描述】：

请告诉我为什么如果你在搜索中添加一个值，那么 span 没有被填充？如果你只留下 if，那么一切正常。我无法理解问题可能是什么，因为这是一种常见情况，如果找到代码，那么它会在 span 中显示国家/地区。

没有其他：

var phones = [{
    "country": "UA",
    "code": "+380"
  },
  {
    "country": "RU",
    "code": "+7"
  },
  {
    "country": "MD",
    "code": "+373"
  }
];
$(".phone").keyup(function() {
  var val = $(this).val();
  phones.find(function(phones) {
    if (phones.code == val) {
      $("#county").text(phones.country);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">

其他：

var phones = [{
    "country": "UA",
    "code": "+380"
  },
  {
    "country": "RU",
    "code": "+7"
  },
  {
    "country": "MD",
    "code": "+373"
  }
];
$(".phone").keyup(function() {
  var val = $(this).val();
  phones.find(function(phones) {
    if (phones.code == val) {
      $("#county").text(phones.country);
    } else {
      $("#county").text("no");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">

【问题讨论】：

我很确定在顶部声明 var phones 会阻止它在闭包范围内继承。

标签： javascript arrays filter

【解决方案1】：

因为 .find 正在遍历所有对象。如果您搜索让我们说 +7，它将显示 no then RU 然后 no 再次显示，因此它会覆盖该值而没有 else 它进入一次并保持不变而无需替换。

这里的解决方案是先完成 find，然后执行 if。

我会这样做：

var phones = [{
    "country": "UA",
    "code": "+380"
},
{
    "country": "RU",
    "code": "+7"
},
{
    "country": "MD",
    "code": "+373"
}
];
$(".phone").keyup(function () {
    var val = $(this).val();
    var phoneObj = phones.find(x => x.code == val);

    if (phoneObj == undefined) {
        $("#county").text("no");
    }
    else {
        $("#county").text(phoneObj.country);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <span id="county"></span>
  <input type="text" class="phone">

【讨论】：

【解决方案2】：

那是因为下一个值和输入的代码不一样，所以执行了else循环&显示no。

解释：数组方法迭代所有对象。因此，当输入匹配时，它会显示国家/地区。但是当下一个对象正在迭代时，它与输入值不匹配。因此，前面的文本被覆盖了。

输入为+7，与代码匹配并显示国家。但紧接着+7 与下一个对象进行比较并且代码不匹配。所以执行else循环。

仅使用if 时，如果代码和输入值不匹配，则不会发生任何事情。

【讨论】：