遍历数组的方法和数组的遍历方法(3+10种)(下)

简介

接上回已经把遍历数组的方法说了,那么这里我们就来瞧一瞧数组的遍历方法
回顾一下什么是数组的遍历方法,数组的遍历方法就是数组的实例方法中可遍历数组元素的:

forEach()、map()、filter()、some()、every()、reduce()、find()、findIndex()、indexOf()、lastIndexOf()

数组的遍历方法

方法 返回值 是否改变原数组 是否检测空数组 能否链式调用 是否触发实时视图更新
forEach()
map()映射 返回新数组 可以
filter()过滤器 返回新数组 可以 可以
some() 返回布尔值
every() 返回布尔值
reduce() 返回运算结果 直接报错 可以
find() 返回元素 可以
findIndex() 返回索引
indexOf() 返回索引
lastIndexOf() 返回索引
  • 空数组和数组元素含有空值是不一样的!

1. forEach()

说明:

按升序为数组中含有效值的每一项执行一次 回调函数,那些已删除或者未初始化的项将被跳过,回调函数里面可以依次传入数组的值、索引、数组本身(索引和数组本身都是可选填,下面的如果没有特别说明都是如此)

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        arr.forEach((item, key, arr) => {
            console.log(item, key, arr);
            item += 1
            key += 1
            console.log(item, key, arr);
        });

        console.log('========');
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , undefined, 123]
        arr1.forEach((item, key, arr) => {
            console.log(item, key, arr);
        });

输出:

2. map()映射遍历

说明:

创建一个新数组,数组中的元素为原始数组元素调用函数处理后的值原数组不变,map()可以进行链式调用。

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let map1 = arr.map((item, key, arr) => {
            item += 1
            return item
        });
        console.log(map1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , undefined, 123]
        let map2 = arr1.map((item, key, arr) => {
            item += 1
            console.log(item, key, arr);
            return item
        });
        console.log(map2);
        console.log(arr1);
        console.log('========');

        // 箭头回调简写
        let map3 = arr1.map(key => key += 1);
        console.log(map3);

输出:

3. filter()过滤器遍历

说明:

创建一个新数组,其包含通过所提供函数实现的测试的所有元素,意思就是为数组中的每个元素都调用一次回调函数,并利用所有使得回调函数返回 true 或等价于 true 的值的元素创建一个新数组,原数组不变。

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let filter1 = arr.filter((item, key, arr) => {
            item += 1
            return item
        });
        console.log(filter1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , undefined, 123]
        let filter2 = arr1.filter((item, key, arr) => {
            item += 1
            console.log(item, key, arr);
            return item
        });
        console.log('========');
        console.log(filter2);
        console.log(arr1);
        console.log('========');

        // 箭头回调简写
        let filter3 = arr1.filter(key => key += 1);
        console.log(filter3);

输出:

4. some()

说明:

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true,有true则true。一般多用于做判断是否有存在满足条件的。

  • 如果用一个空数组进行测试,在任何情况下它返回的都是false。

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let some1 = arr.some((item, key, arr) => {
            return item > 519
        });
        console.log(some1);

        let some2 = arr.some(item => item > 520);
        console.log(some2);

        let arr1 = ['wtf', , '', undefined, 123]
        let arr2 = []

        function checkItem(arr, item) {
            return arr.some(val => item === val)
        }

        console.log('========');
        console.log(checkItem(arr1, ));
        console.log(checkItem(arr1, ''));
        console.log(checkItem(arr1, undefined));

        console.log('========');
        console.log(checkItem(arr2, ));
        console.log(checkItem(arr2, ''));
        console.log(checkItem(arr2, undefined));

        console.log('========');
        console.log(arr);
        console.log(arr1);

输出:

5. every()

说明:

判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true,有false则false。一般多用于判断是否少了什么的。

  • 若收到一个空数组,此方法在任何情况下都会返回 true。

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let every1 = arr.every((item, key, arr) => {
            return item < 520
        });
        console.log(every1);

        let every2 = arr.every(item => item < 521)
        console.log(every2);

        let arr1 = ['wtf', , '', undefined, 123]
        let arr2 = []

        function checkItem(arr, item) {
            return arr.every(val => item === val)
        }

        console.log('========');
        console.log(checkItem(arr1, ));
        console.log(checkItem(arr1, ''));
        console.log(checkItem(arr1, undefined));

        console.log('========');
        console.log(checkItem(arr2, ));
        console.log(checkItem(arr2, ''));
        console.log(checkItem(arr2, undefined));


        console.log('========');
        console.log(arr);
        console.log(arr1);

输出:

6. reduce()迭代(累加器)

说明:

对数组中的每个元素按顺序(升序)执行一个由您提供的reducer函数,将其结果汇总为单个返回值,不会改变原数组。
参数依次为:(自定义函数运算的值,数组元素,索引值,原数组)

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let reduce1 = arr.reduce((val, item, key, arr) => {
            console.log(val, item, key, arr);
            return val + item
        });
        console.log(reduce1);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123]
        let reduce2 = arr1.reduce((val, item, key, arr) => {
            console.log(val, item, key, arr);
            return val + item
        });
        console.log(reduce2);
        console.log('========');

        let arr2 = []
        let reduce3 = arr2.reduce((val, item, key, arr) => {
            console.log(val, item, key, arr);
            return val + item
        });
        console.log(reduce3);

输出:

7. find()

说明:

该方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。只要找到满足条件的就会停止继续遍历。在第一次调用回调函数时会确定元素的索引范围,注意回调函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。

  • find()只能返回值,如果需要找到第一个满足条件的索引只能用findIndex()

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let find1 = arr.find((item, key, arr) => {
            console.log(item, key, arr);
            return item < 521
        });
        console.log(find1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let find2 = arr1.find((item, key, arr) => {
            console.log(item, key, arr);
            return item > 3
        });
        console.log(find2);
        console.log('========');

        let arr2 = []
        let find3 = arr2.find(item => item);
        console.log(find3);

输出:

8. findIndex()

说明:

该方法返回数组中满足提供的测试函数的第一个元素的索引,若没有找到对应元素则返回 -1。只要找到满足条件的就会停止继续遍历。在第一次调用回调函数时会确定元素的索引范围,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数。

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let findIndex1 = arr.findIndex((item, key, arr) => {
            console.log(item, key, arr);
            return item > 519
        });
        console.log('========');
        console.log(findIndex1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let findIndex2 = arr1.findIndex((item, key, arr) => {
            console.log(item, key, arr);
            return item === ''
        });
        console.log(findIndex2);
        console.log('========');

        let arr2 = []
        let findIndex3 = arr2.findIndex(item => item);
        console.log(findIndex3);

输出:

9. indexOf()

说明:

该方法返回在数组中从前往后查找首个被找到的元素在数组中的索引位置,如果不存在,则返回 -1。
传参依次为:(需要找到的元素, 开始查找的位置(可省略))

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let indexOf1 = arr.indexOf(520, 0);
        console.log(indexOf1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let indexOf2 = arr1.indexOf(undefined, 0);
        console.log(indexOf2);

        let arr2 = []
        let indexOf3 = arr2.indexOf('');
        console.log(indexOf3);

输出:

10. lastIndexOf()

说明:

该方法返回在数组中从后往前查找首个被找到的元素在数组中的索引位置,如果不存在,则返回 -1。
传参依次为:(需要找到的元素, 开始查找的位置(可省略))

使用:

        let arr = [1, 2, 4, 3, 520, 6]
        let lastIndexOf1 = arr.lastIndexOf(520, 0);
        console.log(lastIndexOf1);
        console.log(arr.lastIndexOf(520, -2));
        console.log(arr.lastIndexOf(520, -3));
        console.log(arr.lastIndexOf(1, -6));

        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let lastIndexOf2 = arr1.lastIndexOf('');
        console.log(lastIndexOf2);

        let arr2 = []
        console.log(arr2.lastIndexOf());

输出:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,490评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,581评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,830评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,957评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,974评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,754评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,464评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,847评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,819评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,482评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2 355

推荐阅读更多精彩内容