4

前端开发:JS中every()和some()的对比使用

 3 years ago
source link: https://my.oschina.net/sanzhanggui/blog/5117548
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在前端开发过程中,对数组的迭代处理也是比较常见的使用操作。在JavaScript数组中迭代方法常用的有两种:every()和some(),这两个函数都是在JS中对数组进行迭代操作的。那么接下来就来详细对比一下every()和some()的使用。

一、every()

1.1、every语法

基本语法:arr.every(callback(element[, index[, array]])[, thisArg]);

参数介绍:

1.2、every定义

every() 方法用于检测一个数组中的所有元素是否都通过某个指定函数的测试。它返回的是一个bool值。

注意事项:若收到一个空数组,此方法在一切情况下都会返回 true。如果回调函数的每一次返回都为truthy值,返回 true,否则返回 false。

1.3、every描述

every()为数组中的每个元素执行一次 callback 函数,直到它找到一个会使callback返回falsy的元素。如果发现了一个这样的元素,every()将会立即返回false。否则callback为每一个元素返回 true,every就会返回true。callback只会为那些已经被赋值的索引调用,不会为那些被删除或从未被赋值的索引调用。

1.4、every的使用

every() 的简单使用,具体如下:

eg1:检查数组中所有元素是否都小于100的元素

const isBelow = (currentValue) => currentValue < 100;  //数组中所有元素都小于100的元素

const array1 = [10, 30, 39, 99, 10, 13];

console.log(array1.every(isBelow));  // 最后输出的结果为:true eg2:检查数组中所有元素是否都大于100

function isBigEnough(element, index, array) {

return element >= 100;

}

[12, 5, 8, 130, 44].every(isBigEnough);   // false

[120, 540, 180, 130, 440].every(isBigEnough); // true eg3:基于eg2的实例,改写成使用箭头函数的写法

[12, 5, 8, 130, 44].every(x => x >= 100); // false

[120, 540, 180, 130, 440].every(x => x >= 100); // true

二、some()

2.1、some语法

基本语法:arr.some(callback(element[, index[, array]])[, thisArg]);

参数介绍:

2.2、some定义

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

注意事项:如果用一个空数组进行测试,在任何情况下它返回的都是false。数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为false。

2.3、some描述

some()为数组中的每一个元素执行一次 callback 函数,直到找到一个使得callback返回一个可转换为布尔值true的值。如果找到了这样一个值,some()将会立即返回 true。否则some()返回false。callback只会在那些有值的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。

2.4、some的使用

some() 的简单使用,具体如下:

eg1:检查数组中的一个元素是否为偶数

const array = [1, 2, 3, 4, 5];

const even = (element) => element % 2 === 0;     // 检查一个元素是否为偶数

console.log(array.some(even));      // 最后输出的结果为:true eg2:检查数组中的一个元素是否大于100

function isBiggerThan10(element, index, array) {

return element > 100;

}

[20, 50, 80, 10, 40].some(isBiggerThan10);  // false

[120, 500, 800, 10, 40].some(isBiggerThan10); // true eg3:检查判断数组中的元素是否存在某个值

var vegetables = ['cabbage', 'cucumber', 'eggplant', 'potato'];

function checkAvailability(arr, val) {

return arr.some(function(arrVal) {

return val === arrVal;

});

}

checkAvailability(vegetables, 'tomato');   // false

checkAvailability(vegetables, 'eggplant'); // true eg4:箭头函数运用于some()中,以eg2为例子来改写

[20, 50, 80, 10, 40].some(x => x > 100);  // false

[120, 500, 800, 10, 40].some(x => x > 100); // true

三、every()和some()的对比

3.1、相同点

every()和some()这两个函数都是在JS中对数组进行迭代操作的,主要用于检查数组中所有元素是否都符合指定函数的测试,而且要检测数组中的所有元素。

3.2、不同点

every()是检测数组中所有元素都满足某一个指定函数的测试,只有所有元素全部满足才会返回true;some()是检测数组中所有元素只要有某个元素满足就返回true,如果全部不满足才返回false。

some()是一直在数组中寻找符合条件的元素值,如果数组中包含符合条件的值并且被立马找到,就直接返回true,剩下的元素不会再去查找,也就是说不会继续迭代下去;every()是从开始在数组中查找符合条件的元素值,数组中只要有一个元素不符合条件的元素值,就直接返回false,剩下的元素也不会再去查找,不会继续迭代下去。

every()和some()这两个函数的选择使用,需要根据实际情况以及具体业务需求来做选择使用,这里不再过多赘述。以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK