|
|
|
|
|
這幾天寫了幾個前端程序,在寫的時候,是用Chrome瀏覽器來調(diào)試的,在Chrome、Firefox等主流瀏覽器里測試都無問題,但是,今天用IE打開時發(fā)現(xiàn)報錯!
經(jīng)過檢查發(fā)現(xiàn),在IE里根本認不了reduce()
、startsWith()
等函數(shù)。我用的IE版本是IE11。
reduce
函數(shù)為數(shù)組求和、求平均值帶來了極大的方便,一行代碼就搞定了。普通方式要通過對數(shù)組元素遍歷,再求和求均值,略有麻煩。比如下面這個示例:
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ù)好用很多。比如下面這個示例:
var data = "卡卡測速網(wǎng) howtostagehomes.com";
console.log(data.startsWith("卡卡測速網(wǎng)")); //true
通過這次經(jīng)歷,發(fā)現(xiàn)IE瀏覽器確實落后,它不但渲染網(wǎng)頁速度慢,還不支持很多先進的語法,包括JS語法和CSS語法。
所以現(xiàn)在很多設(shè)計師都不再考慮IE用戶了,畢竟IE的使用人數(shù)現(xiàn)在幾乎是可以忽略的了。為了照顧少量的IE用戶,可能設(shè)計師要花很多時間去編寫兼容IE瀏覽器的程序,這在某些情況下是得不賞識。
除了上面提到的reduce
、startsWith
函數(shù)外,還有不少函數(shù)在IE里是運行不了的,下面給大家提供一些。
// ============ new WeakMap() ===============//
// 在IE10 及以下版本顯示 undefined
alert(window.WeakMap);
// ============ new ArrayBuffer() ===============//
// 在IE9 及以下版本顯示 undefined
alert(window.ArrayBuffer);
// ============ 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 = ["神夢無痕", "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" 對象
var module = {
x: 81,
getX: function() { return this.x; }
};
alert(module.getX()); // 81
var retrieveX = module.getX;
alert(retrieveX()); // 返回 9 - 因為函數(shù)是在全局作用域中調(diào)用的
// 創(chuàng)建一個新函數(shù),把 'this' 綁定到 module 對象
// 新手可能會將全局變量 x 與 module 的屬性 x 混淆
var boundGetX = retrieveX.bind(module);
alert(boundGetX()); // 81
// ============ String[0] ===============//
// 在IE7 及以下版本顯示 undefined
alert("#"[0]);