兼容低版本JS的Array.map方法

2018-06-24 00:08:48来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前几天去一家公司面试遇到个这样的问题,兼容IE7下的Array.map方法,一脸蒙蔽。后面回来查了下资料发现。Array.map方法是ECMA-262 标准中新添加的方法,在低版本的JS中是木有的。

看如下兼容性实现方式:

  实现思路:

1,先验证this对象,再将this用Object封装成obj。

 2,获取封装后的obj的属性长度

 3,验证是否有回调方法

 4,根据obj的属性长度lengh生成新的数组,new Array(length)。

 5,遍历obj对象,获取mapKey,mapValue,并将返回值添加到新数组arr中。

 6,将整个新的数组返回。

   代码实现:

(function(){
    if(!Array.prototype.map) {
        Array.prototype.map = function(callback, args) {
            var arg , arr, index ;
 
            if(this == null) {
                throw new TypeError('this is null or not defined');
            }
 
            var obj = new Object(this);
            var len = obj >>> 0;  //获取obj的长度
 
            if(Object.prototype.toString.call(callback) != '[object Function]') {
                throw new TypeError(callback + 'is not a function');
            }
 
            if(args) {
                arg = args;
            }
            // 创建新数组,长度为原数组O长度len
            arr = new Array(len);
            index = 0;
 
            while(index < len) {
                var kValue, mappedValue;
                if(index in obj) {
                    //kValue为索引k对应的值.
                    kValue = obj[index];
                    // 执行callback,this指向arr,参数有三个.分别是kValue:值,index:索引,obj:原数组.
                    mappedValue = callback.call(arg, kValue, index, obj);
                    // 返回值添加到新数组arr中.
                    arr[index] = mappedValue;
                }
                index ++;
            }
            return arr;
        }
    }
})()

上面代码既是Array.map方法的原生实现。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue.js定义一个一级的路由 ----由浅入深

下一篇:[js高手之路]node js系列课程-创建简易web服务器与文件读写