javascript中数组遍历方法forEach,every,some的区别

分类:Javascript |

假设有一个有序数组[1, 2, 3, 4, 5, 6, 7, 8, 9],我们要找出其中所有小于等于5的元素,为了节约时间,要在找完符合条件的所有数据时退出循环。


forEach:

var s = [1, 2, 3, 4, 5, 6, 7, 8, 9];


s.forEach( function (elem, index) {


    console.log("第"+index+"次循环:"+elem);


    if(elem >5) return;

})


打印出的结果为:


第0次循环:1 

第1次循环:2

第2次循环:3

第3次循环:4

第4次循环:5

第5次循环:6

第5次循环:6

第6次循环:7

第7次循环:8

第8次循环:9


结果发现return并不能终止循环,遍历还是会继续进行下去。


every:

var s = [1, 2, 3, 4, 5, 6, 7, 8, 9];


s.every( function (elem, index) {


    console.log("第"+index+"次循环:"+elem);


    if(elem <=5) return true;

})


结果:


第0次循环:1

第1次循环:2

第2次循环:3

第3次循环:4

第4次循环:5

第5次循环:6


发现循环遍历可以控制了,不过如果要按照需求来做,那么应将if条件改为“<”号,因为every每轮循环返回的boolean值将决定下轮循环是否执行,true为是,false为否,false为默认返回值。


some:

var s = [1, 2, 3, 4, 5, 6, 7, 8, 9];


s.some( function (elem, index) {


    console.log("第"+index+"次循环:"+elem);


    if(elem >= 5) return true;

})


结果:


第0次循环:1

第1次循环:2

第2次循环:3

第3次循环:4

第4次循环:5



发现some中默认返回值和every一样也是false,不过和every不一样的是true控制some跳出循环(不再进行下一次循环)。


总结

forEach:循环不可控


every,some循环可控


跳出循环条件:

every—return false(默认)

some—return true


继续执行条件:

every—return true

some—return false(默认)

————————————————

以上转自:https://blog.csdn.net/u013668370/article/details/78510462


以下是用法

当想跳出循环可以使用every 和 some方法,下面是简单的总结

every 当内部return false时跳出整个循环(return true;也是需要写)

//every()当内部return false时跳出整个循环
let list = [1, 2, 3, 4, 5];
list.every((value, index) => {
    if(value > 3){
        console.log(value)// 4
        return false;

    }else{
        console.log(value)// 1 2 3
        return true;
    }

});
list.every((value, index) => {
    if(value > 3){
        console.log(value)
        return false;

    }else{
        console.log(value)// 1
        // return true;
        // 如果没有返回值true 的话,也会跳出循环
    }

});

forEach没有返回值,只针对每个元素调用func。

// forEach没有返回值,只针对每个元素调用func。
    let list2 = [1, 2, 3, 4, 5];
    list2.forEach((value, index) => {
        if(value > 3){
            console.log(value)// 4 5
            return false;//没有返回值,ruturn false 仍向下执行

        }else{
            console.log(value)// 1 2 3
            return true;
        }
    });

some 当内部return true时跳出整个循环

    let list3 = [1, 2, 3, 4, 5];
    list3.some((value, index) => {
        if(value === 3){
            return true;//当内部return true时跳出整个循环
        }
        console.log(value)// 1 2 
    });

map 有返回值,返回一个新的数组,每个元素为调用func的结果。

    let list5 = [1, 2, 3, 4, 5];
    let arr = [];
    arr = list5.map((value, index) => {
        return value * 2;
    });
    console.log(arr);//[2, 4, 6, 8, 10]



ES5为数组新增了5个迭代方法,语法简单易懂,而且非常实用,大大方便了处理数组的任务。
  这5个迭代方法的函数接受3个参数:数组中当前项的值、该项在数组中的索引值和数组对象本身。

1. every

作用:对数组中的每一项运行给定函数,如果每一项的运行结果都返回 true,则返回 true。
  示例:

// 示例数组var arr = [3, 'abc', 6, 0, '5', 8, true, null, function(){console.warn('hello')}, {a:1, b:2}];var result = null;// 判断数组中每一项是否都为 Number 类型result = arr.every(function(item) {
     return !isNaN(item);});console.log('结果:' + result);  // 结果:false

2. some

作用:与 every 方法作用类似,但 every 是只有每一项都为 true 才整体返回 true,而 some 是只要数组任何一项返回 true 则整体返回 true。
  示例:

// 判断数组中是否存在 Boolean 类型result = arr.some(function(item) {
    return typeof item === 'boolean';});console.log('结果:' + result);  // 结果:true

3. filter

作用:顾名思义有“过滤”的意思,运行给定函数返回 false 的数组项会被过滤掉,而返回 true 的每一项会组成一个数组被整体返回。
  示例:

// 返回数组中所有的偶数result = arr.filter(function(item) {
    if (!isNaN(item)) {
        return item % 2 === 0;
    }});console.log('结果:' + result);  // 结果:6,0,8

注:整体返回的是一个数组

4. map

作用:前面3个方法都是和 true | false 打交道的,即通过判断给定函数运行结果的布尔值来处理数组,map是直接针对每一项,返回每次运行给定函数结果组成的数组。
  示例:

// 将数组所有项都转换成字符串result = arr.map(function(item) {
    return String(item);});console.log('结果:' + result);  // 结果:'3','abc','6','0','5','8','true','null','function(){console.warn('hello')}','[object Object]'

注:整体返回的是一个数组

5. forEach

作用:这个方法本质上和使用 for 循环迭代数组是一样的,但代码更加优雅简洁。
  示例:

// 遍历数组,找到 Function 类型并运行arr.forEach(function(item) {
    if (typeof item === 'function') {
        eval(item());  // console控制台输出:hello
    }});

注:这个方法没有返回值