在jQuery中使用Array.find方法替代？

Question

我正在使用Array.find的this question方法我之前问过，我已经意识到它在IE中不受支持。 IE中是否支持jQuery等效甚至是不同的Javascript等价物？

var zones = [{
    "zone": "one",
    "zipcodes": ["69122", "69125", "69128", "69129"]
  },
  {
    "zone": "two",
    "zipcodes": ["67515", "67516", "67518", "67521"]
  }
];

$(function() {
  $('#userZip').submit(function(e) {
    e.preventDefault();
    var userZip = $('input[type="text"]').val();
    var zone = zones.find(function(zone) {
      return zone.zipcodes.indexOf(userZip) > -1;
    });
    alert("Zone: " + zone.zone);
  });
});

i {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userZip">
  <i>Enter zip code "69122" as an example</i>
  <input type="text" placeholder="zip" />
  <input type="submit" />
</form>

Answer 1

一个polyfill：

Array.prototype.find = Array.prototype.find || function (callback) {
    for (var i = 0; i < this.length; i++) {
      if (callback(this[i], i)) {
        return this[i];
      }
    }
};

如果你想要一个更好的，请查看你提供的第一个链接的polyfill部分...

Answer 2

IE9 +支持Array.filter，如果这足够好的话？

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

显然，你可能会得到多个结果，所以如果你的意图那么就需要选择第一个结果。

Answer 3

或者，您还可以使用标准for循环？

var zones = [{
    "zone": "one",
    "zipcodes": ["69122", "69125", "69128", "69129"]
  },
  {
    "zone": "two",
    "zipcodes": ["67515", "67516", "67518", "67521"]
  }
];

function findZone(zns, zip) {
  var zone = {};
  for (var i = 0; i < zns.length; i++) {
    for (var j = 0; j < zns[i].zipcodes.length; j++) {
      if (zip === zns[i].zipcodes[j]) {
        zone = zns[i];
        break;
      }
    }
  }
  return zone;
}

console.log(findZone(zones, "67515"))

Answer 4

使用jQuery的函数：

$(function() {
  $('#userZip').submit(function(e) {
    e.preventDefault();
    var userZip = $('input[type="text"]').val();
    var zone = $.grep(zones, function (element, index) {
      if ($.inArray( userZip, element.zipcodes ) > -1) return true;
    });
    alert("Zone: " + zone[0].zone);
  });
});

在这里小提琴：https://jsfiddle.net/beekvang/p76f1zev/

Answer 5

jQuery.grep的工作方式类似于Array的find方法，因为它使用提供的函数对Array-Like对象和过滤器进行操作。结果是一个新数组，只包含那些通过测试的元素。它还有一个可选的invert参数。

例如为了你的代码

var filteredZones = $.grep(zones, function(zone) {
  return zone.zipcodes.indexOf(userZip) > -1;
});

if (filteredZones.length) {
  var zone = filteredZones[0];
}

你可以在这里阅读更多相关信息 - http://api.jquery.com/jquery.grep/