JavaScript数组方法map和each

map和each方法是是数组操作最常用的,虽然简单,但功能强大,用起来非常方便。

map()方法功能:将调用的数组的每个元素传递给指定的函数,并返回一个数组,该数组由函数的返回值构成。

注:map返回的是新数组,它不修改调用的数组。

each方法自然不必多讲,替代for语句的利器。

虽然map和each在各种工具库如underscore、lodash、jquery等中都有实现,个人更喜欢jquery的实现方式,原因有两个:
1、同时支持数组和对象,更具有通用性。
2、map回调函数中返回null可以删除当前项,便于过滤数组项,underscore和lodash中不支持。

jQuery中的实现方式如下,我简单改动了下,便于直接拷贝使用

<code class="language-javascript">//jQuery map和each实现
var $ = {
    map(elems, callback, arg){
        var length, value,
            i = 0,
            ret = [];
        //是不是数组
        if(Object.prototype.toString.call(elems) == '[object Array]') {
            length = elems.length;
            for( ; i &lt; length; i++){
                value = callback(elems[i], i, arg);
                if (value != null){
                    ret.push(value);
                }
            }
        }else{  //对象
            for(i in elems){
                value = callback(elems[i], i, arg);
                if(value != null){
                    ret.push(value);
                }
            }
        }
        //展开嵌套数组
        return [].concat.apply([], ret);
    },
    each(obj, callback) {
        var length, i = 0;
        if (Object.prototype.toString.call(obj) == '[object Array]'){ //数组
            length = obj.length;
            for( ; i &lt; length; i++){
                if(callback.call(obj[i], i, obj[i]) === false){ //对象
                    break;
                }
            }
        }else{
            for(i in obj){
                if(callback.call(obj[i], i, obj[i]) === false){
                    break;
                }
            }
        }
        return obj;
    }
};
</code>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>