卡卡網(wǎng)

這幾天寫了幾個(gè)前端程序，在寫的時(shí)候，是用Chrome瀏覽器來調(diào)試的，在Chrome、Firefox等主流瀏覽器里測(cè)試都無問題，但是，今天用IE打開時(shí)發(fā)現(xiàn)報(bào)錯(cuò)！

經(jīng)過檢查發(fā)現(xiàn)，在IE里根本認(rèn)不了reduce()、startsWith()等函數(shù)。我用的IE版本是IE11。

reduce函數(shù)為數(shù)組求和、求平均值帶來了極大的方便，一行代碼就搞定了。普通方式要通過對(duì)數(shù)組元素遍歷，再求和求均值，略有麻煩。比如下面這個(gè)示例：

var data = [5,1,6,8,3];
var sum = data.reduce((a, b) => a + b);  //23 
var avg = data.reduce((a, b) => a + b)/data.length;  //4.6

而startsWith函數(shù)在檢索字符串上也提供了很大的便捷，比indexOf函數(shù)好用很多。比如下面這個(gè)示例：

var data = "卡卡測(cè)速網(wǎng) m.gazebo2go.com";
console.log(data.startsWith("卡卡測(cè)速網(wǎng)"));  //true

通過這次經(jīng)歷，發(fā)現(xiàn)IE瀏覽器確實(shí)落后，它不但渲染網(wǎng)頁速度慢，還不支持很多先進(jìn)的語法，包括JS語法和CSS語法。

所以現(xiàn)在很多設(shè)計(jì)師都不再考慮IE用戶了，畢竟IE的使用人數(shù)現(xiàn)在幾乎是可以忽略的了。為了照顧少量的IE用戶，可能設(shè)計(jì)師要花很多時(shí)間去編寫兼容IE瀏覽器的程序，這在某些情況下是得不賞識(shí)。

除了上面提到的reduce、startsWith函數(shù)外，還有不少函數(shù)在IE里是運(yùn)行不了的，下面給大家提供一些。

IE10 及以下版本不支持

// ============  new WeakMap()  ===============//  
// 在IE10 及以下版本顯示  undefined
alert(window.WeakMap);

IE9 及以下版本不支持

// ============  new ArrayBuffer()  ===============//  
// 在IE9 及以下版本顯示  undefined
alert(window.ArrayBuffer);

IE8 及以下版本不支持

// ============   trim()  ===============//
String.prototype.trim = String.prototype.trim || function(){  
    return this.replace(/(^\s*)(\s*$)/g, "");  
}; 
/*------------------ 例子 ---------------*/
var s = "          刪除首尾空格          ";
alert(s.trim()); // “刪除首尾空格”

// ============   isArray()  ===============//
window.isArray = window.isArray || function isArray(value){  
    return Object.prototype.toString.call(value) == "[object Array]";  
}
/*------------------ 例子 ---------------*/
var arr = [1,2,3,4,5];  
alert(isArray(arr)); // true

// ============   Date.now()  ===============//
Date.now = Date.now || function(){  
    return new Date().valueOf();  
}
/*------------------ 例子 ---------------*/
alert(Date.now()); 

// ============   indexOf  ===============//
Array.prototype.indexOf = Array.prototype.indexOf || function (searchElement, fromIndex) {
    if (this == null) {
        throw new TypeError('“this” 為 null 或者未定義');
    }
    var O = Object(this);
    var len = O.length >>> 0;
    if (len === 0) return -1;
    var n = +fromIndex || 0;
    if (Math.abs(n) === Infinity) n = 0;
    if (n >= len) return -1;
    var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
        if (k in O && O[k] === searchElement) return k;
        k++;
    }
    return -1;
};
/*------------------ 例子 ---------------*/
var arr = ["神夢(mèng)無痕", "SMWH", "qq1042207232"];  
alert(arr.indexOf("SMWH")); // 1

// ============   filter  ===============//
// 數(shù)組的一些方法  every(), filter(), forEach(), map(), some() 
Array.prototype.filter = Array.prototype.filter || function(fun /*, thisp*/){  
    var len = this.length;
    if (typeof fun != "function"){
        throw new TypeError();
    }
    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++){
        if (i in this){
            var val = this[i]; // in case fun mutates this
            if (fun.call(thisp, val, i, this)) {
                res.push(val);
            }
        }
    }
    return res;
};
/*------------------ 例子 ---------------*/
var arr = [1,2,3,4,5,6];  
var filterResult = arr.filter(function(item, inde, array){  
    return (item>2);  
});  
alert(filterResult); // [3,4,5,6]

// ============   every  ===============//
Array.prototype.every = Array.prototype.every || function(fun){
    for(var i=0;i<this.length;i++){
        if(this[i]!==undefined){
            var r=fun(this[i],i,this);
            if(r==false){
                return false;
            }
        }
    }
    return true;
}
/*------------------ 例子 ---------------*/
var arr = [1,2,3,4,5,6];  
var everyResult = arr.every(function(item, inde, array){  
    return (item>2);  
});  
alert(everyResult); // false 

// ============   some  ===============//
Array.prototype.some = Array.prototype.some || function(fun){
    for(var i=0;i<this.length;i++){
        if(this[i]!==unefined){
            var r=fun(this[i],i,this);
            if(r==true){ return true; }
        }
    }
    return false;
}
/*------------------ 例子 ---------------*/
var arr = [1,2,3,4,5,6];  
var someResult = arr.some(function(item, inde, array){  
    return (item>2);  
});  
alert(someResult); // true

// ============   map  ===============//
Array.prototype.map = Array.prototype.map || function(fun){
    var newArr=[];
    for(var i=0;i<this.length;i++){
        if(this[i]!==undefined){
            var r=fun(this[i],i,this);
            newArr[i]=r;
        }
    }
    return newArr;
}
/*------------------ 例子 ---------------*/
var arr = [1,2,3,4,5,6];  
var mapResult = arr.map(function(item, inde, array){  
    return item * 2;  
});  
alert(mapResult); // [2, 4, 6, 8, 10, 12]

// ============   reduce  ===============//
Array.prototype.reduce = Array.prototype.reduce || function(fun,base){
    base===undefined&&(base=0);
    for(var i=0;i<this.length;i++){
        if(this[i]!==undefined){
            base=fun(base,this[i],i,this);
        }
    }
    return base;
}
/*------------------ 例子 ---------------*/
var arr = [1,2,3,4,5,6];  
var reduceResult = arr.reduce(function(total, item, inde, array){  
    return total + item;
}, 0);
alert(reduceResult); // 21

// ============   bind  ===============//
Function.prototype.bind = Function.prototype.bind || function (otherThis) {
    if (typeof this !== 'function') {
        throw new TypeError('Function.prototype.bind - 綁定的不是函數(shù)體');
    }
    var baseArgs = Array.prototype.slice.call(arguments, 1),
        baseArgsLength = baseArgs.length,
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
            baseArgs.length = baseArgsLength;
            baseArgs.push.apply(baseArgs, arguments);
            return fToBind.apply(
                fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
            );
        };
    if (this.prototype) {
        fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();
    return fBound;
};
/*------------------ 例子 ---------------*/
this.x = 9;    //在瀏覽器中，this 指向全局的 "window" 對(duì)象
var module = {
  x: 81,
  getX: function() { return this.x; }
};
alert(module.getX()); // 81

var retrieveX = module.getX;
alert(retrieveX());  // 返回 9 - 因?yàn)楹瘮?shù)是在全局作用域中調(diào)用的

// 創(chuàng)建一個(gè)新函數(shù)，把 'this' 綁定到 module 對(duì)象
// 新手可能會(huì)將全局變量 x 與 module 的屬性 x 混淆
var boundGetX = retrieveX.bind(module);
alert(boundGetX()); // 81

IE7 及以下版本不支持

// ============   String[0]  ===============//  
// 在IE7 及以下版本顯示  undefined
alert("#"[0]);

您可能對(duì)以下文章也感興趣

• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文簡(jiǎn)繁體轉(zhuǎn)換【演示-源碼下載】
• jQuery find("#id")與find(".class")實(shí)例分析與比較
• JQuery計(jì)算HTML元素子元素(child elements)
• $.ajax() data{} 傳參三種常見寫法及ajax()方法參數(shù)詳解
• 表單序列化插件serializeJSON.js下載及使用示例

• JQuery如何把JSON字符串轉(zhuǎn)為JSON對(duì)象
• 使用HTML5和JQuery讀取CSV(Text)文件的實(shí)例
• HTML5和JQuery裁剪圖像實(shí)時(shí)預(yù)覽縮略圖并上傳
• HTML5和JQuery實(shí)現(xiàn)多圖片上傳預(yù)覽
• 使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）
• 使用jQuery setInterval函數(shù)延遲5秒后跳轉(zhuǎn)到另一個(gè)頁面

標(biāo)簽: reduce函數(shù)  startsWith函數(shù)