Es5常用方法兼容实现与一些新方法

Function:bind
Array:some,map,every,filter,reduce,reduceRight,indexOf,lastIndexOf ,isArray(Array.isArray([]))
String: trim ,'sdfd'[2] // 'f'
Date: Date.now() // 1490106171645

bind

if (!function() {}.bind) {
   
    Function.prototype.bind = function(){ 
        var self = this, // 保存原函数
        context = [].shift.call( arguments ),
        args = [].slice.call( arguments );
        return function(){ 
            // 返回一个新的函数
            // 需要绑定的 this 上下文 // 剩余的参数转成数组
            return self.apply( context, [].concat.call( args, [].slice.call( arguments ) ) ); 
            // 执行新的函数的时候,会把之前传入的 context 当作新函数体内的 this
            // 并且组合两次分别传入的参数,作为新函数的参数
        } 
    };
}

[1,2,4].map(function(){})

if(!Array.prototype.map){
     Array.prototype.map=function (fn,context) {
         var context = context;
         var result = [];
         if (typeof fn === "function") {
             for(var i=0,len=this.length;i<len;i++){
                 result.push(fn.call(context,this[i],i,this));
             }
         }
         return result;
     }
 }
易犯错误:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]
// 因为parseInt能接受第二个参数,进制数,0,1进制会出现NAN

[1,2,3,4].foreach(function(){})

if(!Array.prototype.myForEach){
        Array.prototype.myForEach = function myForEach(callback,context){
            var context = context;
            if(typeof callback === 'function'){
                for(var i = 0,len = this.length; i < len;i++) {
                    callback && callback.call(context,this[i],i,this);
                }
            }
        }
    }

[1,2,3,4].filter(function(){})

    if (typeof Array.prototype.filter != "function") {
        Array.prototype.filter = function (fn, context) {
            var arr = [];
            if (typeof fn === "function") {
                for (var i = 0, length = this.length;  i< length; i++) {
                    if(fn.call(context, this[i], i, this)){
                        arr.push(this[i]);
                    }
                }
            }
            return arr;
        };
    }

some 数组的方法,只要一个满足,就返回true

if (typeof Array.prototype.some != "function") {
  Array.prototype.some = function (fn, context) {
    var passed = false;
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {
          if (passed === true) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

every 数组的方法 和some相对应

if (typeof Array.prototype.every != "function") {
  Array.prototype.every = function (fn, context) {
    var passed = true;
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          if (passed === false) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

indexOf 数组的方法

var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)
if (typeof Array.prototype.indexOf != "function") {
  Array.prototype.indexOf = function (searchElement, fromIndex) {
    var index = -1;
    fromIndex = fromIndex * 1 || 0;
    for (var k = 0, length = this.length; k < length; k++) {
      if (k >= fromIndex && this[k] === searchElement) {
          index = k;
          break;
      }
    }
    return index;
  };
}

lastIndexOf 数组的方法

if (typeof Array.prototype.lastIndexOf != "function") {
  Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
    var index = -1, length = this.length;
    fromIndex = fromIndex * 1 || length - 1;

    for (var k = length - 1; k > -1; k-=1) {
        if (k <= fromIndex && this[k] === searchElement) {
            index = k;
            break;
        }
    }
    return index;
  };
}

reduce 好厉害,以前竟然从来没用过

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
  return previous + current;
});
console.log(sum); // 10

var matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];
// 二维数组扁平化
var flatten = matrix.reduce(function (previous, current) {
  return previous.concat(current);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]
// 兼容处理
if (typeof Array.prototype.reduce != "function") {
  Array.prototype.reduce = function (callback, initialValue ) {
     var previous = initialValue, k = 0, length = this.length;
     if (typeof initialValue === "undefined") {
        previous = this[0];
        k = 1;
     }
    if (typeof callback === "function") {
      for (k; k < length; k++) {
          // 没有对上下文的切换,所以不需要call,apply了
         this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
      }
    }
    return previous;
  };
}

reduceRight array的方法

var data = [1, 2, 3, 4];
var specialDiff = data.reduceRight(function (previous, current, index) {
  if (index == 0) {
    return previous + current;
  }
  return previous - current;
});
console.log(specialDiff); // 0
//兼容处理
if (typeof Array.prototype.reduceRight != "function") {
  Array.prototype.reduceRight = function (callback, initialValue ) {
    var length = this.length, k = length - 1, previous = initialValue;
    if (typeof initialValue === "undefined") {
        previous = this[length - 1];
        k--;
    }
    if (typeof callback === "function") {
       for (k; k > -1; k-=1) {          
          this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
       }
    }
    return previous;
  };
}
Object
所有对象操作中,如果o不是Object类型,将会抛出TypeError异常。
Object.getPrototypeOf(o)

获取给丁对象的prototype对象。等价于以前的o.__proto__。
Object.getOwnPropertyDescriptor(o,p)

获取对象描述。和Object.defineProperty的相关方法。
Object.getOwnPropertyNames(o)

获取自有属性名列表。结果列表将不包含原型链上的属性。
Object.create(o,p)

以给丁对象o为prototype创建新的对象并返回。如果对象描述p存在,就使用其定义刚创建的对象(类似调用Object.defineProperties(obj,p))。
Object.defineProperty(o,p,attrs)

根据规则attrs定义对象o上,属性名为p的属性Object.defineProperties(o,props)

根据对象描述props来定义对象o,通常props包含多个属性的定义。
Object.seal(o)

一个对象在默认状态下,extensible: 可以添加新的属性configurable: 可以修改已有属性的特性

Object.seal会改变这两个特性,既不能扩展新属性,也不能修改已有属性的特性。Object.freeze(o)

将对象的每个自有自有属性(own property)做如下操作:
属性的writable,特性置为false,属性的configurable,特性置为false

同时,该对象将不可扩展。可见,该方法比Object.seal更加严格的限制了对一个对象的未来改动。Object.preventExtensions(o)
将对象置为不可扩展。Object.isSealed(o)
判断一个对象是否sealed:
对象的每个自有属性:如果属性的configurable特性为true,则返回false
如果对象为extensible的,那么返回false
不满足以上两个条件,则返回true

Object.isFrozen(o)对每个自有属性,如果该属性的configurable或writable
特性为true,则返回false,如果对象为extensible的,那么返回false
不满足以上两个条件,则返回true

Object.isExtensible(o)
判对一个对象是否可扩展。

Object.keys(o)
返回对象o的所有可枚举(enumerable)属性的名称。

Object.prototype.isPrototypeOf(v)
检查对象是否是位于给定对象v的原型链上。
Object.prototype.propertyIsEnumerable(p)
检查一个对象上的属性p是否可枚举。

参照 张鑫旭[http://www.zhangxinxu.com/wordpress/?p=3220]
https://segmentfault.com/a/1190000000515151

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

推荐阅读更多精彩内容