JavaScript arrays often need to be interrogated to find if they contain elements that match certain criteria, or are above or below certain values, or if all “slots” in the array match something. While you can use the traditional approach of looping through the array and testing each individual value using a for
loop - or, in a more modern approach, using a forEach
method - there’s a better way: using every
or some
to instantly get an answer.
通常需要对JavaScript数组进行查询,以查找它们是否包含符合特定条件的元素,或者是在特定值之上或之下的元素,或者数组中的所有 “槽”是否都匹配。 虽然您可以使用传统的方法遍历数组并使用for
循环测试每个值-或者,更现代的方法是使用forEach
方法,但还有一种更好的方法:使用every
或some
方法立即获得答案。
每一个 (every)
Let’s say we have an array that contains a series of ages:
假设我们有一个包含一系列年龄的数组 :
var ages = [ 21, 18, 32, 45, 56 ];
If we want to check that every member of the array is an adult (18 or older, for the purpose of this example), we could write the following in the console, using arrow functions:
如果要检查数组的每个成员是否都是成年人(就本例而言,均为18岁或以上),则可以使用箭头功能在控制台中编写以下内容:
ages.every(age => age >= 18)
> true
The result will either be true
or false
, so it could also be written as the test in an if
statement:
结果将为true
或false
,因此也可以将其写为if
语句中的测试:
if (ages.every(age => age >= 18)) {
// do something
}
Because the every
method contains a callback, we could also do the comparison work in an external function. Let’s say we have a JSON array of insects:
因为every
方法都包含一个回调 ,所以我们也可以在一个外部函数中进行比较。 假设我们有一个昆虫的JSON数组 :
var insects = [
{ name: "Monarch", order: "Lepidoptera" },
{ name: "Chinese silkworm moth", order: "Lepidoptera" },
{ name: "Common Buckeye", order: "Lepidoptera" },
{ name: "Hummingbird Hawk-moth", order: "Lepidoptera" }
];
We want to check that every insect in the structure is a member of the order Lepidoptera (the family of moths and butterflies). We could write a function to do so:
我们要检查结构中的每种昆虫是否都属于鳞翅目(蛾和蝴蝶家族)的成员。 我们可以编写一个函数来做到这一点:
function isButterflyOrMoth(element) {
return (element.order === "Lepidoptera");
}
Calling the function on the array and displaying the result with:
在数组上调用函数并显示结果:
console.log(insects.every(isButterflyOrMoth));
Which, in this case, would return true
.
在这种情况下,它将返回true
。
一些 (some)
Similarly, we can also test that some
of the array content passes a particular criteria. Let’s say we want to check that at least one of the entries in the age
array is less than 30. The array itself is unchanged:
同样,我们也可以测试some
数组内容是否符合特定条件。 假设我们要检查age
数组中的至少一项是否小于30。数组本身未更改:
var ages = [ 21, 18, 32, 45, 56 ];
It should be noted that neither all
nor some
change an array; they only check it.
应该注意的是,无论是all
还是some
all
不会改变数组。 他们只检查它。
We want to check that at least one of the age values is less than 30:
我们要检查至少一个年龄值小于 30:
ages.some(age => age < 30)
> true
some
stops at the first match it finds in an array. As such, it can also be used to efficiently check if an array contains a particular value. Given an array containing the original Greek muses:
some
在它在数组中找到的第一个匹配处停止。 这样,它也可以用于有效地检查数组是否包含特定值。 给定一个包含原始希腊缪斯的数组:
var muses = ["Calliope", "Clio", "Euterpe", "Thalia", "Melpomene",
"Terpsichore", "Erato", "Polyhymnia", "Urania"];
We can check if a value is present using a function:
我们可以使用函数检查值是否存在:
function isPresent(array, val) {
return array.some(arrVal => val === arrVal);
}
Using this, we can check for the presence of a value by calling the isPresent
function, passing the array and value under inspection as arguments:
使用此方法,我们可以通过调用isPresent
函数,将要检查的数组和值作为参数传递来检查值的存在:
isPresent(muses, "Calliope");
> true
支持 (Support)
Browser support for both every
and some
is excellent: every modern browser, including IE9+, supports both methods. (Polyfills are available for IE8, if you need them).
两种浏览器支持every
和some
非常出色:每一个现代浏览器,包括IE9 +,支持这两种方法。 (如果需要,可用于IE8填充)。
翻译自: https://thenewcode.com/1103/Everybody-Loves-Somebody-Using-every-and-some-in-JavaScript-arrays