浅析ES5 中对数组遍历的5个扩展方法

Posted 2020-09-18

1. ForEach

功能: 遍历数组中的每一个元素, 并且将每一个元素的处理过程交给回调函数

语法: 数组.forEach( callback )

回调函数中会传入两个参数, 一个是遍历的数组元素, 一个是当前的索引.

    例如: 遍历打印数组中的每一个元素与索引号

    传统:

        for ( var i = 0; i < arr.length; i++ ) {

            console.log( i + ‘, ‘ + arr[ i ] );  // 打印, 索引号 与 当前元素

        }

    forEach:

        arr.forEach( function ( value, index ) {

            console.log( index + ‘, ‘ + value );

        } );

   

 JQ中each方法与forEach方法的异同

  -> 参数

     jq: ( arr, 回调函数 ), 回调函数的参数是 i, v

     数组: ( 回调函数 ), 回调函数的参数是 v, i

  -> 返回值

     jq: 有返回值, 即当前遍历的数组或对象.

     数组: 没有返回值

     补充: jq 方法可以遍历数组, 伪数组, 对象; 而数组中的方法只能遍历数组.

   -> 执行的功能

      jq 中 this 指的是当前遍历的对象, 而数组中的 this 默认是 window.

      在 jq 中遍历的数据如果是一个基本类型的数据( number, boolean, string ),

       this 指其包装对象. 如果需要拿到遍历的基本类型数组的值, 要么使用 valueOf, 要么使用参数 v

       数组的 forEach 方法不能停止, 只能全部遍历完毕才会结束.

       jq 中直接给回调函数返回 false 即可跳出循环.

2.  map

功能: 将一个集合按照特定的规律变成另一个集合..

语法: 数组.map( 回调函数 )

简单的来理解, map也是在遍历数组. 这种理解不准确…

分析: 如果回调函数没有返回值, 注意默认返回了 undefined

    例如: 有数字构成的集合, 将其中 的数字扩大一倍.

    map 的实现逻辑

    1> map 函数要返回一个数组

    2> map 返回的这个数组的元素由 回调函数的返回值决定

    map 函数也是如此, map 函数中的回调函数来实现我们的规则

        var newArr = arr.map( function ( v, i ) {

            return v * 2;

        });

    我们的要求是将数组中的元素转换成另一个东西, 那么这个转换的过程由回调函数来实现

    典型的案例:

        ‘a,b,c‘.split( ‘,‘ ).map(function ( v ) {

            return ‘<td>‘ + v + ‘</td>‘;

        });

        // [ ‘a‘, ‘b‘, ‘c‘ ] => [ ‘<td>a</td>‘, ‘<td>b</td>‘, ‘<td>c</td>‘ ]

 

    将箭头函数引入 map. 上面的案例就可以改良成

        ‘a,b,c‘.split( ‘,‘ ).map( v => ‘<td>‘ + v + ‘</td>‘ );

jq 中map 方法与map的异同

-> 参数

 与其回调函数的参数一样

 -> 返回值

    数组的返回值是一个数组, jq 的返回值也是数组

    数组的返回值必须保证每一个回调函数都有返回数据. 如果没有相当于 返回 undefined

     jq 中 map 方法的返回值中的元素由 回调函数的返回值决定, 如果没有回调函数返回,则为空数组

     其实在 jq 中 map 相当于结合了数组中提供的 map 与 filter 的功能

  -> 执行的功能

       如果 jq 作为 $.map 来调用, 回调函数中不能使用 this, 其 this 是 window, 参数是 v,i

       如果 jq 作为 $( ... ).map() 来调用, 回调函数中的 this 就是当前遍历的元素. 其参数是 i, v        

            补充:

                $.map( arr, function ( v, i ) { ... } )

                $( ‘...‘ ).map( function () { ... } )

3.4. every 和 some

some 方法, 表示判断数组中的元素只要含有某一个条件即可

every 方法, 表示判断数组中的每一个元素必须含有某个条件

语法: 数组.方法名( 回调函数 ) -> boolean

    说明:

    1> 回调函数依旧是遍历数组的每一个元素

    2> 回调函数的参数依旧是 v, i

    3> 回调函数的作用是用来判断数组中的元素, 所以回调函数有返回值, 返回一个 boolean

    4> some 方法凡是发现满足了条件的元素就会停止遍历, 并返回 true, 否则返回 false.

    5> every 方法凡是发现了一个元素不满足条件就会停止遍历, 并返回 false, 否则返回 true.

    该方法与逻辑中断类似 是逻辑中断的升级版.

    ||  表达式1 || 表达式2

        如果表达式1为假, 才会判断表达式2, 如果表达式1已经真 那么不执行表达式2, 就得到结果

    &&  表达式1 && 表达式2

        如果表达式1为假, 那么不在判断表达式2, 直接得到结果为假, 如果表达式1为真, 再判断表达式2

5. filter

功能: 将一个数组中符合某要求的所有元素筛选出来, 组成一个新的数组返回.

语法: 数组.filter( 回调函数 ) -> 新数组

回调函数的参数依旧是 v, i

回调函数判断的时候, 判断元素 v 是否符合要求, 如果符合返回 true, 否则返回 false

    filter 就会将所有的符合元素组成新的数组

    案例: 将所有的数字中奇数取出来.

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

        arr.filter( v => v % 2 == 1 );

        等价于

        arr.filter( function ( v ) {

            return v % 2 == 1;

        } );

    filter: 在数组中筛选你需要的数据, 组成一个新数组( MDN 上找案例 ).

    类比的案例: 有一个字符串数组, 将其中元素中含有 字符 e 的字符串取出来, 构成新数组

            var arr = [ ‘e‘, ‘ab‘, ‘abcde‘, ‘abcdf‘ ];

            // 语法:

            var newArr = arr.filter(function ( v ) {

                return v.indexOf( ‘e‘ ) > -1;

            });

        尝试使用自己的算法将其功能实现出来

            function filter ( arr, callback ) {

                var res = [];

                for ( var i = 0; i < arr.length; i++ ) {

                    if ( callback( arr[ i ], i ) ) {

                     // 如果判断为真才会进入

                     res.push( arr[ i ] );

                    }

                }

 

                // 返回值? 是一个新数组

                return res;

            }